SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Body Id for active nav states

    I am trying to create a navigation completely in css but I don't know if it can be done. Each navigation link is to have a different color for the link, visited, and hover states. I have it working beautifully in both Firefox and IE. The hitch comes with the active state... I don't know how to make it work within my css code. My intentions were to control the active state, as well as page hyperlinks, by using the body id tag. One point of interest may be that the navigation will be held in an include. Thanks for looking.
    k|w

    CSS
    Code:
    #navcontainer {width: 600px;}
    
    #navlist {
    	margin: 0;
    	padding: 0;
    }
    
    #navlist ul, #navlist li {
    	margin: 0;
    	padding: 0;
    	display: inline;
    	list-style-type: none;
    }
    
    #navlist a {
    	float: left;
    	margin: 0 0 4px 5px;
    	width: 85px;
    	text-align: center;
    	font: bold 12px arial narrow, sans-serif;
    	letter-spacing: 1px;
    	line-height: 14px;
    	text-decoration: none;
    }
    
    #navlist a:link#ins, #navlist a:visited#ins {color: #bbb9ba; border-top: 8px solid #f1eff0;}
    #navlist a:hover#ins, #navlist a:active#ins {color: #bbb9ba; border-top: 8px solid #bbb9ba;}
    
    #navlist a:link#mee, #navlist a:visited#mee {color: #9a2598; border-top: 8px solid #e9d1e9;}
    #navlist a:hover#mee, #navlist a:active#mee {color: #9a2598; border-top: 8px solid #9a2598;}
    
    #navlist a:link#vid, #navlist a:visited#vid {color: #f08c1c; border-top: 8px solid #fce6cf;}
    #navlist a:hover#vid, #navlist a:active#vid {color: #f08c1c; border-top: 8px solid #f08c1c;}
    
    #navlist a:link#int, #navlist a:visited#int {color: #d90841; border-top: 8px solid #f6cbd5;}
    #navlist a:hover#int, #navlist a:active#int {color: #d90841;border-top: 8px solid #d90841;}
    
    #navlist a:link#mul, #navlist a:visited#mul {color: #0878b7; border-top: 8px solid #B3D6EA;}
    #navlist a:hover#mul, #navlist a:active#mul {color: #0878b7; border-top: 8px solid #0878b7;}
    
    #navlist a:link#des, #navlist a:visited#des {color: #a2a510; border-top: 8px solid #e8e8c3;}
    #navlist a:hover#des, #navlist a:active#des {color: #a2a510;border-top: 8px solid #a2a510;}
    
    body#ins a.ins-inside {color:#bbb9ba;text-decoration:none}
    body#ins a:hover.ins-inside {color: #f1eff0;text-decoration: underline;}
    
    div.clear {clear: both;}
    HTML
    Code:
    <body id="ins">
    <div id="navcontainer">
    <ul id="navlist">
    <li><a href="#" id="ins">LINK 1</a></li>
    <li><a href="#" id="mee">LINK 2</a></li>
    <li><a href="#" id="vid">LINK 3</a></li>
    <li><a href="#" id="int">LINK 4</a></li>
    <li><a href="#" id="mul">LINK 5</a></li>
    <li><a href="#" id="des">LINK 6</a></li>
    </ul>
    </div>
    <div class="clear"/>
    <p><a href="#" class="ins-inside">Links</a></p>
    </body>

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've got the CSS selectors wrong. It should be
    Code:
    #ins #navlist a:link
    etc.

    This selector targets an unvisited anchor element within an element with id="navlist" within an element with id="ins".
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response!

    Hmmm... that made all the links follow the #ins colors (gray).

    It should look like this http://66.243.178.58/navigation.html but with the dark gray bar active-- since the page is the "ins"" page. Each link will have it's own color structure for all states.

    k|w

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I have a demonstration of nav highlighting via body id here.

    http://www.pmob.co.uk/temp/nav-body3.htm

    In tyour example you have used the id #ins twice which is not allowed and is a bit confusing.

    Code:
    <body id="ins">
    <div id="navcontainer">
    <ul id="navlist">
    <li><a href="#" id="ins">INSIDE QS</a></li>
    <li><a href="#" id="mee">MEETINGS</a></li>
    <li><a href="#" id="vid">VIDEO</a></li>
    <li><a href="#" id="int">INTERNET</a></li>
    <li><a href="#" id="mul">MULTIMEDIA</a></li>
    <li><a href="#" id="des">DESIGN</a></li>
    </ul>
    Your page seems to be doing what you are telling it even with the invalid code. You mention active state but I assume you know that the active state is only that instatnt that you click down with the mouse on the link. As soon as you release the mouse button the active state is gone.

  5. #5
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are *so* right. I am using the wrong term. I am meaning to say: use CSS to set the current state. I finally found the article that I was referencing in my shadowy memory: http://www.456bereastreet.com/archiv...tate_with_css/

    So I revised my code based on what you gave me. (A big duh to the multiple IDs- I am so out of practice). But I must be missing something for getting the current state to show. Is it because it is a link?

    Thanks,
    k|w

    CSS
    Code:
    #navcontainer {width: 600px;}
    
    #nav {
    	margin: 0;
    	padding: 0;
    	text-align: center;
    	font: bold 12px arial narrow, sans-serif;
    	letter-spacing: 1px;
    	line-height: 14px;
    }
    
    #nav ul, #nav li {
    	margin: 0;
    	padding: 0;
    	display: inline;
    	list-style-type: none;
    }
    
    #nav a {
    	float: left;
    	margin: 0 0 4px 5px;
    	width: 85px;
    	text-decoration: none;
    }
    
    #nav li.one a:link, #nav li.one a:visited {color: #bbb9ba; border-top: 8px solid #f1eff0;}
    #nav li.one a:hover, #nav li.one a:active {color: #bbb9ba; border-top: 8px solid #bbb9ba;}
    
    #nav li.two a:link, #nav li.two a:visited {color: #9a2598; border-top: 8px solid #e9d1e9;}
    #nav li.two a:hover, #nav li.two a:active {color: #9a2598; border-top: 8px solid #9a2598;}
    
    #nav li.three a:link, #nav li.three a:visited {color: #f08c1c; border-top: 8px solid #fce6cf;}
    #nav li.three a:hover, #nav li.three a:active {color: #f08c1c; border-top: 8px solid #f08c1c;}
    
    #nav li.four a:link, #nav li.four a:visited {color: #d90841; border-top: 8px solid #f6cbd5;}
    #nav li.four a:hover, #nav li.four a:active {color: #d90841;border-top: 8px solid #d90841;}
    
    #nav li.five a:link, #nav li.five a:visited {color: #0878b7; border-top: 8px solid #B3D6EA;}
    #nav li.five a:hover, #nav li.five a:active {color: #0878b7; border-top: 8px solid #0878b7;}
    
    #nav li.six a:link, #nav li.six a:visited {color: #a2a510; border-top: 8px solid #e8e8c3;}
    #nav li.six a:hover, #nav li.six a:active {color: #a2a510;border-top: 8px solid #a2a510;}
     
    body.section1 #nav li.one {color: #bbb9ba; border-top: 8px solid #bbb9ba;}
    HTML
    Code:
    <body class="section1">
    <ul id="nav">
      <li class="one"><a href="#">one</a></li>
      <li class="two"><a href="#">two</a></li>
      <li class="three"><a href="#">three</a></li>
      <li class="four"><a href="#">four</a></li>
      <li class="five"><a href="#">five</a></li>
      <li class="six"><a href="#">six</a></li>
    </ul>

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Target the anchor not the list. (li.one a {})

    Code:
    body.section1 #nav li.one a {color: #bbb9ba; border-top: 8px solid #bbb9ba;}


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
  •