SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Farmington
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS for aligning images left and right of a link

    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>&nbsp;<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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Farmington
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)?

    Quote Originally Posted by ralph.m View Post
    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.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    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. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,344
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by vayumahesh View Post
    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)?
    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.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Farmington
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by dresden_phoenix View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •