Posição de DIVS
Oi pessoal! Gostaria de fazer a div 'menu' fixar alinhado à esquerda, no canto da div corpopagina...
mas queria que a 'corpopagina' ficasse centralizado...
Já tentei várias formas... mas não consegui. Então voltei pra minha última atualização...
Nesse código, acabei de centralizar a div 'corpopagina', mas ainda não fiz alterações na div 'menu'.
- HTML
<body>
<!--Criando um menu barra
1 criar uma lista ul e li, dentro de uma div
2 criar os links em cada iten da lista
3 editar a dive da forma que você quer que apareça na tela-->
<div id="corpopagina" class="pagina1">
<div id="menu">
<ul>
<li onClick="mudar('inicio')"><a href="#">Início</a></li>
<li onClick="mudar('produtos')"><a href="#">Produtos</a><!--Submenu-->
<ul>
<li onClick="sub('sites')"><a href="#">Sites</a></li>
<li onClick="sub('cursos')"><a href="#">Cursos</a></li>
<li onClick="sub('projetos')"><a href="#">Projetos</a></li>
</ul>
</li>
<li onClick="mudar('quem_somos')"><a href="#">Quem Somos</a></li>
<li onClick="mudar('parceiros')"><a href="#">Parceiros</a></li>
<li onClick="mudar('contato')"><a href="#">Contato</a></li>
</ul><!--Corpo-->
</div>
</div>
</body>- CSS
#menu{
padding:20px auto;
margin-left:50px;
z-index: 100;
}#menu ul{
list-style:none; /sem formatação na lista/
margin:0px;
padding:0px;
}#menu ul li{
float:left; /deixar os itens lado a lado/
position: relative;
display: block;
}#menu ul li a{
color:#555; /cor texto/
background-color:#fff; /cor do fundo/
text-decoration:none;/sem formatação do ink/
margin: 0px 1px; /distacia de um item pro outro/
padding: 10px 20px; /distancia do item pra borda/
border-top:1px solid #555; /Borda do topo/
display:block;/deixar em blocos sólidos-fixos/
}
#menu li ul{
display:none;/"esconder" as soblistas/
}
#menu ul li a:hover{
/efeito nos links/
background:#066;
color:#fff;
}#menu li:hover ul{
/posição e animação do submenu/
display:block;
position:fixed; /animação do submenu o que faz não mover o corpo/
}
#menu li:hover li{
/em relação a animação do submenu, untamento com o item do menu/
float:none;
}#menu li:hover a{
/animação submenu/
background: #066;
color:#fff;
}#menu li:hover li a:hover{
background: #222;
}
#corpopagina{
padding:0px;
margin: 0px auto;
height:900px;
width:1500px;
background: #022;
}
.corpo{
display:none;
}Desde já, obrigada!
Discussão (3)
Carregando comentários...