homepage Welcome to WebmasterWorld Guest from 54.198.130.203
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
add a class/id inside a class
msgsbox




msg:3179163
 9:43 pm on Dec 5, 2006 (gmt 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!

 

Fotiman




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

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




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

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

Anyway, thanks Fotiman's quick reply.

atomicshadow




msg:3179731
 8:55 am on Dec 6, 2006 (gmt 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]

atomicshadow




msg:3179739
 8:58 am on Dec 6, 2006 (gmt 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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved