Menu
I need your help in a HTML/CSS issue: I'm creating a very simple web page in which there is a navigation bar composed of a "ul" containing five "li". The "ul" is 900px wide and it's inside a "div". Each "li" is 900/5 = 180px wide. Despite that, those elements create a new line.
This is what I expect (more or less):
This is what I obtain:
This is the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My First Website</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
</head>
<body>
<div id="container">
<div id="fascia">
<h1>My First Website</h1>
</div>
<hr class="menu">
<div id="nav">
<ul>
<li><a href="img/a.jpg">About</a></li>
<li><a href="img/b.jpg">Photo</a></li>
<li><a href="img/c.jpg">News</a></li>
<li><a href="img/d.jpg">Video</a></li>
<li><a href="img/e.jpg">Contacts</a></li>
</ul>
</div>
<hr class="menu">
</div>
</body>
</html>
This is my first CSS file (a reset standard CSS file):
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
This is my real CSS file:
@charset "utf-8";
/* CSS Document */
body
{
background-color:#363636;
background-image:url(../img/noise.png);
height:100%;
width:100%;
margin:0;
padding:0;
}
#container
{
position:relative;
width:1000px;
height:700px;
margin:0 auto;
}
#fascia
{
width:950px;
padding:25px;
font-size:4em;
position:relative;
}
html
{
height:100%;
}
h1,h2,h3,h4,h5,h6,p{
color:#FFF;
font-family:Arial,Helvetica,sans-serif;
text-align:center;
}
hr.menu
{
margin:0;
}
#nav
{
width:100%;
position:relative;
}
#nav ul
{
width:900px;
margin:0 auto;
}
#nav ul li
{
display:inline-block;
}
#nav ul li a
{
display:block;
width:180px;
font-weight:bold;
color:#FFF;
text-transform:uppercase;
text-align:center;
text-decoration:none;
padding:5px 0;
}
#nav ul li a:hover
{
background-color:#C09;
}
Sorry for the length of this message and thank you for any answers!
EDIT: here is the jsFiddle
635
Elements that are laid inline are sensitive to their structure in your HTML - if you comment out the white-space between the <li>'s or manually remove the white-space the menu will line up as expected.
Another alternative is to set font-size on the <ul> to 0 and then re-declare the desired font-size for the <li>'s. Here is an informative article that discusses this popular issue and additional ways to solve it.
105
Use float:left instead of display:inline-block.
#nav ul li
{
display:inline-block; <-- here
}
I'd set the width you'd like for each nav item on the <li> then set your <a> to be width:100%;. And don't forget about white-space when using display inline-block on nav list. Any extra spaces in your HTML can add a few extra pixels of spacing around your inline-block elements.
2
Rather than working with floats like the others suggested (which are sometimes rather annoying because they need to be cleared afterwards) you could also remove your white spaces between your menu items like so:
<div id="nav">
<ul>
<li><a href="img/a.jpg">About</a></li><li><a href="img/b.jpg">Photo</a></li><li><a href="img/c.jpg">News</a></li><li><a href="img/d.jpg">Video</a></li><li><a href="img/e.jpg">Contacts</a></li>
</ul>
</div>
JSFiddle: http://jsfiddle.net/QNb2j/1/
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
