Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS navigation tabs

    What I want to do here is have one of the navigation tabs basically be different than the others based on the page that is showing. I have it working for a side menu (not tabs) but I think this one doesn't work due to the properties being set already for the same item (basically two different styles on the same item and one must be over riding the other)

    Basically what I'm trying to accomplish is the same as what's shown on trick number 10 on this page http://www.sitepoint.com/article/top-ten-css-tricks

    Ok so what i have for my style sheet so far is:
    Code:
    #menu2 {
      display:table;
      padding:0; 
      margin:0 auto; 
      list-style-type:none;
      white-space:nowrap;
      }
    #menu2 li {
      display:table-cell;
      }
    * html #menu2 li {
      float:left;
      }
    #menu2 a {
      width:auto;
      display:block;
      padding:2px 10px;
      color:#fff; 
      background:#08c; 
      border:1px solid #fff; 
      text-decoration:none;
      }
    * html #menu2 a {
      float:left;
      }
    #menu2 a:hover {
      color:#000; 
      background:#E5E5E5;
      }
    
    .container {clear:both; text-decoration:none;}
    * html .container {display:inline-block;}
    	
    A.newmenu {
    	text-decoration: none;
    	color: black;
    	display: block;
    	font-family: Arial;
    	font-weight: bold;
    	font-size: 8pt;
    	text-indent: 8px;
    	}
    	
    A.newmenu:hover {
    	background-color: #FFFFFF;
    	color: blue;
    	}
    
    B.topleftnav {
    	background-color: #E5E5E5;
    	font-family: Arial;
    	font-weight: bold;
    	font-size: 9pt;
    	display: block;
    	
    	}
    	
    #home .home, #gethelp .gethelp, #forum .forum, #contact .contact, #techshop .techshop
    {
    color: blue;
    }
    and my side menu WORKS using this html:

    Code:
    <b class="topleftnav home">Home</b>
    		<a class="newmenu" href="#nogo">Home Page</a>
    		<b class="topleftnav gethelp">Get Help</b>
    		<a class="newmenu" href="#nogo">Software</a>
    		<a class="newmenu" href="#nogo">How to's</a>
    		<a class="newmenu" href="#nogo">Online Support</a>
    		<b class="topleftnav forum">Forum</b>
    		<a class="newmenu" href="#nogo">Register</a>
    		<a class="newmenu" href="#nogo">View</a>
    		<b class="topleftnav contact">Contact</b>
    		<a class="newmenu" href="#nogo">About</a>
    		<a class="newmenu" href="#nogo">Feedback</a>
    		<b class="topleftnav techshops">Tech Shops</b>
    		<a class="newmenu" href="#nogo">Search</a>
    		<a class="newmenu" href="#nogo">Show All</a>
    		<a class="newmenu" href="#nogo">Top Rated</a>
    		<a class="newmenu" href="#nogo">Most Popular</a>
    This is the html that I am having the problems with:

    Code:
    <del class="container">
    				</font>
    <ul id="menu2">
    <li class="home"><a href="#nogo">Home</a></li>
    <li class="gethelp"><a href="#nogo">Get Help</a></li>
    <li class="forum"><a href="#nogo">Forum</a></li>
    <li class="contact"><a href="#nogo">Contact Us</a></li>
    <li class="techshop"><a href="#nogo">Tech Shops</a></li>
    </ul>
    	
    </del>
    So if someone can get what happening in my side menu to work with the tabs on the top of my page, it would be great. Hope it was not too confusing. Thanks in advance.

    I also have the body tag currently like this
    Code:
    <body id="home">

  • #2
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To change the color of the link you have to select the link. So instead of this:

    #home .home, #gethelp .gethelp, #forum .forum, #contact .contact, #techshop .techshop {
    color: blue;
    }

    Try this:

    #home .home a, #gethelp .gethelp a, #forum .forum a, #contact .contact a, #techshop .techshop a {
    color: blue;
    }

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Structure, specificity

    Although I'm not quite getting what problems you run into, it seems like you're wrestling with the specificity of the style rules for both your menus; also, there seems to be an overlap between both that puzzles me slightly, but never mind that.

    If you want to be able to address the elements within each menu with sufficient specificity you can make use of an id on the container that holds each menu: for the "menu2" one you've already got this covered; for the first menu, there doesn't yet seem to be such a container.

    To achieve this you could restructure this menu--which is quite poorly structured as it is--using unordered lists like you did with the first one; the list(s) automatically function(s) as container(s) and ids provide the necessary style "hooks".

    A general selector for an item in the second menu would be "#menu2 li" or something--to address all list elements in the menu--and "#menu2 li.gethelp" to specifically address the gethelp li; "#gethelp #menu2 li.gethelp" would single out the gethelp li provided the body id "gethelp" is set, etc, etc.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Span that worked great!
    and i'll take your comments into consideration as well Ronald


  •  

    Posting Permissions

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