A cor de fundo não funciona depois da flutuação
Eu sou muito novo em CSS, então eu decidi tentar recriaristo página sozinha.
Mas me deparei com o seguinte problema:
HTML
<!-- Header -->
<header>
<h1>w3schools.com</h1>
<img src="Images/w3schoolslogo.gif">
<form method="post" action="w3_schools.html">
<input type="text" name="search" placeholder="Search w3schools.com"/>
<input type="submit" value="Search">
</form>
</header>
<!---->
<!-- Top navigation -->
<nav class="top_navigation">
<ul>
<li><a href="">Home</a></li>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">Javascript</a></li>
<li><a href="">JQuery</a></li>
<li><a href="">XML</a></li>
<li><a href="">ASP.NET</a></li>
<li><a href="">PHP</a></li>
<li><a href="">SQL</a></li>
<li><a href="">More...</a></li>
</ul>
<aside>
<ul>
<li><a href="">References</a></li>
<li><a href="">Examples</a></li>
<li><a href="">Forum</a></li>
<li><a href="">About</a></li>
</ul>
</aside>
</nav>
<!---->
CSS
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
/* Header */
header {
position: relative;
}
header h1 {
display: none;
}
header form {
position: absolute;
bottom: 0px;
right: 0px;
}
header form input[type="text"] {
border: 1px solid #D3D3D3;
}
/* Top navigation */
.top_navigation {
clear: both;
text-transform: uppercase;
margin-top: 10px;
font-size: 80%;
background-color: green;
}
.top_navigation a:link, .top_navigation a:visited{
color: #555555;
text-decoration: none;
}
.top_navigation a:hover {
color: red;
}
.top_navigation li {
float: left;
margin-left: 10px;
}
.top_navigation aside {
float:right;
}
O problema é que o fundo do elemento nav não é verde. Eu suponho que tenha algo com o float, mas não tenho ideia de como consertar. Eu tentei colocarclear:both
quase em toda parte, mas nada verde estava lá. :(
Você pode por favor me ajudar? Desde já, obrigado!