PDA

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?