homepage Welcome to WebmasterWorld Guest from 54.166.62.226
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Dropdown navbar with Custom ends
Willis

10+ Year Member



 
Msg#: 4398508 posted 7:19 am on Dec 16, 2011 (gmt 0)

Working on trying to make a nav bar similar to the image below. Pure photoshop in this version:

[desmond.imageshack.us...]

I razor-ed up the image in these parts:

1) nav_none.jpg -- 1px Standard background non-mouseover.
2) nav_over.png -- 1px Mouse-Over (darker color) image.
3 & 4) nav_left_none.png nav_left_over.png Rounded corner plus excess for left fields. No-Mouseover && On-Mouseover.
5 & 6) nav_right_none nav_right_over -- Similar to Above.
7)nav_spacer.jpg -- 1px Vertical line between links.


I've managed to (minus IE browers, one more hurdle) get most of the bar functioning, except for the vertical spacers. My problem is if I un-comment the two code lines (nav li && nav a:link) I get my spacers but I'm stuck with the spacer graphic bleeding behind my two rounded corners.

HTML:
<ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-home"><a href="#">Announcements</a></li>
<li id="nav-about"><a href="#">Programs</a></li>
<li id="nav-archive"><a href="#">Calender</a></li>
<li id="nav-lab"><a href="#">About</a></li>
<li id="nav-reviews"><a href="#">Hours</a></li>
<li id="nav-contact"><a href="#">Contact Us</a></li>
</ul>


CSS:
#nav {
margin:0px;
padding:0px;
}
#nav li {
display:inline;
padding:0px;
float:left;
<!--background:url(images/nav_spacer.jpg) 0 0 repeat-x;-->
width:auto;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
height:43;
}

#nav a:link, #nav a:visited {
padding:10px 20px 0px 20px;
float:left;
background:url(images/nav_none.jpg) 0 0 repeat-x;
width:auto;
text-align:center;
color:#ffffff;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
height:43;
<!--margin-right:1px;-->
}
.nav {
padding-right:12px;
background: url(images/nav_left_none.png) top left repeat-x;
}

#nav li:first-child a {
margin-left:1px;
background: url(images/nav_left_none.png) top left repeat-x;
padding-left:26px;
font-variant:small-caps;
}
#nav li:first-child a:hover, #nav li:first-child a:focus {
margin-left:1px;
background: url(images/nav_left_over.png) top left repeat-x;
padding-left:26px;
text-decoration:underline;
font-variant:small-caps;
}

#nav li:last-child a {
background: url(images/nav_right_none.png) top right repeat-x;
padding-right:26px;
}
#nav li:last-child a:hover, #nav li:last-child a:focus {
background: url(images/nav_right_over.png) top right repeat-x;
padding-right:26px;
}
#nav a:hover, #nav a:focus {
color:#fff;
background: url(images/nav_over.png) 0 0 repeat-x;
text-decoration:underline;
}


My options feel limited, I go stop using the corners but the sites design hinders on avoiding a boxy, business theme. And I've gone the route of a list as later on (if someone can help me with THIS task I'd love ya) I want to have a drop-down list for the links.

Am I barking up the wrong tree? Or missing something obvious?

 

Willis

10+ Year Member



 
Msg#: 4398508 posted 7:36 am on Dec 16, 2011 (gmt 0)

I've also tried to keep the rounded corners separate files and outside of the list, but page breaks complicate that too.

londrum

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4398508 posted 1:16 pm on Dec 17, 2011 (gmt 0)

if it was me, i would combine all the images into one.

you dont need a background image for the button, plus another image for the vertical spacer. you could just combine them into one, and add the spacer to the right edge of the background image. that would save a lot of faffing about.
for the links at either end of the navbar, that don't need a vertical spacer, just make them 1 pixel thinner, so it doesn't appear.

you could also combine the background image with the hover version, as a CSS sprite. have a search for "CSS sprite", and see how can merge them all into one

all that CSS you've got that reference the
last-child might be alright on today's browsers, but i think it might cause you problems on older versions of IE because it wont work. it's probably best to scrap that stuff, and put the rounded corners straight onto the <ul> element instead. you won't need last-child for that
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved