SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding images to ends of Menu UL

    URL: http://tinyurl.com/23kyeqb

    I don't know if this is possible, but I thought I'd check. At each end of the main navigation UL, I have a small, circular image. But when I apply the background image for the whole UL, those images get covered up. Is there a way to make it so those little images show on the ends and have the UL background show in between?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,294
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Based on the link above, I can't figure out what you are asking.

    Quote Originally Posted by auxano View Post
    At each end of the main navigation UL...
    Isn't there only one?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I'm a bit confused also

    Do you mean you want an image at the end of each list element?

    You can only have one image on the ul but any images on the list won't get covered up.

    You may need to clarify a bit so we can get an idea of what you want exactly.

  4. #4
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the confusion. I was in a rush when I posted that because my kids woke up and it was time for me to get them ready for school.

    Okay, I've attached a screen shot of what the ul is supposed to look like. Can you see the little rounded shape on the left side and on the right side?

    I tried to add those images by targeting the first and last menu items...

    Code:
    ul#nav li a.salon-menu {
    	padding-left: 22px;
    	background: url(../images/bg-nav-end-left.png) left 3px no-repeat;
    	}
    
    ul#nav li a.contact {
    	padding-right: 22px;
    	background: url(../images/bg-nav-end-right.png) right 3px no-repeat;
    	}
    ...but then when I apply the general background for the menu itself, it extends to the end and covers up those little images....

    Code:
    ul#nav {
    	float: left;
    	list-style: none;
    	margin: -4px 0 0 5px;
    	padding: 0;
    	background: url(../images/bg-nav.png) center 2px repeat-x;
    	clear: both;
    	}
    I hope this makes more sense. I'll appreciate any ideas!
    Attached Images Attached Images

  5. #5
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The nav-end images, though very subtle, are visible in Firefox, Safari and IE8, so I guess you are viewing in IE7 (6 looks very messy, so presumably hasn't been addressed yet).

    Selector consistency may be the answer. You currently specify:

    Code CSS:
    ul#nav
     
    ul#nav li a.salon-menu
     
    ul#nav li a.contact

    but the list elements are targeted with

    Code CSS:
    #nav li

    Try changing #nav li to ul#nav li .

  6. #6
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm actually working in the latest version of Firefox. I just removed (commented out) the background on the ul so you guys can see the images that are on the ends. When the ul background is applied, those rounded images somewhat disappear....they look rectangular instead of rounded as you can see right now.

    Thanks for the idea...I changed everything to read ul#nav.

  7. #7
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Try using negative margins to shift the images clear of the ul background:

    Code CSS:
    ul#nav li a.salon-menu {
    background:url("../images/bg-nav-end-left.png") no-repeat scroll left 3px transparent;
    margin-left:-5px;
    padding-left:22px;
    }
     
    ul#nav li a.contact {
    background:url("../images/bg-nav-end-right.png") no-repeat scroll right 3px transparent;
    margin-right:-5px;
    padding-right:22px;
    }

  8. #8
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that may have done it. What do you see? It's hard for me to see it very well.


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
  •