View Full Version : Need Help with CSS Navigation

02-02-2011, 06:55 PM
I am new to the web world and in need of assistance.

How do you make the button stay in the "down" or "clicked" position using this template (http://htmldrive.net/items/show/401/CSS-Overlapping-Tabbed-Navigation.html) in dreamweaver?

Any suggestions are very welcome!

02-02-2011, 08:21 PM

give that a read.

You basically can add an "active" class to each tab on the page in which they should be in the down state.

There's more ways to do it but, with just HTML and CSS this is a good start.

02-02-2011, 10:49 PM
Thanks the link helps but is not working for me. I am sure I am doing it wrong since I am new to the web world.

style type="text/css">
#nav *{font:1em Georgia, serif;text-decoration:none;color:#fff;list-style:none;margin:0;padding:0; line-height:1em} /*Reset browsers and apply basic formatting*/
#nav li{display:inline}
#nav li *{height:39px;float:left;cursor:pointer;cursor:hand}
#nav a{background:url(images/1/left.jpg) left no-repeat;cursor:pointer;padding-left:27px;border-bottom:solid 3px #bbb} /*Applys the left segment of the image and adds the grey bottom border*/
#nav .right{padding-right:27px}
#nav .center{background:url(images/1/center.jpg) repeat-x;margin-right:-27px;min-width:30px;height:39px;padding-top:12px;voice-family: "\"}\"";voice-family:inherit;height:27px;} /*Applys the seamless background*/
#nav .start{background:url(images/1/farleft.jpg) left no-repeat} /*Applys the far left corner*/
#nav .end{background:url(images/1/farright.jpg) right no-repeat;padding-right:54px;} /*Applys the far right corner*/
/*The following controls the hover states of the individual image slices. It's important to remember that IE6 will only recognise :hover when applied to a link element*/
#nav a:hover{background:url(images/1/right.jpg)}
#nav a.start:hover{background:url(images/1/farlefthover.jpg)}
#nav a:hover .end{background:url(images/1/farrighthover.jpg) right}
#nav a:hover .center{background:url(images/1/centerhover.jpg);color:#000}
#nav a:hover .right{background:url(images/1/lefthover.jpg) right;padding-right:54px;margin-right:-27px;position:relative}

#nav a.active { url(images/1/homes.jpg); /* should change the home link to the homes.jpg*/

#nav a.active span { background# {url(images/1/homes.jpg);
a.active {
* html ul#nav a, * html ul#nav a.active {
padding: 0;


02-10-2011, 09:56 PM
The site should have "hover" state stay on when you click on the tab. I am using a.active for the tabbed CCS nav but is not working.

Please help!:(