PDA

View Full Version : Navigation

homeboy
04-12-2005, 01:37 AM
hello,

I have a navigation and i want to have the page that it is on the navigation link is highlighted grey in the background stating that it is on the link's page.

Here is the css code:

#navcontainer {
width: 200px;
color:#666666;

}

#navcontainer ul {
margin-left: 0px;
padding-left: 0px;
list-style:none;
font-family: Arial, Helvetica, sans-serif;
text-indent: 10px;
font-variant: normal;
font-weight:bold;
font-size:13px;
color: #666666;
}

#navcontainer a {
display: block;
padding: 5px;
width: 200px;
background-color: #FFFFFF;
border-bottom: 1px solid #666666;

}

#navcontainer a:link, #navlist a:visited {
color: #666666;
text-decoration: none;

}

#navcontainer a:hover {
background-color: #cccccc;
color: #666666;

}

here is the html code for the navigations

<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Home</a></li>
<li><a href="#">Abouna's Corner</a></li>
<li><a href="#">Coptic Hymns</a></li>
<li><a href="#">Presentations</a></li>
<li><a href="#">Photo Gallery</a></li>
</ul>
</div>

So how can i do that active background color on a button indicated that it is on that page?

THanks
chud_wallice
04-12-2005, 01:53 AM
ul#nav{....}

ul#nav a:visited {...}
ul#nav a:link {...}
ul#nav a:hover {...}
ul#nav a:active {...}

should be all you need to make it work
http://www.w3schools.com/css/css_pseudo_classes.asp

if you need to repeat items accross your page elements then as a general rule something is wrong.........
#navcontainer {
width: 200px;
color:#666666;

}

#navcontainer ul {
margin-left: 0px;
padding-left: 0px;
list-style:none;
font-family: Arial, Helvetica, sans-serif;
text-indent: 10px;
font-variant: normal;
font-weight:bold;
font-size:13px;
color: #666666;
}


try changing the color for nav container (not where it's repeated in the list). how many elements is that affecting?


hth
Chud
bradyj
04-12-2005, 02:10 AM
You mean you want a specific color when the user is on a specific page, for that button? You can do a little trick; first, give each link an id or class:

<ul>
<li id="linkh"><a href="index.html">home</a></li>
<li id="linkw"><a href="whoweare.html">who we are</a></li>
<li id="linkc"><a href="contact.html">contact</a></li>
</ul>



Now, give your body an id for each page element you want that specific effect. Example, for the who we are page:

<body id="whoweare">


Then you can style the css for that specific page, for that link like so:

#whoweare #linkw {background-color: blue;}


This is how the css menu on one of my layouts (http://www.bodyecologydiet.com) has the background image point down in the top menu for specific pages. The same could be said for you color then on that specific page.