styling menu

[runnerjp]

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>

[jhaycutexp]

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

i usually use a class like so

a .active{style...}

[runnerjp]

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

like this?

[jcdevelopment]

Originally Posted by runnerjp

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

[abduraooft]

We had a good thread on this , see Change link text style for current page.

[runnerjp]

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 :S

div#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;
}

[jcdevelopment]

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

[runnerjp]

<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

[jcdevelopment]

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.

[runnerjp]

ok but i have now done it like this

div#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

[abduraooft]

That's what you've applied in

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

[runnerjp]

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

[abduraooft]

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

[runnerjp]

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

[bazz]

Have you set any default attributes like this

body {
color : #fff;
}

bazz