Menu using CSS and HTML

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

ar3 · Accepted Answer · 2012-02-24 17:28:22Z

2

I think you want what I have defined in this jsFiddle

The real magic sauce is in the overflow: hidden on the parent divb and the removal of padding and margin if you are going to do an exact 33.3% width. Of course if you want to have some padding and margin, you will have to adjust the width of the spans.

answered Feb 24, 2012 at 17:28

ar3

4,1213 gold badges23 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Durrant Over a year ago

I also liked this. I'll give it a +1 however note that In Opera (so potentially others) I get s small light-blue 'bit' on the far right side (inside the blue border). 6-10 pixels maybe? Looks ok in firefox though.

ar3 Over a year ago

Yeah...33.3% is not going to add up to that 100% perfectly...I would actually suggest using actual pixels instead of percentages, unless the use case calls for a fluid design. That way you have a little more control over the borders, padding and margins.

FrostbiteXIII Over a year ago

Thanks very much - the overflow:hidden fixes the overflow issue perfectly. But I am more worried about my menu bottons all fitting. I want them to have borders and look nice, and dont want to limit the page to a certain number of pixels... +1!

shaunsantacruz · Accepted Answer · 2012-02-24 18:12:41Z

2

One approach is to use the following basic html structure: Fiddle

<ul class="menu">
    <li><a href="#">Uno</a></li>
    <li><a href="#">Dos</a></li>
    <li><a href="#">Tres</a></li>
</ul>

CSS:

.menu {
    background-color: #ddd;
    width: 100%;
    float: left;
}
.menu li {
    width: 33.3%;
    float: left;
    display: inline;
}
.menu li:last-child {
    width: 33.4%; /* 100% width, not 99.9 */
}
.menu li a {
    float: left;
    display: block;
    width: 100%;
}
.menu li a:hover {
    color: red;
}

This example doesn't factor in borders. If you want borders, you'll need to play with the percentages, to make everything work. Just remember that borders are factored into the width and height. Check out the Box Model

edited Feb 24, 2012 at 18:12

answered Feb 24, 2012 at 17:34

shaunsantacruz

8,9503 gold badges22 silver badges19 bronze badges

4 Comments

Michael Durrant Over a year ago

I liked this... but no blue margin (see ar3)

shaunsantacruz Over a year ago

I mentioned the box model, but I'll leave the adding of borders as an exercise for the user.

FrostbiteXIII Over a year ago

Thanks for the reply - quite like the idea of using the ul/li structure rather than my spans, but borders is exactly what my problem is, so you haven't answered my question (checked and adding borders throws it out in the same way)...

FrostbiteXIII Over a year ago

Thanks again, really liked your use of ul/lis and setting your a tag to be block level was what gave me the idea. I dont think this is what you eant as you still mention setting up percentages for borders etc, so cant give you the answer, but certainly worth a +1 for your help. Thanks!

sparrow · Accepted Answer · 2012-02-24 17:24:31Z

1

your widths make it so that they're each 1/3rd of the width of the menu div. This would fill the div nearly completely (minus 0.01%) but the margins of 5px on each side of the spans then moves them sideways and knocks the last span onto the next line. I'd suggest making your margins percentages and messing with that and the widths to make it easier to make the entire width of the three around 100%.

eg. span{ margin: 5px 0.5%; width: 31.33%; }

(I may be off with the numbers there)

answered Feb 24, 2012 at 17:24

sparrow

1772 silver badges9 bronze badges

3 Comments

isotrope Over a year ago

Don't forget to factor in the borders in your calculations. That's another 2px to add. :)

sparrow Over a year ago

ah, missed that. I was wondering why when I tried that margin with a width of 32.33% it wasn't working in the fiddle I made. Always forget about the asterisk in CSS.

FrostbiteXIII Over a year ago

Thanks sparrow - TBH I kinda cheat with my widths and calculate them in my aspx, and just use a nasty width tag. I had assumed that it was taking the page to be 100%, which is why it was knocking them over the edge. Good to know that it is my margins/padding, but ideally I would want a precise solution... Ill have a think - many thanks. :) +1

isotrope · Accepted Answer · 2012-02-24 17:54:49Z

1

If you're feeling a bit adventurous, use the box-sizing: border-box property so that you don't have to worry too much about your widths when it comes to calculating borders and padding (margins are still outside the calculation).

As others have pointed out, though, you're busting out because you're ending up with more 100% width: ( 33.33% width + 5px left-margin + 5px right-margin + 1px border-left + 1px border-right) * 3 = too much.

I've set up a little fiddle for you based on your original code: http://jsfiddle.net/HkF2d/1/ (also added little clearing element for your floats).

Cheers, iso

answered Feb 24, 2012 at 17:54

isotrope

1,84712 silver badges10 bronze badges

2 Comments

isotrope Over a year ago

BTW, if you want to read a bit more about box-sizing (and how you have to calculate widths the old way) -> css-tricks.com/box-sizing

FrostbiteXIII Over a year ago

Thanks - that does EXACTLY what I want it to. My only worry is browser support? Will have a play and read into it more - many thanks though! +1

Mutation Person · Accepted Answer · 2012-04-25 11:17:02Z

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! :D

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;
}

Collectives™ on Stack Overflow

Menu using CSS and HTML

5 Answers 5

3 Comments

4 Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

4 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related