...

View Full Version : styling menu



runnerjp
05-23-2008, 11:41 AM
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
05-23-2008, 12:09 PM
create a style that would identify it as an active...

i usually use a class like so


a .active{style...}

runnerjp
05-23-2008, 12:37 PM
div#navbar2 li a:active {font-weight: bold;
color: #000000;
background-color: #e4ebeb;}

like this?

jcdevelopment
05-23-2008, 03:19 PM
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
05-23-2008, 03:37 PM
We had a good thread on this , see Change link text style for current page. (http://www.codingforums.com/showthread.php?t=122490)

runnerjp
05-23-2008, 06:30 PM
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
05-23-2008, 07:22 PM
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
05-23-2008, 09:47 PM
<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
05-23-2008, 09:51 PM
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
05-24-2008, 03:12 PM
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
05-24-2008, 03:22 PM
That's what you've applied in
div#navbar2 li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}

runnerjp
05-24-2008, 04:53 PM
ok but what about the other boxes that are not selected... how can i make there text white then ~:S

abduraooft
05-24-2008, 05:18 PM
Have you followed the link that I've posted in my previous post?

runnerjp
05-24-2008, 07:53 PM
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
05-24-2008, 10:44 PM
Have you set any default attributes like this





body {
color : #fff;
}



bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum