Welcome to WebmasterWorld Guest from 50.19.34.234

Forum Moderators: not2easy

Message Too Old, No Replies

add a class/id inside a class

     

msgsbox

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

5+ Year Member



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!

Fotiman

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

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



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

msgsbox

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

5+ Year Member



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

Anyway, thanks Fotiman's quick reply.

atomicshadow

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

5+ Year Member



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]

atomicshadow

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

5+ Year Member



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]

 

Featured Threads

Hot Threads This Week

Hot Threads This Month