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

Thread: two navs

  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts

    two navs

    I'm trying to style two different navs but hav never had to do this before
    how do would I go about donig this? oh little shout out to w3schools I just modified their fully styled horizontal nav.

    top nav
    Code:
    CSS
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    li
    {
    float:left;
    }
    a:link,a:visited
    {
    display:block;
    width:75px;
    color:#333;
    font-family:tahoma;
    font-size:11px;
    background-color:#fff;
    text-align:center;
    padding:4px;
    text-decoration:none;
    }
    a:hover,a:active
    {
    background-color:#E8E8E8;
    }
    
    HTML
    
    <ul>
    <li><a href="#home">Link</a></li>
    <li><a href="#news">link</a></li>
    <li><a href="#contact">Link</a></li>
    <li><a href="#about">Link</a></li>
    </ul>
    2nd nav

    Code:
    CSS
    
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    }
    
    a:link {color:#333333;  text-decoration:none}    
    a:visited {color:#333333; text-decoration:none} 
    a:hover {color:#333333; text-decoration:underline}   
    a:active {color:#333333; text-decoration:none}  
    
    li.grey {
    	background-color:#E8E8E8;
    	color: white;
    }
    
    
    html
    
    <ul>
                  <li class="grey"><a href="#">About</a></li>
                  <li><a href="#">Archives</a></li>
                  <li class="grey"><a href="#">Tutorials</a></li>
                  <li><a href="#">Templates</a></li>
                  <li class="grey"><a href="#">Freebies</a></li>
                  <li><a href="#">Resources</a></li>
                </ul>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Give each nav a different id (or class) and then make your styling specific to that id in your css.

    eg:
    Code:
    html
    
    <ul id="nav1"> etc </ul>
    <ul id="nav2"> etc </ul>
    
    css
    
    ul#nav1 {color:red;font-size:3em etc}
    ul#nav2{color:blue;font-size:2em etc}

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts
    nevermind I figured it out..
    for anyone who might have the same question if you have two navs and want them styled differently add a class what I did was on the first horizontal nav I put

    Code:
    #nav ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    
    #nav li
    {
    float:left;
    }
    
    #nav ul li a:link,a:visited
    {
    display:block;
    width:75px;
    color:#333;
    font-family:tahoma;
    font-size:11px;
    background-color:#fff;
    text-align:center;
    padding:4px;
    text-decoration:none;
    }
    
    #nav ul li a:hover,a:active
    {
    background-color:#E8E8E8;
    }
    and I left the other one the same
    I just experimented a little and it worked so thats how I'm gonna code it

  • #4
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts
    thank you I figured that out it only makes sense I was typing my reply while you were answering my question


  •  

    Posting Permissions

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