Qual a melhor forma de posicionar uma div em css?

Question

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.

Answer 1

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.

Answer 2

Eu acho que você deveria usar o flutuador propriedade para posicionar coisas assim. Você pode ler sobre isso aqui.

Answer 3

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.

Answer 4

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" />

Answer 5

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;}