Galera, estou aprendendo HTML e CSS seguindo as aulas em video no youtube. Consegui um exemplo aqui, ocorre que muitas das aulas nao existem mais. Dai, logo no inicio, me deparei com o seguinte problema:
tenho um head onde coloquei uma logo, um menu in line e uma outra imagem acima dele. No corpo da pagina tem um Form para busca e um menu vertical, alem de uma imagem que deveria ficar ao centro da pagina. Ja fiz de todas as formas e nao consegui. Vejam como esta o meu codigo HTML e o Css. Onde está errado ??? Alguem me ajuda
<h1>
<img src="logo.png" alt="Mirror Fashion">
</h1>
<!-- Conteúdo do cabeçalho -->
<p class="sacola">
</p>
<main class="teste">
<!-- Conteúdo principal -->
<form>
<input type="search">
<button>Buscar</button>
</form>
<nav class="menu-departamentos">
<ul>
<li><a href="">DEPARTAMENTOS</a></li>
<li><a href="#">BLUSAS E CAMISAS</a></li>
<li><a href="#">CALÇAS</a></li>
<li><a href="#">SAIAS</a></li>
<li><a href="#">VESTIDOS</a></li>
<li><a href="#">SAPATOS</a></li>
<li><a href="#">BLUSAS E CAMISAS</a></li>
<li><a href="#">BOLSAS</a></li>
<li><a href="#">ACESSÓRIOS</a></li>
</ul>
</nav>
<p class="central"> </p>
</main>
<section id="destaques">
<!-- Painéis com destaques -->
</section>
<footer>
<!-- Conteúdo do rodapé -->
</footer>
.container {
margin-right: auto;
margin-left: auto;
}
.container {
margin: 0 auto;
width: 940px;
}
.container {
position: relative;
}
.menu-opcoes {
position: absolute;
bottom: 0;
right: 0;
}
.menu-cabecalho {
// código de um menu no cabeçalho
// essas regras TAMBÉM serão aplicadas ao nav
}
.sacola {
background-image: url(sacola1.png);
background-repeat: no-repeat;
text-color: white;
font-size: 14px;
text-align: right;
width: 140px;
height: 80px;
padding-right: 35px;
}
.sacola {
position: absolute;
top: 0;
right: 0;
}
.busca,.menu-departamentos {
float: left;
}
.menu-departamentos {
clear: left;
}
.menu-opcoes ul {
font-size: 15px;
}
.menu-opcoes ul li {
display: inline;
margin-left: 20px;
}
.sacola {
padding-top: 8px;
}
.menu-opcoes a {
color: #003366;
}
.central {
background-image: url(imagemcentral);
}