Menu
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>
760
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>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
