0 Replies Latest reply on Oct 8, 2006 7:22 PM by davidhelp

    Lists - Inline Navigation Bar

    davidhelp Level 1
      I am trying to create an inline horizontal navigation bar
      I would like 2 or 3 rows stretching 600px to 800px depending on the number of links

      I have created tables in the past and each link highlights as the curser passes over it but not the whole cell
      The css list would highlight the whole cell but the problem is as I add a 2nd row it will either have a space between the 1st row and the 2nd row or will become part of the same line. This happens if I add width and go from 700px down to 600px and viewed in Firefox 1.5.
      IE 6 shows the both rows together.

      If I add a border it will double up where they meet in both browsers
      The other problem is the background width is wider then the 'cell' where the links are

      I started with the code found here
      http://css.maxdesign.com.au/listamatic/horizontal03.htm
      ----------------------------------------------

      My code
      <title>Test Menu</title>
      <style type="text/css">
      <!--
      #navcontainer ul
      {
      padding-left: 0;
      margin-left: 0;
      background-color: #0099FF;
      color: #000000;
      float: left;
      width: 500px;
      font-family: arial, helvetica, sans-serif;
      }

      #navcontainer ul li { display: inline; }

      #navcontainer ul li a
      {
      background-color: #0066CC;
      color: #FFFFFF;
      text-decoration: none;
      float: left;
      padding-left: 5px;
      padding-right: 5px;
      padding-bottom: 5px;
      padding-top: 5px;
      border: 2px solid #000000;
      }

      #navcontainer ul li a:hover
      {
      background-color: #FFFFCC;
      color: #000000;
      }
      -->
      </style>
      </head>

      <body>
      <div id="navcontainer">
      <ul id="navlist">
      <li id="active"><a href=" http://www.yahoo.com" id="current">First row......... </a></li>
      <li><a href="#">Item two</a></li>
      <li><a href="#">Item three</a></li>
      <li><a href="#">Item four</a></li>
      <li><a href="#">Item five</a></li>
      </ul>
      </div>
      <div id="navcontainer">
      <ul id="navlist">
      <li id="active"><a href="#" id="current">Second row....... </a></li>
      <li><a href="#">Item two</a></li>
      <li><a href="#">Item three</a></li>
      <li><a href="#">Item four</a></li>
      <li><a href="#">Item five</a></li>
      </ul>
      </div>

      </body>