[Resolvido] DIVs lado a lado automaticamente

[J.Pinheiro 0]

Pessoal, to sofrendo pra montar o cabeçalho de uma página aqui e queria ver se existe algum método mais simples.

 

No cabeçalho eu tenho uma div principal, que ocupa toda a largura da página, e dentro dessa DIV uma logomarca bem a esquerda e após isso eu tenho 3 DIVs menores para posicionar os links do cabeçalho.

 

Porém, para que as mesmas fiquem lado a lado eu estou informando manualmente a posição de cada uma, direto na página.

 

Isso vai me tomar muito tempo em futuras manutenções, como por exemplo adicionar ou remover um link de lá.

 

Tem alguam maneira mais simples de posicionar elas?

 

Segue a forma como estou fazendo:

 

Esse é o código inserido na pagina mesmo.

<div class="div_cabec"><img src="../images/imagem.jpg" width="190" height="53" />
<div class="div_clinks">link</div>
<div class="div_clinks" style="margin-top:-60px; margin-left:365px;">link2</div>
<div class="div_clinks" style="margin-top:-60px; margin-left:522px">link3</div>

</div>

 

E aqui o código do estilo "div_clinks"

 

.div_clinks{
  width:150px;
  height:60px;
  text-align:center;
  margin-top:-54px;
  margin-left:208px;
  line-height:50px;

}

 

Tem como simplificar via CSS de forma às DIVs se auto-ajustarem naquele espaço sem precisar informar a posição delas uma a uma?

[Lucas Peperaio 20]

usa a propriedade float:left em cada DIV, e cria uma div com style "clear:both logo abaixo delas.

[Guilherme Müller 0]

Primeiro simplifique e melhore o markup, exemplo:

<div id="cabecalho">
 <h1 id="logo">imagem da logo aqui...</h1>
 <ul id="menu">
<li><a href="#>Link exemplo</a></li>
mais links aqui...
 </ul>
</div>

 

Não precisa colocar "div_" no nome dos seus divs. Se alguma hora você precisa mudar o tag, sua id ou classe vai ficar inútil. Pense semanticamente para dar nome a seus elementos, não na sua aparência. Use listas para menus, são bem melhores para isso depois que você se acostuma.

Se o seu site ocupa toda a largura da tela, não adianta ficar posicionando os elementos de acordo com a sua tela. Em uma tela de tamanho diferente a posição dos elementos pode ficar diferente.

 

Para posicionamento considere o seguinte CSS:

#cabecalho {
 width: 100%;
 height: 120px; /* aqui estou limitando a altura do cabeçalho, mas há outras opções */
 position: relative; /* coloca este div como referência para posicionamento */
}

#logo {
 position: absolute;
 top: 10px;
 left: 10px; /* assim a sua logo ficaria 10px do topo e 10px da esquerda do canto superior esquerdo do cabeçalho. */
}

#menu {
 position: absolute;
 bottom: 0;
 left: 10px; /* assim o seu menu ficaria grudado na parte de baixo do cabeçalho e a 10px da esquerda */
}

 

Claro que tem mais estilos para que o menu fique na horizontal e etc, mas já é um começo.

Sempre busque técnicas que facilitem a manutenção do seu código. Com o breve exemplo acima você deixa o seu HTML independente de aparência e controla tudo através de um arquivo de CSS externo.

 

Espero que ajude!

[J.Pinheiro 0]

Cara ajudou sim.

 

Seguindo essa idéia consegui ajustar o layout aqui.

 

Sobre a nomenclatura que eu uso, utilizo "div_" para mim saber à que se refere aquele estilo, se é para uma div, uma tabela, link e etc.

 

Como nao tenho muita experiência ainda com CSS aí faço assim pra não me perder, rsrs.

 

Mas vlw pela dica tbm.

[Guilherme Müller 0]

Quando você escreve o seu CSS, você pode escrever, caso queira:

div#cabecalho { /* ao invés de apenas #cabecalho */
 /* regras aqui */
}

 

Assim a regra acima apenas se aplicaria a um elemento <div> e com a id "cabecalho", deixando a regra ainda mais específica. Portanto, não é necessário prefixar "div_" nos seus elementos.

Mas continue estudando, CSS é uma linguagem muito interessante de aprender!