O alinhamento de DIV na programação CSS, pode ser feita de várias maneiras, porém, convém estudarmos de maneira simples sua estrutura de código, sendo repartida as DIV CSS em duas sessões: id ou class (identidade ou classe), orientadas pelo código HTML.
ID ou Identidade da DIV
ID na Programação CSS
Na programação CSS usamos, o caracter # (tralha ou canal).
Exemplo do código CSS:
#cabecalho {
}
ID na Programação HTML
Na programação HTML, usamos, o atributo id.
Exemplo do código HTML:
<div id=”cabecalho”>
Conteúdo
</div>
Tipos de Posicionamento de DIV em CSS
Como padrão no CSS, existem dois tipos de posicionamentos de div.
Absolute
Onde o posicionamento é orientado à tela do browser ou orientada à tag <body> corpo da página.
Para criar o atributo absolute no CSS, faça:
#cabecalho {
position:absolute;
}
Relative
Onde o posicionamento é orientado à div que ela pertence, exemplo:
Reino Animal
Mamíferos.
Neste exemplo Mamíferos pertence ao Reino Animal, então o posicionamento começa do posicionamento da div do mamíferos.
Atributo relative no CSS
Para criar o atributo relative no CSS, faça:
#cabecalho {
position:relative;
}
Atributo relative no HTML
<div id=”reino-animal”>
<h2>Reino Animal</h2>
<div id=”mamiferos”>
<h3>Mamíferos</h3>
</div>
</div>
Atributo Left e Top
Para determinar o alinhamento vertical e horizontal são usados os atributos left e top.
Estes atributos são seguidos de valores que podem ser em pixel px, pontos pt.
Para criar um posicionamento da div CSS, usando left e top faça:
#cabecalho {
position:absolute;
left: 10px;
top: 10px;
}
Neste exemplo acima a div ficará alinha de cima para baixo 10px e lado esquerdo ao direito 10px.
Atributo Width e Height ( largura e altura da DIV )
Para determinar a largura vertical e largura horizontal são usados os atributos width e height.
Estes atributos são seguidos de valores que podem ser em pixel px, pontos pt.
Para criar uma dimensão da div CSS, usando width e height faça:
#cabecalho {
position:absolute;
width:100px;
height:100px;
left: 10px;
top: 10px;
}
Neste exemplo acima a div ficará com 100px de largura e 100 de altura.
Resultado Final do Posicionamento e Dimensão da DIV
