I have a list that I want to precede on each line with a small image.
The CSS:
.left div.arrow{background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right:2px;}
.left a.list:link, a:visited, a:active {color:black; font-size:0.8em; text-decoration:none; display:block; float:left;}
The HTML:
<div class="panel">My quick links</div>
<div class="arrow"></div>
<a href="/messages.php?p=new" class="list">Send a new message</a>
<br />
<div class="arrow"></div>
<a href="/settings.php#password" class="list">Change my password</a>
<br />
<div class="arrow"></div>
<a href="/settings.php#picture" class="list">Upload a new site image</a>
<br />
As you can see, each image should go before the writing. On the first line, the text "Send a new message" has the preceeding image. Howe开发者_StackOverflow社区ver, each line afterwards has the image at the end. So "Send a new message" has an image at the start and finish.
It is like the images are staying at the end of the previous line. Any ideas?
Your <br /> does not clear the float it only advances download a specific number of pixels listed in your CSS - I would guess 8 pixels down and that does not clear the 15 pixel floating background-image in the divide on the left.
You need something like <br style="clear:left"/> or <br style="clear:both"/> the style="clear:left" will advance below the last floating element.
For semantics you could style a LI to be a block and have a background image. If ../images/design/box.png is greater than 15 pixel make sure you use the overflow style.
Update
.left div.arrow{clear:left; background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right:2px;}
would be the none semantics solutions
You can do less work and integrate the arrow into the link itself:
a.arrow {
background-image: url(../images/design/box.png);
float:left;
min-height:15px;
margin-right:2px;
display:block;
background-repeat:no-repeat;
background-position:0px 0px;
padding-right:20px
}
If you want the scoop on nice-looking links and menus see: I love lists.
精彩评论