Welcome to WebmasterWorld Guest from 107.20.54.98

Forum Moderators: not2easy

Message Too Old, No Replies

add a class/id inside a class

     
9:43 pm on Dec 5, 2006 (gmt 0)

New User

5+ Year Member

joined:Aug 15, 2006
posts:11
votes: 0


My navigation css is like
.navigation {
...
}
.navigation a{color: #555;
...
}
.navigation a:hover {color: #234;}

And my html code is like:
<div class="navigation">
<a href="./">Home</a> //Home page
<a href="./blog">Blog</a> //Blog page
</div>

Now I want to set current page, 'Home page' for example, to have the same style as "a:hover", or say set color to #234 in this case. I tried to add a class/id under .navigation, and span it to current page, but it won't work. Any suggestions? Thanks!

9:53 pm on Dec 5, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


Something like this:

<body id="homePage">
<div class="navigation">
<a href="./" id="homeLink">Home</a>
<a href="./blog" id="blogLink">Blog</a>
</div>
</body>

and

<body id="blogPage">
<div class="navigation">
<a href="./" id="homeLink">Home</a>
<a href="./blog" id="blogLink">Blog</a>
</div>
</body>

Then your CSS:

.navigation {
...
}
.navigation a{color: #555;
...
}
#homePage #homeLink,
#blogPage #blogLink,
.navigation a:hover {color: #234;}

10:14 pm on Dec 5, 2006 (gmt 0)

New User

5+ Year Member

joined:Aug 15, 2006
posts:11
votes: 0


I edited the wrong style.css file, that is why it did not work.

Anyway, thanks Fotiman's quick reply.

8:55 am on Dec 6, 2006 (gmt 0)

New User

5+ Year Member

joined:Aug 24, 2006
posts:4
votes: 0


If you want to have the "home page" as link with other color? you need declare id propery after others. But simplest way - set your menu item of current page without <a> tag. and set text color at the .navigation {} selector

---

[edited by: SuzyUK at 9:37 am (utc) on Dec. 6, 2006]
[edit reason] snipped signature per TOS#13 [/edit]

8:58 am on Dec 6, 2006 (gmt 0)

New User

5+ Year Member

joined:Aug 24, 2006
posts:4
votes: 0


first way:

.navigation {
...
}
.navigation a{color: #555;
...
}
.navigation a:hover {color: #234;}

#othercolor {color: #234}

And your html code is like:
<div class="navigation">
<a href="./" id="othercolor">Home</a> //Home page
<a href="./blog">Blog</a> //Blog page
</div>

---

[edited by: SuzyUK at 9:37 am (utc) on Dec. 6, 2006]
[edit reason] snipped signature per TOS#13 [/edit]