gfx42 Posted August 20, 2012 Share Posted August 20, 2012 (edited) Hello.I'm building my first website gfx42.com.It is a static website.I would like the navigation link(s) to the active or current page to remain a certain color whenever you are on any given page.For example while i'm on the "about us" page, the "about us" nav link should remain any given color until I leave the page. default.css @charset "utf-8";/* CSS Document */body {background-color:#333;}.container {width:1012px;height:720px; margin:0 auto;margin-top:90px;background-color:#333;padding:5px;}.header {background-image:url(images/header.png);background-repeat:no-repeat;margin:0 auto;width:1012px;height:103px;padding-bottom:11px;margin-top:11px;}.nav {width:650px;height:10px;float:right;margin-top:-12px;margin-right:-29px;}.nav li {list-style:none;display:inline;padding:14px; }.nav li a{ text-decoration:none;color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:18px; }.nav a:visited {color:#fff;}.nav a:hover {color:#000;}.nav a:active {color:#000;}.nav a:focus {color:#000;} .logo { background-repeat:no-repeat;margin:0 auto;float:left;margin-top:30px;margin-left:42px;width:250px;height:40px; } .content { background-image:url(images/content.png);background-repeat:no-repeat;float:right;margin-top:45px;padding-right:5px;width:656px;height:657px; }.content h1 {color:#333;text-align:center;font-family:Arial, Helvetica, sans-serif; }.contentleft { background-image:url(images/contentleft.png);background-repeat:no-repeat;float:left;padding-top:11px;width:340px;height:189px; } aboutus.html (as an example) <!DOCTYPE html><html><head><title>GFX42</title><link rel="stylesheet" type="text/css" href="default.css"/></head> <body> <div class="container"> <div class="header"> <div class="nav"> <ul> <li><a href="aboutus.html">About</a></li>| <li><a href="portfolio.html">Portfolio</a></li>| <li><a href="gfxgallery.html">GFXGallery</a></li>| <li><a href="gfxrequest.html">GFXRequest</a></li>| <li><a href="donate.html">Donate</a></li> </ul> </div> <!--END of the NAV div--> <div class="content"><h1>About GFX42</h1></div> <!--END of the CONTENT div--> <div class="logo"><a href="index.html"><img border="0"src="images/logo.png" width="248" height="40" alt="home"> </div> <!--END of the LOGO div--> </div><!--END of the HEADER div--> <div class="contentleft"></div> <!--END of the CONTENTLEFT div--> <div class="contentleft"></div> <!--END of the CONTENTLEFT div--> <div class="contentleft"></div> <!--END of the CONTENTLEFT div--> </div> <!--END of the CONTAINER div--> </body></html> Edited August 20, 2012 by gfx42 Link to comment Share on other sites More sharing options...
ShadowMage Posted August 20, 2012 Share Posted August 20, 2012 If all your pages are separate files, the easiest way is to create a class and apply it to the appropriate link within each page. For example, in the About Us page you might have something like this: <li class='activePage'><a href="aboutus.html">About</a></li>|<li><a href="portfolio.html">Portfolio</a></li>|<li><a href="gfxgallery.html">GFXGallery</a></li>|<li><a href="gfxrequest.html">GFXRequest</a></li>|<li><a href="donate.html">Donate</a></li> Link to comment Share on other sites More sharing options...
gfx42 Posted August 20, 2012 Author Share Posted August 20, 2012 (edited) If all your pages are separate files, the easiest way is to create a class and apply it to the appropriate link within each page. For example, in the About Us page you might have something like this:<li class='activePage'><a href="aboutus.html">About</a></li>|<li><a href="portfolio.html">Portfolio</a></li>|<li><a href="gfxgallery.html">GFXGallery</a></li>|<li><a href="gfxrequest.html">GFXRequest</a></li>|<li><a href="donate.html">Donate</a></li> Thanks for the help. One question though, why don't I have to do your suggestion to the hover & visited states for them to work? If you notice in my .css, the visited & hover states are implimented the same way the active/focus states are, yet they work.Just curious why the diffrent link states need to be addressed in seperate ways. .nav a:visited {color:#fff;}.nav a:hover {color:#000;}.nav a:active {color:#000;}.nav a:focus {color:#000;} Update: Your suggestion didn't work, though I appreciate it. Edited August 20, 2012 by gfx42 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2012 Share Posted August 21, 2012 It should have worked, using visited on multiple pages will result in that pages menu link always being shown as visited when that page is selected on all of those pages. the active only works when mousedown is used prior to releasing again, that is why a active class or id is used instead. Link to comment Share on other sites More sharing options...
gfx42 Posted August 21, 2012 Author Share Posted August 21, 2012 (edited) This is how I tried.I did this on all html pages.Mabey i'm just doing it wrong =/ One of my html pages as an example: <li class='activePage'><a href="blog.html">Blog</a></li>|<li class='activePage'><a href="aboutus.html">About Us</a></li>|<li class='activePage'><a href="portfolio.html">Portfolio</a></li>|<li class='activePage'><a href="gfxgallery.html">GFXGallery</a></li>|<li class='activePage'><a href="gfxrequest.html">GFXRequest</a></li>|<li class='activePage'><a href="donate.html">Donate</a></li> Here's how I updated my css .nav a:visited {color:#fff;}.nav a:hover {color:#000;}.activepage a:active {color:#C00;}.activepage a:focus {color:#000;} Edited August 21, 2012 by gfx42 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2012 Share Posted August 21, 2012 (edited) You place the active class ONLY to the menu link that represents the CURRENT page 'activepage' is different from 'activePage' and is treated as such, so as far as it is concerned there is no element using activepage as a class so will not apply the styling. you don't need to apply the pseudo class as in .activePage a { color:#C00;} if color:#C00; is the colour of the link that is the link to current page Edited August 21, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
gfx42 Posted August 21, 2012 Author Share Posted August 21, 2012 Could you give me a code example please? I'm having a hard time understanding =/. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 21, 2012 Share Posted August 21, 2012 The :active psuedo class a:active { ... } targets an anchor element when it is active. In other words, while the mouse is pressed on the anchor (as dsonesuk pointed out). It has absolutely nothing to do with an active page (ie, indicating which page the user is currently on). Dsonesuk already gave you an example of how to use an .activePage class to target an anchor to highlight the current page: .activePage a { color: #C00;} Put that code in your CSS and add the activePage class to the appropriate links in each page, but only the link for the current page. In other words, in your About Us page, add the activePage class to the li wrapper for the aboutus.html link and only that link. In the Portfolio page, add it to only the link for portfolio.html and so on. Link to comment Share on other sites More sharing options...
gfx42 Posted August 21, 2012 Author Share Posted August 21, 2012 (edited) Thanks for explaining. I went to each of my html pages and put in the class "activePage" for the corresponding page.Below is an example of my blog link being assigned the class. <li class="activePage"><a href="blog.html">Blog</a></li>|<li><a href="aboutus.html">About Us</a></li>|<li><a href="portfolio.html">Portfolio</a></li>|<li><a href="gfxgallery.html">GFXGallery</a></li>|<li><a href="gfxrequest.html">GFXRequest</a></li>|<li><a href="donate.html">Donate</a></li> Then I went and put this into my css: .activePage a {color: #C00;} Not working =/ Edited August 21, 2012 by gfx42 Link to comment Share on other sites More sharing options...
ShadowMage Posted August 21, 2012 Share Posted August 21, 2012 Do you have a live link? If not, post your full code. You don't need to post each page. Just one (for example, your about us page) will do fine. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2012 Share Posted August 21, 2012 Use an id ref instead, it will have a higher precedence over classes and pseudo class already applied, if you use a class you would have to apply nav class and place it below what you already have to give it a higher priority. id ref, can be placed anywhere, above, below already define pseudo class styling, it will always take precedence. #activePage a {color:lime;}.nav a:visited {color:red;}.nav a:hover {color:#000;}.nav a:active {color:#C00;}.nav #activePage a {color:lime;} <ul class="nav"><li id='activePage'><a href="blog.html">Blog</a></li>|<li><a href="aboutus.html">About Us</a></li>|<li><a href="portfolio.html">Portfolio</a></li>|<li><a href="gfxgallery.html">GFXGallery</a></li>|<li><a href="gfxrequest.html">GFXRequest</a></li>|<li><a href="donate.html">Donate</a></li></ul> using class ref, will have to placed at bottom and also have reference to .nav class applied to give it greater precedence .nav a:visited {color:red;}.nav a:hover {color:#000;}.nav a:active {color:#C00;}.nav .activePage a {color:lime;} <ul class="nav"><li class='activePage'><a href="blog.html">Blog</a></li>|<li><a href="aboutus.html">About Us</a></li>|<li><a href="portfolio.html">Portfolio</a></li>|<li><a href="gfxgallery.html">GFXGallery</a></li>|<li><a href="gfxrequest.html">GFXRequest</a></li>|<li><a href="donate.html">Donate</a></li></ul> Link to comment Share on other sites More sharing options...
gfx42 Posted August 21, 2012 Author Share Posted August 21, 2012 (edited) Do you have a live link? If not, post your full code. You don't need to post each page. Just one (for example, your about us page) will do fine. http://gfx42.com current - default.css @charset "utf-8";/* CSS Document */body {background-color:#333;}.container {width:1012px;height:720px; margin:0 auto;margin-top:90px;background-color:#333;padding:5px;}.header {background-image:url(images/header.png);background-repeat:no-repeat;margin:0 auto;width:1012px;height:103px;padding-bottom:11px;margin-top:11px;}.nav {width:700px;height:10px;float:right;margin-top:-12px;margin-right:-26px;}.nav li {list-style:none;display:inline;padding:14px;}.nav li a{text-decoration:none;color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:18px;} .nav a:visited {color:#fff; }.nav a:hover {color:#000;}.nav a:active {color:#0F0; }.nav a:focus {color:#C00; }.activePage a {color: #C00;} .logo {background-repeat:no-repeat;margin:0 auto;float:left;margin-top:30px;margin-left:42px;width:250px;height:40px;} .content {background-image:url(images/content.png);background-repeat:no-repeat;float:right;margin-top:45px;padding-right:5px;width:656px;height:657px;}.content h2 {color:#333;text-align:center;font-family:Arial, Helvetica, sans-serif;}.contentleft {background-image:url(images/contentleft.png);background-repeat:no-repeat;float:left;padding-top:11px;width:340px;height:189px;} Current - aboutus.html (as an example) <!DOCTYPE html><html><head><title>GFX42</title><link rel="stylesheet" type="text/css" href="default.css"/></head><body> <div class="container"> <div class="header"> <div class="nav"> <ul> <li><a href="blog.html">Blog</a></li>| <li class="activePage"><a href="aboutus.html">About Us</a></li>| <li><a href="portfolio.html">Portfolio</a></li>| <li><a href="gfxgallery.html">GFXGallery</a></li>| <li><a href="gfxrequest.html">GFXRequest</a></li>| <li><a href="donate.html">Donate</a></li> </ul> </div> <!--END of the NAV div--> <div class="content"><h2>About GFX42</h2></div> <!--END of the CONTENT div--> <div class="logo"><a href="index.html"><img border="0"src="images/logo.png" width="248" height="40" alt="home"> </div> <!--END of the LOGO div--> </div><!--END of the HEADER div--> <div class="contentleft"></div> <!--END of the CONTENTLEFT div--> <div class="contentleft"></div> <!--END of the CONTENTLEFT div--> <div class="contentleft"></div> <!--END of the CONTENTLEFT div--> </div> <!--END of the CONTAINER div--> </body></html> Use an id ref instead, it will have a higher precedence over classes and pseudo class already applied, if you use a class you would have to apply nav class and place it below what you already have to give it a higher priority. id ref, can be placed anywhere, above, below already define pseudo class styling, it will always take precedence. ok i'll try this. Thankyou so much guys =P Edit: It's solved now guys. I used: .nav .activePage a {color:#C00;} instead of .activepage a {color:#C00;} Thanks alot for the help Edited August 21, 2012 by gfx42 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now