CSS for aligning images left and right of a link

HTML & CSS
1

Hi,

I have the following code through which I have images to the left and right of a link.

<li><a href=‘default.aspx’ class=“bulletLevel1”>Home Page</a> <img src=“images/new.gif” /></li>

I am using CSS class as follows for the left-side image. However, I am using img tag for the right side image. I am looking to come up with a CSS class for the right-side image also instead of using the img tag. Can someone help please. Thanks.

.bulletLevel1 {
background-image: url(images/menu-item-default.gif);
border: 0px;
padding-left: 10px;
padding-right: 0px;
background-repeat: no-repeat;
background-position: left 50%;
vertical-align: top;
margin-left: 6px;
}

2

Yes, background images are the way to go. What I would suggest is that you firstly set the <a> to display: block;. Then add some right padding to it (enough to fit the image) and place the image as a background on the <a>, setting it to

background: url(images/menu-item-default.gif) no-repeat 100% 50%;

Then, put left padding on the <li>, and put the left image on the <li> itself. The reason is that you can’t have two background images on the one element in CSS2, though some browsers do support the new CSS3 option to have multiple backgrounds.

An alternative to putting the left image on the <li> is to put a span inside the <a> and place it on there instead. Make sure to set the <span> to display: block too.

3

That did not work. I have the <li> tag inside a td. The image is appearing to the far right in the cell. How can I get the image to appear next to the <a> itself (say, 25px from where the link title ends)?

4

Let get some concept straight.

Are your images part of the content,or are they purely decorative? If they aren’t icons or each image is different and related directly to the specific text…they are a content and you are better off using the IMG tag for BOTH.

If your images are merely dividers, icons or any such other decoration then a BG image is best. Do note that BG images DO NOT alter (make space for themselves) the content flow so you need to make the space for them using padding or margin methods.

UNLESS you intend to support ONLY CSS3, you can only put ONE background image per element. So, for example you will put the left image in the LI and the right image in the anchor.

ROUGHLY, something like this:
li {
background: url(images/menu-item-default.gif) no-repeat 0 50% ;
padding-left: 20px; /* i assumed the image to be 10px so I added 10px to your padding*/
padding-right: 0px;
margin-left: 16px;}

li a{
display:block;
border:none;
background: url(images/menu-item-default2.gif) no-repeat 100% 50% ;
padding-right: 20px; /* i assumed the image to be 10px so I added 10px to your padding*/
padding-left: 0px;}

hope that helps.

5

[FONT=Verdana]Do you mean that you have a list - <ol> or <ul> - inside your <td>, or just a single <li>? If the latter, then that is not valid (X)HTML.

It would help if you could provide a link, or at least the full HTML/CSS, so we can see what’s going on.
[/FONT]

6

Thanks, that helped. I had a parent div with fixed width and so the image was aligning to the far right of the div. position:absolute on the <a> tag fixed the issue.