[thelist] A 100% horizontal navigation bar

[Kowalkowski, Lee (ASPIRE)]

> -----Original Message-----
> From: Kristina Floyd [mailto:email at kristinafloyd.co.uk]
> Sent: Monday, September 05, 2005 9:27 AM
> 
> I'm trying to find an example of a horizontal nav bar that 
> expands and 
> detracts according to its width (there is no start width 
> set).  And is 
> always 100% of the width, with the buttons filling up what 
> ever space is 
> available.
> 
> Currently there are 7 buttons, written in the HTML as a list and then 
> displayed with graphics and inline via the CSS.
> 
> To see an example that my colleague is working on please go to 
> <http://25.m-corp.com/>

    <style>
      ul
      {
        margin:0px;
        padding:0px;
      }
      li
      {
        display:inline;
      }
      .navButton
      {
        width:14.28%;
        float:left;
      }
      .lastNavButton, .navButton
      {
        border:1px solid white;
        background:blue;
        color:white;
        text-align:center;
      }
    </style>

    <ul>
      <li><div class="navButton">One</div></li>
      <li><div class="navButton">Two</div></li>
      <li><div class="navButton">Three</div></li>
      <li><div class="navButton">Four</div></li>
      <li><div class="navButton">Five</div></li>
      <li><div class="navButton">Six</div></li>
      <li><div class="lastNavButton">Seven</div></li>
    </ul>

If we gave every 'button' the same width it could be too short or wrap,
because of the rounding required to convert from percentage to pixels.  

In my example, I have specified a width and float:left (in favour of
display:inline) on all the divs except the last. The last one has an
unspecified width, so it occupies the remainder of the space.

- LK


===========================================================
Our e-mail domain has now changed from iraspire.com to hmrcaspire.com. Please update your address books.
===========================================================