|
CSS - Issue With Text Over Image Sprite
I'm new with this image sprite method, at least with the type of image I have copied. I have it mostly working, but for some reason it word wraps the two word text that appears over the image.
Here is a link to the example: ... EDIT: It seems I can't post a URL. I'll try on the second post. It is located in the Test Data tab on this product page. The button that says View More. View on one line, More on the other. I'm thinking it is an issue with my HTML more than the CSS. I've tried many different variations with not much like. I can break it more, but can't seem to fix it. Any help or guidance is appreciated. Similar TutorialsI am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example: Currently like this Code: #store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}
want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}
with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet. effectively so i can just change the other external style sheet to change the gif file and keep this one the same. HOW? possible? Im struggling here trying to replace this code. any help would be appreciated. Now To go into details I have a magento template. Im trying to replace the default navigation text menu to a css sprite top image menu. the default navigation text menu css code is stated below Quote: /********** < Navigation */ .nav-container {} #nav {padding:0; margin:0; font-size:11px; border-bottom:1px solid #000; } /* All Levels */ #nav li { text-align:left; position:relative; border-right:1px solid #000;} #nav li a, #nav li a span{background:url(../images/menu_bg.gif) left top repeat-x #141314;} #nav li.first{background:url(../images/menu_corner_left.png) left top no-repeat; padding-left:5px;} #nav li.first a span{padding-left:42px;} #nav li.over.first, #nav li.active.first{background:url(../images/menu_corner_left_active.png) left top no-repeat;} #nav li.last a{background:url(../images/menu_corner_right.png) right top no-repeat; padding-right:5px;} #nav li.last a span{padding-right:38px; padding-left:45px;} #nav li.over.last a, #nav li.active.last a{background:url(../images/menu_corner_right_active.png) right top no-repeat;} #nav li.over a span, #nav li.active a span{background:url(../images/menu_bg_active.gif) left top repeat-x #1E1F1F; padding-bottom:16px;} #nav li.over, #nav li.active{border-bottom:1px solid #2C2B2C;} #nav li.over { z-index:999; } #nav li.parent {} #nav li a { display:block; text-decoration:none; } #nav li a:hover { text-decoration:none; } #nav li a span { display:block; padding:20px 43px 17px 47px; text-transform:uppercase; white-space:nowrap; cursorointer; } #nav li ul a span { white-space:normal; } /* 1st Level */ #nav li { float:left; } #nav li a { float:left; padding:0; color:#FFF; } #nav li a:hover { color:#FFF; } #nav li.over a, #nav li.active a { color:#FFF; } /* 2nd Level */ #nav ul { position:absolute; width:17em; top:50px; left:-10000px; border:1px solid #202020; border-bottom:0; background:#070707; font-size:9px; } #nav ul li { float:none; border-bottom:1px solid #202020!important; background:0; } #nav ul li.last { border-bottom:0; } #nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#888 !important; background:0!important; } #nav ul li a:hover { color:#FFF !important; } #nav ul li a span{padding:3px 5px!important; background:0!important;} #nav ul li.active > a, #nav ul li.over > a { color:#FFF !important; } /* 3rd+ leven */ #nav ul ul { top:7px; } /* Show Menu */ #nav li.over > ul { left:0; } #nav li.over > ul li.over > ul { left:100px; } #nav li.over ul ul { left:-10000px; } /********** Navigation > */ Ok now after viewing the code above i was wondering how can i add the css sprite image code that i made to replace the default navigation text menu. Below is the css code i made for the sprite images. Quote: #navigation { margin: 0; padding: 0; width: 969px; height: 53px; Background-image: url(lastone.gif) ; } #navigation li { margin: 0; padding: 0; list-style-type: none; display: inline; height:53px; text-align: center; float:left; line-height:53px; } #navigation a { display:block; height:52px; } #navigation a:hover { background-image: url(lastone.gif) ; } #nav-home { width:161px; } #nav-home a:hover { background-position:bottom 0; } #nav-Service { width:161px; } #nav-Service a:hover { background-position:bottom -162px; } #nav-Quicklinkz { width:161px; } #nav-Quicklinkz a:hover { background-position:bottom -323px; } #nav-Advertise { width:161px; } #nav-Advertise a:hover { background-position:bottom -484px; } #nav-Contact { width:161px; } #nav-Contact a:hover { background-position:bottom -645px; } #nav-About { width:161px; } #nav-About a:hover { background-position:bottom -806px; } #navigation span { display: none; } AS you can see below i also have inserted the HTML that correspond to the css sprite image menu code. I link the css code into the html. so my final 2 questions is. can anyone replace the css code i made in the default css code. and after thats done which root do i upload the html code to. Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Navigation Menu</title> <link rel="stylesheet" type="text/css" href="menu.css"/> </head> <body> <ul id="navigation"> <li id="nav-home"><a href="#"><span>Home</span></a></li> <li id="nav-Service"><a href="#"><span>Service</span></a></li> <li id="nav-Quicklinkz"><a href="#"><span>Quicklinkz</span></a></li> <li id="nav-Advertise"><a href="#"><span>Advertise</span></a></li> <li id="nav-Contact"><a href="#"><span>Contact</span></a></li> <li id="nav-About"><a href="#"><span>About</span></a></li> </ul> </body> </html> I am looking to make a navigation menu similar to the following: http : / / www . coremediadesign.co.uk/website_design_company/about_core_media_design.html This is the sprite image they use. http : / / img819.imageshack.us/img819/8185/menuo.png I would like to accomplish the same thing. I am NOT looking for one long image with my entire menu in image format. I want a three-part background image/sprite like the one I posted above that is used as the background/hover/active by repeating it on the x-axis. I have tried for a long time to get this working but have not been able to. Please help me out. Hey everyone, I'm trying to convert a jscript rollover setup to using CSS sprites. I have setup the following sprite: [IMG]eagleonedims.com/images/navmap.jpg[/IMG] I cannot figure out how to have the <li> sections replace the entire ba6nner with a shifted-down sprite upon rollover. The shifted sprite just appears within the boundaries of the respective<li> section. The reason for needing this is to include the cloud effect which overlap the other li sections. Basically, upon rollover I need the ENTIRE navmap.jpg image to be shifted by 88px down. The image is 1000px wide and each sprite is 88px tall. Thanks for any help! CSS: Code:
#navmap {
width: 1000px;
height: 88px;
background: url("images/navmap.jpg");
margin: 0;
padding: 0;
position: relative;
}
#navmap li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navmap li, #navmap a {
height: 88px;
display: block;
}
#home {left: 141px; width: 110px;}
#about {left: 251px; width: 120px;}
#pricing {left: 371px; width: 120px;}
#quote {left: 491px; width: 120px;}
#contact {left: 611px; width: 120px;}
#login {left: 731px; width: 128px;}
#home a:hover {background: url("images/navmap.jpg") 0px -88px no-repeat;}
#about a:hover {background: url("images/navmap.jpg") 0 -176px no-repeat;}
HTML: Code: <ul id="navmap"> <li id="home"><a href="index.php">Home</a></li> <li id="about"><a href="about.php">About</a></li> <li id="pricing"><a href="pricing.php">Pricing</a></li> <li id="quote"><a href="quote.php">Quote</a></li> <li id="contact"><a href="contact.php">Contact</a></li> <li id="login"><a href="login.php">Login</a></li> </ul> Hello, I have created a CSS Sprite containing the many different list bullets, in a vertical form. I have then defined the different li styles. This all works, however, the bullet background is showing the other bullet styles when the li spans more than one line. It's probable best if I show you what I mean: http://snkhan.co.uk/origami.php The corresponding CSS is: Code: #content ul {margin: 0 0 20px 0; padding: 0;}
#content li {list-style: none; background: url(../images/list.png) no-repeat scroll 0px -34px; padding-left: 20px;}
and Code: #community > li {background: url(../images/list.png) no-repeat scroll 0px -18px !important;}
#music > li {background: url(../images/list.png) no-repeat scroll 0px -16px !important;}
#twitter > li {background: url(../images/list.png) no-repeat scroll 0px -18px !important;}
Is there anyway I can prevent the li background showing more than 16px x 16px at a time? Thank you for your time. hi.... i'm currently having this issue with ie6. I have a png sprite image. In the sprite there is a rounded corner frame. When i apply the neccessary css.. it work perfectly with ff.. but for ie.. i can not seem to move/translate the background to the correct path.. i've tried using background-position. it works with ff but not with ie6.. here is the code snipplet Code:
#image{
background:url(images/160x120_image.jpg) no-repeat;
width:160px;
height:120px;
position:relative;
}
#frame{
width:160px;
height:120px;
background:url(images/sprite.png) no-repeat -59px 0;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/sprite.png',sizingMethod='crop');
}
</style>
<div style="width:200px; margin:20px auto;">
<div id="image">
<div id="frame"></div>
</div>
</div>
here is the sprite does anyone have any clues to move the sprite to the correct position?? Thanks in advance So I have been trying to troubleshoot this issue for days and can't come up with a solution. I hope someone out there can help!! So my navigation image sprite is not displaying correctly in IE7 or 6. It basically shows the whole sprite image scrunched up into the defined 100px height of the <ul>. Also, the sprite image has a width of 930px but in Firefox it begins to repeat the image even though the <ul> width is 930px. So I added the no-repeat to the background image sprite. Now it's not centered on the page. What's up with this? Also, I am trying to display the pictures on the page with one large pic on the left and then 4 images to the right of the large image. You'll have to see it to understand. It displays perfectly how i want in Firefox...and of course IE7 and 6 are all out of wack. Not sure what I am doing wrong here as well. I used a grid system, but it is not locking it in like it normally does. You can see the sprite and alignment issues if you view in IE 7 and how I want it to look in Firefox. Here's my coding: HTML: Code: <body id="pretty-pics"> <div id="container"> <div id="navigation"> <ul id="nav"> <li id="home"><a href="/">home</a></li> <li id="essence"><a href="../essence.html">essence</a></li> <li id="pictures"><a href="/pretty-pictures.html">pretty pictures</a></li> <li id="treasures"><a href="/treasures.html">treasures</a></li> <li id="contact"><a href="/contact.html">contact</a></li> </ul> </div><!--end nav--> <div class="clear"></div> <div class="pic-wrap col12"> <div class="col5 float-left"> <a href="images/products/product-1.jpg" rel="shadowbox[products]" title="Necklace"><img id="product-1" src="images/products/product-1-t.png" /></a> </div> <div class="col7 float-right"> <div class="col4 float-left"> <a href="images/products/product-2.jpg" rel="shadowbox[products]" title="Bracelet"><img id="product-2" src="images/products/product-2-t.png" /></a> <a href="images/products/product-4.jpg" rel="shadowbox[products]" title="Bracelets"><img id="product-4" src="images/products/product-4-t.png" /></a> </div> <div class="col3 float-right"> <a href="images/products/product-3.jpg" rel="shadowbox[products]" title="Necklaces"><img id="product-3" src="images/products/product-3-t.png" /></a> <a href="images/products/product-5.jpg" rel="shadowbox[products]" title="Necklaces"><img id="product-5" src="images/products/product-5-t.png" /></a> </div> <div class="clear"></div> </div> </div><!--end main wrapper--> CSS: Code: #pretty-pics{
background: #32b4c9 url(images/wall-bg.jpg) no-repeat scroll center 0px;
}
/* Main Navigation */
#nav{
width: 930px;
height: 100px;
background: url(images/sprite.png) no-repeat;
margin: 20px auto;
position: relative;
}
#nav li{
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
text-indent: -9999px;
}
#nav li, #nav a{
height: 100px;
display: block;
}
#home{
left: 0;
width: 186px;
}
#essence{
left: 186px;
width: 186px;
}
#pictures{
left: 372px;
width: 186px;
}
#treasures{
left: 558px;
width: 186px;
}
#contact{
left: 744px;
width: 186px;
}
#home a:hover{
background: transparent url(images/sprite.png) 0 -104px no-repeat;
}
#essence a:hover{
background: transparent url(images/sprite.png) -186px -104px no-repeat;
}
#pictures a:hover{
background: transparent url(images/sprite.png) -372px -104px no-repeat;
}
#treasures a:hover{
background: transparent url(images/sprite.png) -558px -104px no-repeat;
}
#contact a:hover{
background: transparent url(images/sprite.png) -744px -104px no-repeat;
}
#essence a.current{
background: transparent url(images/sprite.png) -186px -208px no-repeat;
}
#pictures a.current{
background: transparent url(images/sprite.png) -372px -208px no-repeat;
}
#treasures a.current{
background: transparent url(images/sprite.png) -558px -208px no-repeat;
}
#contact a.current{
background: transparent url(images/sprite.png) -744px -208px no-repeat;
}
/* Pictures */
.pic-wrap{
height: 550px;
margin: 50px auto;
}
#product-1{
margin: 10px 0 0;
}
#product-2{
margin: 10px 50px 0;
}
#product-3{
margin: -40px 20px 0;
}
#product-4{
margin: 20px 70px 0;
}
#product-5{
margin: 30px 0 0;
}
ANY help is appreciated. I am tired of pulling my hair out over this one! Thanks in advance!!! Hi everyone I recently stumbled upon the CSS sprite idea and i've been loving it! Makes changing and adding graphics so much easier. However i've run into a concern. My image sprite is becoming quite large (>150KB) and my HTML code has many divs who's background refers to this sprite (can get upto 100 divs). With this i've started to notice slight sluggishness of my HTML page and got me thinking weather i should divide my large sprite into a number of smaller ones to enhance performance. This is mainly because i have quite a lot of hover effects (which merely shift the background position) and i suspect this is causing the sluggishness and high memory usage. It's far too time consuming to try this myself so i'm wondering if anyone has any experience with such an action. Many thanks Hello folks, I am trying to get a basic sprite working. I have been reading on this for over a week and I think I am missing something very basic. I made a couple sprite png's in photo shop could not get them to display correctly and I found a place online that makes them for U, it displays just like the ones I made... so http://www.realestateozarks.com/mcnally/mcn.png Ok what is happening when I try and call the sprite and display a pic on it, it does correct width and height but divides the height by the 6 pictures on it and displays all of them instead of 1. http://www.realestateozarks.com/rsstest.htm and U can see what I am trying to say. I am not trying to do anything fancy here only display 1 pic out of the 6 correctly. if I call the sprite in a image statement like <img class="sprite mcn1 mc5"> it does display the img correctly... but that is not correct html code and if alt statment is added it displays it on top of pic. css code passes w3c.org test NOTE: if I try and display a individual pic in a td statment like <td class="sprite mcn1 mc5"> it displays the picture correctly... well as a backround image anyway... here is my html code to call sprite... In head statment Code: <link href="mcsprite.css" rel="stylesheet" type="text/css" > in body to call pic Code: <img src="../mcnally/mcn.png" class="sprite mcn1 mc5"> Here is code in my mcsprite.css file Code: .sprite {background:url(../mcnally/mcn.png);
background-repeat:no-repeat; }
.mcn1 {height:125px;}
/* mcn1 */
.mc1 {width:200px; background-position: 0px 0px;}
.mc2 {width:200px; background-position: 0px -135px;}
.mc3 {width:200px; background-position: 0px -270px;}
.mc4 {width:200px; background-position: 0px -405px;}
.mc5 {width:200px; background-position: 0px -540px;}
.mc6 {width:200px; background-position: 0px -675px;}
If I can get it to display 1 pic correctly then I can change my code and display all 6 pics correctly. I have 24 pic's on my home page so using a couple sprites with 6 pic's each on them with .2 sec latency on grabbing each individual pic will save me about 2 sec load time on my home page. thanks in advance for any suggestions/help whonoes I currently have a menu sprite set up that works. I also have a css dropdown menu set up as well in conjunction with the sprite menu. Issue: The dropdown does not work in IE6. It drops down behind the div just below it (never to see it until I hid the contents in the div below) even after adding z-index to nearly every attribute. After hiding the contents in the div below, I see the drop down, but as soon as I mouse over it, it disappears. This has been a headache for me and I need to get this resolved asap. Here is the CSS: aunkor.com/css.html Here is the HTML: aunkor.com/html.html Please help! >_< Hi, I'm trying to transmogrify a Listamatic menu http://css.maxdesign.com.au/listamatic2/vertical06.htm by adding my own graphic. But I'm not able to take out the borders or get my header to 'touch' the list. I've removed the borders from the CSS but I'm left with a gap between my images. See the file he http://cftest.mccormick.com/mc3stage/listbox.htm What I really want is the rollover images to butt up against each other. Of course it looks fine in FF! Can you help? Glen Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Listamatic2: Subtle box list</title>
<style type="text/css">
#rnav {
padding: 0px;
margin: 0px;
width: 223px;
border-left: 1px solid #b48932;
border-bottom: 1px solid #b48932;
border-right: 1px solid #b48932;
}
#navcontainer { margin: 0px; }
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}
#navcontainer li { margin: 0; }
#navcontainer a
{
display: block;
padding: 5px 10px;
width: 203px;
color: #000;
background-color: #ADC1AD;
text-decoration: none;
font-weight: bold;
font-size: .8em;
background-image: url(assets/mc3_rnav_arrowon.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
background-image: url(assets/mc3_rnav_arrowoff.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer ul ul li { margin: 0; }
#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 185px;
color: #000;
background-color: #C5D8C5;
text-decoration: none;
font-weight: normal;
}
#navcontainer ul ul a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
}
#rnavheader {
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div id="rnavheader">
<img src="assets/mc3_rnav_header.gif" />
</div>
<div id="rnav">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>
</div>
</body>
</html>
Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text I am having an issue with my text decoration for a link in a unordered list not being declared correctly. I have set the href link to text-decoration: none value, but it is still getting the declaration from the #gt_links tag. Why isn't it picking up the #gt_links li a tag. here is the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NONE</title>
<style>
#gt_links {
position: relative;
top: 139px;
height:auto;
width: 138px;
margin: auto;
font-size: 12px;
font-weight:bold;
color: #ffcc66;
text-decoration: underline; // believe is culprit
margin-top: 5px;
}
#gt_links li, ul {
margin: 0;
padding: 0;
list-style: none;
text-decoration:none;
}
#gt_links li a {
display: inline;
position: relative;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #ffcc66;
}
#gt_links a {
display: inline;
position: relative;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #ffcc66;
}
#gt_links a:hover{background:none;text-decoration:none;}
#gt_links li:hover{background:url(http:/static.grepolis.com/images/game/layout/menu_hover.png)no-repeat;}
</style>
</head>
<body>
<div id="gt_links">Grepolis Tools
<ul>
<li><a id="w_pref" href="#">Preferences</a><span style="color:#FFCC66;"> | </span><a id="w_help" href="#">Help</a></li>
<li><a id="w_toggle" href="#">Show/Hide</a></li>
</ul>
</div>
</body>
</html>
Yes I know if you pull it up it is very ugly. This is just the part of a page which is relative to my issue. Please help. Thanks I have this header in my css. and i am trying to get the Text i put in there to position in the middle and left of the header. But nothing i do works. it even will not change size that i describe or color. here is the css for header and the text code. Code:
#topsection {
background: #EAEAEA url(images/png_logo.gif) no-repeat right center;
height: 90px;
}
span.htext {
font-color: #3300CC;
font-size: 30px;
text-decoration: none;
letter-spacing: 1px;
text-align: left middle;
}
anyone know how to fix this. Alright, first post in a while, let me see if I can make this clear and simple so I can fix this issue. I am making a website for my history project. I have made the website solely by hand and using an HTML editor; I have quite a bit of knowledge in CSS and HTML, but really, this is a great learning process for me. The website design is laid out in table form. There are just two columns, a sidebar and the main content column. The text causes the table to be stretched out (you can see this by changing the border to "1" and viewing the table. However, when the main text strechtes the table, the side bar moves with it, settling in the center of the smaller column. The entire thing creates a problem like this: My History Website The source code for the site can be checked through your browser, or if you are too lazy, this is what I have written: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>History Through The Ages: 1865-1900</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Ethan Mick">
<!-- Date: 2008-05-21 -->
<!-- I will eventually put this style sheet into its own external CSS file.-->
<style type="text/css">
<!--
body {
background:gray;
}
p {
color:white;
text-align:left;
position:top;
text-indent:1cm;
vertical-align:top;
}
h2 {
color:black;
text-align:center;
}
.sidebar {
position:relative;
}
.ads {
display:block;
margin-left:auto;
margin-right:auto;
}
.imageright {float:right;}
.imageleft {float:left;}
-->
</style>
</head>
<body>
<img src="file:///Volumes/FAT32DATA/OmniEthan/School/US%20&%20World/History%20Logo.jpg" title="History Through The Ages" alt="History Logo" width="800">
<table width="800" border="0">
<tr>
<td width="150" height="300">
<a class="sidebar" href="file:///Users/Ethan/Sites/History%20Website/Historysite.html">Home</a><br /><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1856-1900.html">1865-1900</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1901-1920.html">1901-1920</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1921-1940.html">1921-1940</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1941-1960.html">1941-1960</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1961-1980.html">1961-1980</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1981-2000.html">1981-2000</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/2001-Current.html">2001-Current</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/Bibliography.html">Bibliography</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/Genealogy.html">Mick Family Genealogy</a><br /><br />
<a href="http://www.mozilla.com/en-US/firefox/"><img class="" border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1b.png"/></a>
</td>
<td width="*">
<h2>Emerging from the Civil War to the turn of the century<br />1865 to 1900</h2>
<img class="imageright" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/DeadUnionsoldiercivilwar.jpg/250px-DeadUnionsoldiercivilwar.jpg" title="A dead soldier in Petersburg, Virginia 1865. Photograph by Thomas C. Roche">
<p>The United States emerged as a whole country from the Civil War, thanks to Abraham Lincoln and the union army, although not without consequences. Over half a million people were killed in the war. The United States' primary goal at this point was reconstruction from the war, and a lot of work had to be done in the south.</p>
<p>This time period set up the United States for many years to come. During the reconstruction the United States began to industrialize, creating thousands of miles of new infrastructure, and machinating a lot of jobs which had to be done by hand before. The industrialization allowed huge corporations to be formed, like Standard Oil created by John D. Rockefeller in 1870 and Carnegie Steel Company created by Andrew Carnegie in the mid 1870's, many of which gained a monopoly in the market. The industrialization allowed the United States to get back onto her feet quicker, as the new businesses could gain a lot of income by exporting their goods on the new infrastructure.</p>
<p>The South wasn't happy about losing the war, and it wasn't happy about being back in the union. During reconstruction many groups of people made clandestine acts against the government, and some others made their attacks public, such as the KKK. The reconstruction acts involved the dismantling of southern governments, and the southern states were only allowed to have their own government after the majority swore a loyalty oath to the Union, and they ratified the new amendments, the 13th, 14th, and 15th. Even then, once the southern people regained their own governments, everything that the North had been fighting for, rights of African-Americans, were largely ignored, and the African-Americans had to suffer even more discrimination. To make matters worse, the courts ruled in Plessy vs. Ferguson that segregation was legal on the premises of "separate but equal."</p>
<img class="imageleft" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/USS_Maine_h60255a.jpg/300px-USS_Maine_h60255a.jpg" title="USS Maine - Wikimedia Commons">
<p>To heal the scars which had been formed in the Civil War, the United States decided to jump aboard the imperialistic boat, and attacked the weakened Spanish empire, fighting Spain for Peurto Rico, the Philippines, Guam, and Cuba. The war was extremely single sided, with the United States decimating the Spanish fighters on almost all fronts. The only interesting points of the war was the Philippines and Cuba. In the Philippines, native freedom fighters had been fighting the Spanish for a long time, and they viewed the Americans as saviors coming to help their cause. However, when it became apparent that the American's weren't going to leave, they became angry and fought us as well. In Cuba, Roosevelt would lead the "Rough Riders" to fight the against the spanish with some Cuban help.</p>
<p>My family on both sides was in the United States at this point, but I am not positive where they were. My family was not seriously affected by the segregation and racism partaking in the south during this time; indeed, my ancestors who moved to the United States in 1730 opposed slavery. Seeing the cruelly and imbalance in South Carolina, where they landed, they moved to Illinois. This affected Grandma Lori, my mother's mom, and her attitude on life.</p>
</td>
</table>
<img class="ads" src="file:///Users/Ethan/image_1.png">
</body>
</html>
I recently added the "sidebar" class, trying to bring the links up, as you can see with the one I tested it on. Didn't work. I have tried other ideas, but I nothing worked. Also, if you have some advice (that doesn't require me completely rewrite the site) feel free to ring it by me. So my question is, without doing anything repetitive or stupid, and preferably with CSS, how can I cause the text (the links) in the sidebar to align to the top of the page, and make it look nice. If you need more information, lemme know. Good Day, I agreed to do a website for a friend and they have purchased a template that I have been working with. I am very new to CSS so I don't even understand some o the terminology. The best way to describe my problem is to show you what is happening to the text when it is added. This is what the page looks like with limited text: http://lisawesselsphotography.ca/services.html It looks ok from here This is what it looks like when a greater amount of text is inserted: http://lisawesselsphotography.ca/services-test.html Not so cool looking Here is my css: Code:
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: #11121A url(images/bg1_01.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #5A5D6A;
}
h1, h2, h3 {
margin: 0px;
padding: 0px;
}
p, ol, ul {
margin-top: 0px;
}
ol, ul {
margin: 0px;
padding: 0px;
}
p {
line-height: 220%;
}
strong {
font-weight: normal;
color: #FFFFFF;
}
a {
color: #A40000;
outline: none;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
img.border {
}
img.alignleft {
float: left;
padding-right: 25px;
}
img.alignright {
float: right;
}
img.aligncenter {
margin: 0px auto;
}
hr {
display: none;
}
ul.style1 {
margin: 0px;
padding: 0px 0px 0px 15px;
}
ul.style1 li {
padding: 3px 0px;
}
ul.style1 span {
color: #FFFFFF;
}
/** WRAPPER */
#wrapper-content {
background: url(images/bg1_02.jpg) repeat-x left top;
}
#wrapper {
background: url(images/bg1_05.jpg) repeat-y center top;
}
#wrapper-bgtop {
background: url(images/bg1_03.jpg) no-repeat center top;
}
#wrapper-bgbtm {
overflow: hidden;
padding-top: 132px;
background: url(images/bg1_04.jpg) repeat-y center bottom;
}
.homepage #wrapper {
background: url(images/bg3_03.jpg) repeat-y center top;
}
.homepage #wrapper-bgtop {
background: url(images/bg3_01.jpg) no-repeat center top;
}
.homepage #wrapper-bgbtm {
background: url(images/bg3_02.jpg) no-repeat center bottom;
}
.single #wrapper {
background: url(images/bg3_03.jpg) repeat-y center top;
}
.single #wrapper-bgtop {
background: url(images/bg2_01.jpg) no-repeat center top;
}
.single #wrapper-bgbtm {
overflow: hidden;
padding-top: 132px;
background: url(images/bg2_02.jpg) no-repeat center bottom;
}
.gallery #wrapper {
background: url(images/bg4_03.jpg) repeat-y center top;
}
.gallery #wrapper-bgtop {
background: url(images/bg4_01.jpg) no-repeat center top;
}
.gallery #wrapper-bgbtm {
overflow: hidden;
padding-top: 132px;
padding-bottom: 60px;
background: url(images/bg4_02.jpg) no-repeat center bottom;
}
.container {
width: 900px;
margin: 0px auto;
}
.clearfix {
clear: both;
}
/** HEADER */
#header {
}
/** LOGO */
#logo {
width: 300px;
height: 174px;
}
.homepage #logo {
width: 300px;
height: 350px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
text-indent: -9999em;
}
#logo h1 a {
display: block;
top: 0px;
left: 0px;
width: 950px;
height: 174px;
background: url(images/homepage02.png) no-repeat left top;
}
.homepage #logo h1 a {
display: block;
top: 0px;
left: 0px;
width: 950px;
height: 350px;
background: url(images/lisalogo1.png) no-repeat left top;
.logotext {float:right;}
}
/** MENU */
#menu {
height: 45px;
padding: 15px 0px 0px 40px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
padding: 0px 30px;
}
#menu a {
float: left;
display: block;
height: 23px;
margin: 0px;
padding: 6px 0px 0px 0px;
line-height: 1;
letter-spacing: -1px;
text-decoration: none;
text-transform: uppercase;
text-shadow: #270000 -1px 2px 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
#menu .active {
background: url(images/subpage1_02.jpg) repeat-x left top;
}
/** PAGE */
#page {
}
/** CONTENT */
#content {
}
.homepage #content {
height: 290px;
background: url(images/homepage022.jpg) no-repeat center top;
}
.gallery #content {
padding: 0px 45px;
}
.single #content {
padding: 100px;
}
/** SIDEBAR */
#sidebar {
}
/** FOOTER */
#footer-wrapper {
height: 200px;
background: url(images/bg1_06.jpg) no-repeat center top;
}
#footer {
padding-top: 40px;
}
#footer p {
margin: 0px;
padding: 0px 0px 0px 0px;
line-height: 220%;
color: #31343F;
}
#footer .column1 {
float: left;
width: 575px;
}
#footer .column2 {
float: left;
width: 50px;
height: 82px;
background: url(images/subpage1_03.jpg) no-repeat center top;
}
#footer .column3 {
float: right;
width: 275px;
text-align: right;
}
#footer .copyright {
padding-top: 5px;
font-size: 10px;
color: #252732;
}
#footer .copyright a {
color: #252732;
}
.box-style {
}
.box-style .title {
margin: 0px;
padding: 0px;
letter-spacing: -1px;
text-transform: uppercase;
font-size: 28px;
font-weight: bold;
color: #FFFFFF;
}
.box-style .byline {
margin: -10px 0px 30px 0px;
padding: 0px;
letter-spacing: -1px;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
color: #363945;
}
/* GALLERY */
#slideshow {
}
#gallery {
position: relative;
width: 804px;
height: 337px;
margin: 38px 0px 50px 0px;
}
#gallery .slide {
width: 634px;
height: 337px;
position: absolute;
left: 85px;
top: 0px;
background: url(images/gallery_01.jpg) no-repeat left top;
}
#gallery .output {
position: absolute;
top: 17px;
left: 17px;
}
#gallery .border {
width: 600px;
height: 300px;
position: absolute;
top: 17px;
left: 17px;
background: url(images/gallery_borders.png) no-repeat left top;
}
#gallery .captions {
width: 600px;
height: 55px;
position: absolute;
left: 17px;
top: 262px;
background: url(images/gallery_caption.png) repeat left top;
font: 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
#gallery .captions p {
margin: 0px;
padding: 22px 0px 0px 0px;
line-height: 1;
text-shadow: #000000 0px 2px 0px;
}
#gallery .captions .left {
float: left;
padding-left: 20px;
color: #FFFFFF;
}
#gallery .captions .right {
float: right;
padding-right: 20px;
color: #777777;
}
#gallery .prev, #gallery .next {
display: block;
width: 68px;
height: 106px;
position: absolute;
top: 116px;
text-indent: -9999em;
}
#gallery .prev {
left: 0px;
background: url(images/gallery_02.jpg) no-repeat left top;
}
#gallery .next {
right: 0px;
background: url(images/gallery_03.jpg) no-repeat left top;
}
#gallery-thumbnails {
width: 750px;
margin-left: 30px;
}
#gallery-thumbnails ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#gallery-thumbnails li {
float: left;
display: block;
width: 120px;
height: 60px;
padding: 15px;
position: relative;
}
#gallery-thumbnails img {
}
#gallery-thumbnails .border {
display: block;
width: 130px;
height: 70px;
position: absolute;
left: 10px;
top: 10px;
background: url(images/gallery_borders.png) no-repeat left bottom;
}
#gallery-thumbnails .active .border {
background-position: -130px 100%;
}
|
|||||||