Question

I am very picky and want to create a menu going across the page with spans and divs (well, I have navs and spans as I am trying in html5, but it isn’t necessary so I have simplified my question!). What it boils down to is basically this.

I have this code:

< html>
  < head>
    < title>Test< /title>
    < style>
      body * { border: 1px solid black; background-color: #999999; }
      span { float:left; display: block; width: 33.33%; margin: 5px; }
      .page { margin: 10px; background-color: #0000ff; }
      .menu { margin: 5px; background-color: #00ffff; }
    < /style>
  < /head>
< body>
  < div class='page'>
    < div class='menu'>
      < span>one< /span>
      < span>two< /span>
      < span>three< /span>
    < /div>
  < /div>
< /body>
< /html>

And I want to make it so that my spans all fit inside the blue div. perfectly.

I used to have a table which displayed this perfectly, but trying to write my code neater. Any advice? 🙂

Many thanks in advance!

Bob

Answer 1

What I ended up with was basically a combination of a few of them, but the actual answer I was after was to basically set all the borders/margins/padding of what used to be my span tags to 0 then use my anchor tags as block elements to add borders/margins etc to. Hopefully will work in all browsers and is a neat solution.

Thanks to you all for your help – couldn’t have gotten to this without you! 😀

Real-World js fiddle

HTML:

  <nav>
    <ul>
      <li style='width: 33.3%;'><a href='default.aspx'>One</a></li>
      <li style='width: 33.3%;'><a href='page2.aspx'>Two</a></li>
      <li style='width: 33.3%;'><a href='page3.aspx'>Three</a></li>
    </ul>
  </nav>

CSS:

nav {
    display: block;
    background-color: #000000;
    border: solid 1px #ff0000;
    margin: 10px;
    padding: 5px;
    overflow: hidden;
}
nav>ul {
    width: 100%;
    float: left;
    margin: 0px;
    padding: 0px;
}
nav li {
    display: block;
    float: left;
    border-width: 0px;
    margin: 0px;
    padding: 0px;
}
nav a {
    display: block;
    border: solid 1px #ff0000;
    background-color: #ffffff;
    margin: 1px;
    padding: 3px;
    text-align: center;
}​