50 users online (0 members and 50 guests)  


  Results 1 to 1 of 1

Related

  1. Navigation bar problems    Forum: CSS Forum
    Replies: 2
  2. Navigation    Forum: HTML Forum
    Replies: 5
  3. Navigation    Forum: HTML Forum
    Replies: 1
  4. navigation    Forum: HTML Forum
    Replies: 7
  1. #1
    catlover30's Avatar
    New User

    Status
    Offline
    Join Date
    May 2007
    Posts
    1

    Navigation bar using DIV and CSS

    I am creating a nav bar, using UL and LI tags. I will have 5 links for now, and I want them to act as roll-over buttons. I am used to creating with tables, and inserting images for links, but now I need to use DIV tags and CSS for this. My design is simple: top header, below that 2 columns where on left side is the nav bar and right side is content. Initially, I want the link button to have gray background color (width is 180px, heoght is 40px). Then when user hovers, I want bg to change to purple. When click and get to that link, it should stay purple, but if click on other link, should get back to gray bg. Any help with code and CSS is appreciated!
    I also am trying to get a border around the navigation and content part only, excluding the header part.

    Here is the HTML:

    Code:
    <div id= "navbar">
    <ul>
    <li>
    <a href="...">TEST1</a>
    </li>
    <li>
    <a href="...">TEST2</a>
    </li>
    <li>
    <a href="...">TEST3</a>
    </li>
    <li>
    <a href="...">TEST4</a>
    </li>
    </ul>
    </div>
    </div>
    <div id="content"> <h4>My Content</h4>
    <a href="...">TESTING CONTENT LINK</a>
    </div>
    </body>
    And here is the CSS I have so far:

    Code:
    #navbar {
      position: relative;
      width:20%;
      height:100%;
      z-index: 100; 
      float:left;
      padding-top: 0px; 
      margin-top: -3px; 
      border-top: none;
      background-color:#ccc;
      font-family: verdana,arial,sans-serif;
      font-weight:bold;
    }
     
    #navbar a{
      display: block; 
      text-decoration: none;
      width: 180px; 
      height: 40px;
      background-color:#ccc;
    }
     
    #navbar ul li a:hover {
      border: none;
      border-top: 1px solid white;
      background-color:#AB4500;
    }
     
    #navbar li {
      background-image: none; 
      padding: 0px;
    }
    
    #navbar ul {
      list-style-type: none;
      padding:0;
      text-indent: 20px;
      display: block;
      border : 1px solid;
      border-width : 0 1px;
      text-decoration: none;
      background-color:#ccc
     
    #navbar ul li {
      float : left;
      border : 1px solid;
      position : relative;
      list-style-type: none;
      background-image: none; 
      padding: 0px; 
      background-color:#ccc;
    }
    
    #content {
      float:right;
      background-color:#ddd;
      width:70%;
      height:100%;
    }
    
    #content a {
      color: #AB4500; 
      padding-left: 0px; 
      text-decoration:none;
    }
     
    #content a:hover {
      text-decoration: underline; 
      background-color: transparent; 
      color: #AB4500; 
      padding-left: 0px;
    }
    I think I am repeating myself too much in the CSS tags?
    Thanks
    Last edited by vinyl-junkie; 05-21-2007 at 03:08 PM. Reason: Added code tags & cleaned up the display



Tags for this Thread