SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nav bar link to stay highlighted

    hi,

    i was wondering if there was a way to do this with css so that the user will know what page they're on. i tried doing it in html with class selectors and inline styles, but it's not working.

    for example, on my nav bar, i have three pages. 'about', 'contact', and 'portfolio'. the text colors are black by default, but change to pink when you hover over them. i would like the pink color to stay when you're on that page. so 'contact' would stay pink after you click on the page. however, the text link colors don't seem to be changing. any ideas? (snipped a bit of the top part since i can't include links.)

    Code:
    	<div id="navigation">
    		<ul>
    			<li><a href="about***">about</a></li>
    			<li><a href="portfolio***">portfolio</a></li
    			<li><a href="contact***">contact</a></li>
    		</ul>
    	</div><!--end of navigation div-->
    	<div id="bodycontent">
    	<div id="contactheader">
    	<h2>CONTACT</h2>
    	</div>
    	<div id="contact">
    	<img src="imagescontact.png">
    	</div>
    	<ul id="contact">
    		<li class="blackfont">WANT</li>
    		<li class="pinkfont">PURE?</li>
    	</ul
    	<p class="pinkfont">CONTACT9999PURCOM</p>
    
    	  </body>
          </div>
    
    	 </html>
    
    /*
    CSS for Will Portfolio site
    */
    
    html {
    margin:-10px;
    padding: 0px;
    height: 1000px;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
    }
    
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    }
    a {
      font-weight: light;
      color: black;
      text-decoration: none;
    }
    
    a:link {
      text-decoration: none;
    }
    
    a:visited {
      color: black;
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: none;
      color: #ec008c;
    }
    
    a: active {
      text-decoration: none;
      color: #ec008c;
    }
    
    li {
    list-style-type: none;
    }
    #bodycontent {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 25px;
    font-weight:normal;
    width: 1000px;
    clear: left;
    padding-top: 34px;
    }
    div#navigation {
    height: 30px;
    width: 400px;
    margin: 0 0 0 105;
    padding: 75px 0 0 20px;
    float: right;
    }
    div#navigation li{
    display: inline;
    float: right;
    margin: 0 5px 0 25px;
    width: 75px
    text-align; left;
    }
    div#header img{
    float:left;
    width: 300px;
    display: block;
    }
    h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight:bold;
    padding: 18px;
    }
    div#container {
    margin: 0px auto;
    width: 1000px;
    }
    div#links li{
    margin: 0 0 0 -23px;
    }
    a img {
    border-style: none;
    display: block;
    }
    div#contactheader {
    float:left;
    }
    div#contact {
    padding: 30px 0 0 210px;
    }
    .blackfont {
    font-size: 18px;
    font-weight:bold;
    }
    .pinkfont {
    font-size: 18px;
    font-weight:bold;
    color: #ec008c;
    }
    .pink {
    color: #ec008c;
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pillsbury View Post
    hi,

    i was wondering if there was a way to do this with css so that the user will know what page they're on. i tried doing it in html with class selectors and inline styles, but it's not working.

    for example, on my nav bar, i have three pages. 'about', 'contact', and 'portfolio'. the text colors are black by default, but change to pink when you hover over them. i would like the pink color to stay when you're on that page. so 'contact' would stay pink after you click on the page. however, the text link colors don't seem to be changing. any ideas? (snipped a bit of the top part since i can't include links.)

    Code:
    	<div id="navigation">
    		<ul>
    			<li><a href="about***">about</a></li>
    			<li><a href="portfolio***">portfolio</a></li
    			<li><a href="contact***">contact</a></li>
    		</ul>
    	</div><!--end of navigation div-->
    	<div id="bodycontent">
    	<div id="contactheader">
    	<h2>CONTACT</h2>
    	</div>
    	<div id="contact">
    	<img src="imagescontact.png">
    	</div>
    	<ul id="contact">
    		<li class="blackfont">WANT</li>
    		<li class="pinkfont">PURE?</li>
    	</ul
    	<p class="pinkfont">CONTACT9999PURCOM</p>
    
    	  </body>
          </div>
    
    	 </html>
    
    /*
    CSS for Will Portfolio site
    */
    
    html {
    margin:-10px;
    padding: 0px;
    height: 1000px;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
    }
    
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    }
    a {
      font-weight: light;
      color: black;
      text-decoration: none;
    }
    
    a:link {
      text-decoration: none;
    }
    
    a:visited {
      color: black;
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: none;
      color: #ec008c;
    }
    
    a: active {
      text-decoration: none;
      color: #ec008c;
    }
    
    li {
    list-style-type: none;
    }
    #bodycontent {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 25px;
    font-weight:normal;
    width: 1000px;
    clear: left;
    padding-top: 34px;
    }
    div#navigation {
    height: 30px;
    width: 400px;
    margin: 0 0 0 105;
    padding: 75px 0 0 20px;
    float: right;
    }
    div#navigation li{
    display: inline;
    float: right;
    margin: 0 5px 0 25px;
    width: 75px
    text-align; left;
    }
    div#header img{
    float:left;
    width: 300px;
    display: block;
    }
    h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight:bold;
    padding: 18px;
    }
    div#container {
    margin: 0px auto;
    width: 1000px;
    }
    div#links li{
    margin: 0 0 0 -23px;
    }
    a img {
    border-style: none;
    display: block;
    }
    div#contactheader {
    float:left;
    }
    div#contact {
    padding: 30px 0 0 210px;
    }
    .blackfont {
    font-size: 18px;
    font-weight:bold;
    }
    .pinkfont {
    font-size: 18px;
    font-weight:bold;
    color: #ec008c;
    }
    .pink {
    color: #ec008c;
    }
    correct me if im wrong but i don't think this can be done with css and html. It will require another language(like php). Using php you can check what page the user requested, and if the link is in the navigation apply an extra style/class/id to it.

    Heres a link i found online: alistapart

  3. #3
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure if this is what you are looking for, but what I do is in the navigation list label the link of the page that is active with id="current", and then in my css, I style #current to make the link or tab or button for the current page have the look that I want. It works well for me.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WebMachine View Post
    I'm not sure if this is what you are looking for, but what I do is in the navigation list label the link of the page that is active with id="current", and then in my css, I style #current to make the link or tab or button for the current page have the look that I want. It works well for me.
    That works fine for smaller sites, but as soon as you start to create a more dynamic site with lots of pages, it can become a pain to update all of them manualy.

  5. #5
    SitePoint Member
    Join Date
    Jan 2009
    Location
    Scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is what i use to show links as active

    PHP Code:
    <?php $page basename($_SERVER['SCRIPT_NAME']); ?>



    <a<? if($page == 'PAGE 1 URL HERE') print ' style="text-decoration:underline;"'?>  href="PAGE 1 URL HERE">Home</a>  ||

    a<? if($page == 'PAGE 2 URL HERE') print ' style="text-decoration:underline;"'?>  href="PAGE 2URL HERE">page 2</a>
    Of course instead of using the underline you could use a background image or any css stuff you like

  6. #6
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WebMachine View Post
    I'm not sure if this is what you are looking for, but what I do is in the navigation list label the link of the page that is active with id="current", and then in my css, I style #current to make the link or tab or button for the current page have the look that I want. It works well for me.
    thank you all for the replies! i tried doing it this way...i'm not making a crazy site with a lot of pages, although if someone took the time to show me how to implement the php into my code, i'd appreciate it also!

    however, i just tried doing it the simple way and its still not working. i feel like i'm doing it wrong with my class selectors.

    Code:
    /*
    CSS for Tim Portfolio site
    */
    
    
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    }
    a {
      font-weight: bold;
      color: black;
      text-decoration: none;
    }
    
    a:link {
      color: black;
      text-decoration: none;
    }
    
    a:visited {
      color: black;
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: none;
      color: #962f34;
    }
    
    a: active {
      color: aqua;
      background-color: navy;
    }
    
    li {
    list-style-type: none;
    }
    #bodycontent {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight:normal;
    width: 200px;
    clear: left;
    padding-top: 34px;
    }
    div#navigation {
    height: 30px;
    width: 100&#37;;
    margin: 0 0 0 105px;
    padding: 0 0 0 20px;
    font-size: 20px;
    line-height: 23px;
    0;}
    div#navigation ul{
    white-space: nowrap;
    margin: 5px 0 0 0;
    }
    div#navigation li{
    margin: 5px 0 0 0;
    clear: right;
    }
    div#header img{
    float:left;
    width:300px;
    }
    h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight:bold;
    }
    div#contact {
    clear: both;
    width: 500px;
    font-size: 20px;
    margin: 120px 0 0 50px;
    }
    div#aboutcontent{
    clear: both;
    width: 500px;
    font-size: 20px;
    margin: 120px 0 0 50px;
    }
    .current {
    font-color: #962f34;
    color: #962f34;
    }
    a.current:link {
    color: #962f34;
    }
    
    	<head>
    	  <title>about me</title>
    	  <meta http-equiv="Content-Type"
    	  	content="text/html; charset=utf-8"/>
    	  	<link href="style1.css" rel="stylesheet" type="text/css" />
    	 </head>
    
    	<body>
    	<div id="header">
    		<img src="image****">
    		</div>
    		<div id="navigation">
    			<ul>
    				<li><a href="index****">Home</a></li>
    				<li class="current"><a href="contact****">Contact</a></li>
    				<li><a href="about***">About</a></li>
    				<li><a href="resume***">Resumepdf</a></li>
    			</ul>
    	</div><!--end of navigation div-->
    	<div id="contact">
    	     <p>You can reach me by phone or email me.
    		</p>
    	      </div>
    	  </body>
    
    
    	 </html>

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only thing you were really doing wrong was assigning it to the li instead of the link. It doesn't necessarily matter but i also used an id instead of a class in the example because you are probably only using it once so it shouldn't matter. Anyway here is working code.

    HTML Code:
    	<head>
    	  <title>about me</title>
    	  <meta http-equiv="Content-Type"
    	  	content="text/html; charset=utf-8"/>
    		<style type="text/css">
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    }
    a {
      font-weight: bold;
      color: black;
      text-decoration: none;
    }
    
    a:link {
      color: black;
      text-decoration: none;
    }
    
    a:visited {
      color: black;
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: none;
      color: #962f34;
    }
    
    a: active {
      color: aqua;
      background-color: navy;
    }
    
    li {
    list-style-type: none;
    }
    #bodycontent {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight:normal;
    width: 200px;
    clear: left;
    padding-top: 34px;
    }
    div#navigation {
    height: 30px;
    width: 100%;
    margin: 0 0 0 105px;
    padding: 0 0 0 20px;
    font-size: 20px;
    line-height: 23px;
    0;}
    div#navigation ul{
    white-space: nowrap;
    margin: 5px 0 0 0;
    }
    div#navigation li{
    margin: 5px 0 0 0;
    clear: right;
    }
    div#header img{
    float:left;
    width:300px;
    }
    h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight:bold;
    }
    div#contact {
    clear: both;
    width: 500px;
    font-size: 20px;
    margin: 120px 0 0 50px;
    }
    div#aboutcontent{
    clear: both;
    width: 500px;
    font-size: 20px;
    margin: 120px 0 0 50px;
    }
    #current {
    color: #962f34;
    }
    </style>
    	 </head>
    
    	<body>
    	<div id="header">
    		<img src="image****">
    		</div>
    		<div id="navigation">
    			<ul>
    				<li><a href="index****">Home</a></li>
    				<li><a href="contact****" id="current">Contact</a></li>
    				<li><a href="about***">About</a></li>
    				<li><a href="resume***">Resumepdf</a></li>
    			</ul>
    	</div><!--end of navigation div-->
    	<div id="contact">
    	     <p>You can reach me by phone or email me.
    		</p>
    	      </

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pillsbury View Post
    ...
    i was wondering if there was a way to do this with css so that the user will know what page they're on. i tried doing it in html with class selectors and inline styles, but it's not working.
    ...
    In your later post you are on the right track.

    You add a class to the current page list-item and by that you can style both the li and the link if you wish:
    Code:
    #navigation .current a {
    	color: #962f34;
    }
    
    <li class="current"><a href="contact.html">Contact</a></li>
    Another more maintainable way if your site grows, is to add an id (or class) to the body-tag and style current page link using that in a similar way. This way you can have exactly the same nav-list on all pages and you can later style whatever you want different in those pages. I id all pages body (or main container) in my sites:
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>about me</title>
    <style type="text/css">
    /*
    CSS for Tim Portfolio site
    */
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    }
    a {
    	font-weight: bold;
    	color: black;
    	text-decoration: none;
    }
    a:link {
    	color: black;
    	text-decoration: none;
    }
    a:visited {
    	color: black;
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: none;
    	color: #962f34;
    }
    a: active {
    	color: aqua;
    	background-color: navy;
    }
    li {
    	list-style-type: none;
    }
    #bodycontent {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 20px;
    	font-weight: normal;
    	width: 200px;
    	clear: left;
    	padding-top: 34px;
    }
    div#navigation {
    	height: 30px;
    	width: 100%;
    	margin: 0 0 0 105px;
    	padding: 0 0 0 20px;
    	font-size: 20px;
    	line-height: 23px;
    	0;
    }
    div#navigation ul {
    	white-space: nowrap;
    	margin: 5px 0 0 0;
    }
    div#navigation li {
    	margin: 5px 0 0 0;
    	clear: right;
    }
    div#header img {
    	float: left;
    	width: 300px;
    }
    h2 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 25px;
    	font-weight: bold;
    }
    div#contact {
    	clear: both;
    	width: 500px;
    	font-size: 20px;
    	margin: 120px 0 0 50px;
    }
    div#aboutcontent {
    	clear: both;
    	width: 500px;
    	font-size: 20px;
    	margin: 120px 0 0 50px;
    }
    #homepage .home a:link,
    #contactpage .contact a:link,
    #aboutpage .about a:link,
    #resumepage .resume a:link {
    	color: #962f34;
    }
    </style></head>
     
    <body id="contactpage">
     
    <div id="header">
    	<img src="image****">
    </div>
    <div id="navigation">
    	<ul>
    		<li class="home"><a href="index****">Home</a></li>
    		<li class="contact"><a href="contact****">Contact</a></li>
    		<li class="about"><a href="about***">About</a></li>
    		<li class="resume"><a href="resume***">Resumepdf</a></li>
    	</ul>
    </div><!--end of navigation div-->
    <div id="contact">
    	<p>You can reach me by phone or email me.
    </p>
    	</div>
     
    </body></html>
    Happy ADD/ADHD with Asperger's

  9. #9
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An example of another thing you can do with the current link, is to avoid that the visitor hovers and clicks the current link reloading the page. Usually people never click if the hover cursor is not telling the link is clickable.

    #navigation .current a {
    color: #962f34;
    cursor: default;
    }

    Code:
    #homepage .home a:link,
    #contactpage .contact a:link,
    #aboutpage .about a:link,
    #resumepage .resume a:link {
        color: #962f34;
        cursor: default;
    }
    Happy ADD/ADHD with Asperger's

  10. #10
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow! this is awesome, it works! i guess i need to practice and get better at this. it's pretty exciting tho since i'm learning something every day.

    i just want to say thank you guys for all of your help and your patience!

  11. #11
    SitePoint Member liam_tmt7's Avatar
    Join Date
    Jan 2008
    Location
    Scotland
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for that tip erik.j

    Its something I will certainly be making a note of!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •