...

View Full Version : need help with css menu



andrew55
01-07-2013, 06:45 AM
I am trying to get this menu to show a white tap all of the time, which would be a separate background color from all the the tabs. It seems that the following code should work, but it does not. As you can see, I created a class "custom_current" on the tab which I want to have a white background at all times. Any suggestions greatly appreciated:


HTML:


<div class="custom_nav">
<ul>
<li><a href="/link1/">Tab 1</a></li>
<li><a href="/link2/">Tab 1</a></li>
<li><a href="/link3/">Tab 1</a></li>
<li class="custom_current"><a href="/link4/">Tab 1</a></li>
<li><a href="/link5/">Tab 1</a></li>
<li><a href="/link6/">Tab 1</a></li>
<li><a href="/link7/">Tab 1</a></li>
<li><a href="/link8/">Tab 1</a></li>
</ul>
</div>

CSS:


.custom_nav{
width: 100%;
background-color: #333;
}

.custom_nav ul{
padding: 0;
float: right;
margin-top: 12px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}

.custom_nav ul li{
display: inline;
}

.custom_nav ul li a{
float: left;
text-decoration: none;
background-color: #EFEFEF;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
color: #003399;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-khtml-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
padding-top: 4px;
padding-right: 7px;
padding-bottom: 4px;
padding-left: 7px;
margin-right: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}

.custom_nav ul li a:visited{
color: #003399;
}

.menu ul li a:hover{
color: #fff;
background-color:#555555;}

.custom_current {
background-color:#fff;
background:#fff;
}

Excavator
01-07-2013, 09:06 AM
Hello andrew55,
Since the #efefef background and rounded corners are on the anchor, applying a #fff background on the li is not going to show up.

Even when you put your .custom_current on an anchor, it is still not specific enough to override your

lor: #fff;
background: #555555;
}
#custom_current {background: #fff;}
</style>
</head>
<body>
<div class="custom_nav">
<ul>
<li><a href="/link1/">Tab 1</a></li>
<li><a href="/link2/">Tab 2</a></li>
<li><a href="/link3/">Tab 3</a></li>
<li><a href="/link4/">Tab 4</a></li>
<li><a href="/link5/">Tab 5</a></li>
<li><a href="/link6/">Tab 6</a></li>
<li><a id="custom_current" href="/link7/">Tab 7</a></li>
<li><a href="/link8/">Tab 8</a></li>
</ul>
<!--end .custom_nav--></div>
</body>
</html>

Have a quick look at an easy way to have your menu indicate what page your guest is on (http://nopeople.com/CSS%20tips/h_ul_menu-with_images/index.html). It's done with the body id.

andrew55
01-07-2013, 07:22 PM
Excavator - thanks for the response. Although that is a great menu, I'm not sure if it would work for me for this purpose. I need the menu tab to stay white for multiple pages (all actually), not just one page.

Excavator
01-07-2013, 07:46 PM
Excavator - thanks for the response. Although that is a great menu, I'm not sure if it would work for me for this purpose. I need the menu tab to stay white for multiple pages (all actually), not just one page.

So, does switching to an id applied to the anchor work for you then?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum