millet antoine millet antoine - 6 months ago 8
HTML Question

How to put a menu over the full width of the page using HTML and CSS?

I just have debuted with the web language (HTML, CSS) and I am creating my First page. I find a template html horizontal menu that I would like applying to my page. Unfortunately I don't arrive to modify it for he applies to all the width of my page.

I explore the net to try to find how to do and I think it should be linked with the property

width = 100%
.

I think the solution should be easy, but even watching the StackOverflow post on similar problems I have not found. When i apply the solutions found in my code it doesn't work.

Here is the code:



body
{
background-color: black; /* Le fond de la page sera noir */
}

#nav
{
padding:0;
}

#nav li
{
display:inline;
}

#nav li a
{
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
background-color: #333333;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
}

#nav li a:hover
{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;
}

<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="menuStyle.css" />
<title>Antoine</title>
</head>
<body>

<ul id="nav" style="clear:both;">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>




Answer

You can do it displaying your ul (#nav ID) as inline-block and then setting width: 100%. Also, you should add a background-color to see the effect.

body
{
 background-color: black; /* Le fond de la page sera noir */
}

#nav
{
padding:0;
display: inline-block;
width: 100%;
background-color: #333333;
}

#nav li
{
display:inline;
}

#nav li a
{
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
background-color: #333333;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
}

#nav li a:hover
{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;
}
<html>
<head>
    <meta charset="utf-8" />
	<link rel="stylesheet" href="menuStyle.css" />
    <title>Antoine</title>
</head>
<body>
   
	<ul id="nav" style="clear:both;">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">Sitemap</a></li>
			<li><a href="#">Help</a></li>
			<li><a href="#">Contact Us</a></li>
	</ul>
</body>
</html>

Comments