Qual a melhor forma de posicionar uma div em css?
Pergunta
Estou tentando colocar este menu:
<div class="left-menu" style="left: 123px; top: 355px">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>
No lado esquerdo da página.O problema é que se eu usar valores absolutos ou fixos.
Diferentes tamanhos de tela renderizarão a barra de navegação de maneira diferente.Também tenho uma segunda div que contém todo o conteúdo principal que também precisa ser movido para a direita, até agora estou usando valores relativos que parecem funcionar independentemente do tamanho da tela.
Solução
float
é de fato a propriedade certa para conseguir isso.Contudo, o exemplo dado por bmatthews68 pode ser melhorado.O mais importante sobre as caixas flutuantes é que elas deve especifique uma largura explícita.Isso pode ser bastante inconveniente, mas é assim que o CSS funciona.Contudo, observe que px
é uma unidade de medida que não tem lugar no mundo HTML/CSS, pelo menos não para especificar larguras.
Sempre recorra a medidas que funcionem com diferentes tamanhos de fonte, ou seja,ou use em
ou %
.Agora, se o menu for implementado como um corpo flutuante, isso significa que o conteúdo principal flutua “ao redor” dele.Se o conteúdo principal for superior ao menu, pode não ser isso que você deseja:
float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png
<div style="width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>
Você pode corrigir esse comportamento dando ao conteúdo principal uma margin-left
igual à largura do menu:
float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png
<div style="width: 10em; float: left;">Left</div>
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div>
Na maioria dos casos, você também deseja dar ao conteúdo principal uma padding-left
para que não “grude” muito no menu.
A propósito, é trivial alterar o acima para que o menu fique do lado direito em vez do esquerdo:simplesmente altere todas as ocorrências da palavra “esquerda” para “direita”.
Ah, uma última coisa.Se o conteúdo do menu for superior ao conteúdo principal, ele será renderizado de forma estranha porque float
faz algumas coisas estranhas.Nesse caso, você terá que desmarcar a caixa que fica abaixo do corpo flutuante, como no exemplo do bmatthews68.
/EDITAR:Droga, o HTML não funciona como a visualização mostrou.Bem, em vez disso incluí fotos.
Outras dicas
Eu acho que você deveria usar o flutuador propriedade para posicionar coisas assim. Você pode ler sobre isso aqui.
Todas as respostas que dizem para usar carros flutuantes (com larguras explícitas) estão corretas.Mas para responder à pergunta original, qual é a melhor maneira de posicionar um <div>
?Depende.
CSS é altamente contextual e o fluxo de uma página depende da estrutura do seu HTML.O fluxo normal é como os elementos e seus filhos serão dispostos de cima para baixo (para elementos de bloco) e da esquerda para a direita (para elementos embutidos) dentro do bloco que os contém (geralmente o pai).É assim que a maior parte do seu layout deve funcionar.Você tenderá a confiar width
, margin
, e padding
definir o espaçamento e disposição dos elementos em relação aos demais elementos ao seu redor (sejam eles <div>
, <ul>
, <p>
, ou caso contrário, o HTML é principalmente semântico neste ponto).
Usando estilos como float
ou absolute
ou relative
o posicionamento pode te ajudar a atingir objetivos bem específicos do seu layout, mas é importante saber como utilizá-los.Como foi explicado, float
geralmente é usado para colocar elementos de bloco próximos uns dos outros e é muito bom para layouts de várias colunas.
Não vou entrar em mais detalhes aqui, mas você pode querer verificar o seguinte:
- Referências CSS do SitePoint - provavelmente a referência CSS mais direta e completa que encontrei online.
- Modelo de formatação visual W3C CSS2.1 - Sim, é uma leitura difícil, mas explica tudo.
Você deve usar os atributos CSS float e clear para obter o efeito desejado.
Primeiro defini estilos para os chamados left e right para as duas colunas do meu layout e um estilo chamado clearer usado para redefinir o fluxo da página.
<style type="text/css"> .left { float: left; width: 200px; } .right { float: right; width: 800px; } .clear { clear: both; height: 1px; } </style>
Então eu os uso para fazer o layout da minha página.
<div> <div class="left"> <ul> <li>Categories</li> <li>Weapons</li> <li>Armor</li> <li>Manuals</li> <li>Sustenance</li> <li>Test</li> </ul> </div> <div class="right"> Blah Blah Blah.... </div> </div> <div class="clear" />
você pode usar flutuador
<div class="left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>
em arquivo css
.left-menu{float:left;width:200px;}