styling menu

hey guys i have this so far div#navbar2 {
height: 30px;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #99b3b4;
text-align:center;
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;

}
div#navbar2 li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}
div#navbar2 li a:link {
color: #FFF:
}
div#navbar2 li a:hover {
font-weight: bold;
color: #000000;
background-color: #e4ebeb;
} but what i can figure out is how to show the link they are on as a selected button so having the button be red if they are on that link...

<div id="navbar2">
<ul>
<li><a href="index.php?page=update">Basic</a></li>
<li><a href="link2.html%20">Button 2</a></li>
<li><a href="link3.html%20">Button 3</a></li>
</ul>
</div>

create a style that would identify it as an active...

i usually use a class like so

a .active{style...}

div#navbar2 li a:active {font-weight: bold;
color: #000000;
background-color: #e4ebeb;}

like this?

div#navbar2 li a:active {font-weight: bold;
color: #000000;
background-color: #e4ebeb;}

like this?


I believe thats how he meant it, unless you create a class called


.active

We had a good thread on this , see Change link text style for current page. (http://www.codingforums.com/showthread.php?t=122490)

hey thanks i took the website and got it to work... but
#basic a,
#test a
{
font-weight: bold;
color: black;
background-color: #e4ebeb;

does not make the writing black for some reason its white :Sdiv#navbar2 {
height: 30px;
width: 100%;
border-top: solid #000 1px;

background-color: #99b3b4;
text-align:center;
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;

}
div#navbar2 li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}
div#navbar2 li a:link {
color: #FFF:
}
div#navbar2 li a:hover {
font-weight: bold;

}
#basic a,
#test a
{
font-weight: bold;
color: black;
background-color: #e4ebeb;
}

is that all of your CSS? Can you post the html also or maybe a link? It may be that something is overwriting it.

<div id="navbar2">
<ul>
<li id="basic"> <a href="index.php?page=update">Basic</a></li>
<li id="ill"><a href="link2.html%20">Button 2</a></li>
<li id="i1"><a href="link3.html%20">Button 3</a></li>
</ul>
</div>


thats everything

why do you need to set the nav bar <a>


div#navbar2 li a:link {
color: #FFF:
}


When you define the same link with this


#basic a,
#test a
{
font-weight: bold;
color: black;
background-color: #e4ebeb;
}


Just get rid of the nav2 a:active color. Thats what makes it white.

ok but i have now done it like thisdiv#navbar2 {
height: 30px;
width: 100%;
border-top: solid #000 1px;

background-color: #99b3b4;
text-align:center;
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;

line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;

}
div#navbar2 li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}

div#navbar2 li a:hover {
font-weight: bold;

}
#basic a,
#test a
{
font-weight: bold;
color: black;
background-color: #e4ebeb;
}

but the text is still white

That's what you've applied in div#navbar2 li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}

ok but what about the other boxes that are not selected... how can i make there text white then ~:S

Have you followed the link that I've posted in my previous post?

i did indeed thats how i got the selected llink working...but the problem is making the NON selected links white text to match there background

like so

div#navbar2 {
height: 30px;
width: 100%;
border-top: solid #000 1px;
color: #FFF;
background-color: #99b3b4;
text-align:center;
}

but it does not work

Have you set any default attributes like this




body {
color : #fff;
}



bazz