SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: active page, css
-
Aug 21, 2007, 11:59 #1
- Join Date
- Jul 2004
- Location
- charleston
- Posts
- 351
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
active page, css
hey all,
this is a question regarding the style for a navigation. I would like to display a little graphical indicator on my navigation to let people know what page they are on right now.
I use a <UL> for my navigation and styles with CSS. It displays fine BUT i am not sure how to get the graphical indicator to appear on other links. Here is the screenshot. The little arrow shows up on the home button. How can I code it so that when the user clicks on "about" or "contact" the little arrow will appear?
any ideas?
thanks
florian
-
Aug 21, 2007, 12:33 #2
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You need to use a class or ID on the "current page" link and target that instead of the general global rules for the menu.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 21, 2007, 12:38 #3
- Join Date
- Jul 2004
- Location
- charleston
- Posts
- 351
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I do have a class for every menu item. how do I handle the current page with my css? Thats the part I am not sure about.
<ul class="top-nav">
<li><a href="index.html" class="home"><span class="active">Home</span></a></li>
<li><a href="about.html" class="about">About</a></li>
<li><a href="search-mls.html" class="search">Search MLS</a></li>
<li><a href="contact.php" class="contact">Contact</a></li>
</ul>
-
Aug 21, 2007, 13:30 #4
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What's the rest of your page code look like then? (I'd be tempted to put the current page class on the list item, but I want to make sure it won't conflict with whatever code you may have there first.)
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
Bookmarks