Menu using CSS and HTML

Question

I am very picky and want to create a menu that goes through a page with spaces and divs (well, I have navs and spans since I try to use html5, but this is not necessary, so I simplified my question!), That it comes down to which is basically it.

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 had a table that displayed beautifully, but tried to write my code. Any advice? :)

Thank you very much in advance!

Bean

Answer 1

What I ended up with was basically a combination of several of them, but the actual answer I received was basically to set all the borders / fields / additions of what used to be my span tag, to 0, and then use my anchor tags as block elements to add borders / fields, etc. We hope that it will work in all browsers and is a neat solution.

Thank you all for your help - we could not have received it 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; }​ 

Answer 2

I think you want what I defined in this jsFiddle

The real magic sauce is in overflow: hidden in the parent divb and removing indentation and margins if you are going to make an exact width of 33.3%. Of course, if you want to have a residence permit and a margin, you will have to adjust the width of the spans.

Answer 3

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 does not affect boundaries. If you need boundaries, you will need to play with interest so that everything works. Just remember that borders are counted in width and height. Check out Box Model

Answer 4

your widths do this so that they are 1/3 of the width of the div menu. This would fill the div almost completely (minus 0.01%), but the 5px fields on each side of the spans then move them sideways and knock the last span to the next line. I would advise you to make your interest on interest and tinker with it and the width so that it is easier to make the entire width of the three 100%.

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

(I can disconnect with numbers there)

Answer 5

If you feel a little adventurous, use the box-sizing: border-box property so that you don’t have to worry too much about your width when it comes to calculating borders and margins (the margins are still out ).

As others noted, you, however, break out because you have more than 100% width: (33.33% width + 5px left edge + 5px right edge + 1px border-left + 1px border-right) * 3 = too much.

I installed a small script for you based on your source code: http://jsfiddle.net/HkF2d/1/ (a small cleaning element for your floats has also been added).

Cheers, from