Help
Ola galera MX, estamos hoje para comentar e mostrar como funciona os conceitos básicos de uma estrutura DIV, lembrando que para isso temos que cometar antes sobre o que pode se envolver num Bloco ou melhor dizendo, um BOX na sua estrutura visual, ficando ela responsável por organizar sempre um determinado conteudo de um Layout, não levando em consideração, se o que vai ficar dentro seja texto ou imagem e sim na sua estrutura fixada numa pagina HTML, mas tudo isso pode-se definir numa marcação chamada TABLELESS, para isso abaixo temos uma definição do wikipédia:
TABLELESS - SEGUNDO WIKIPÉDIA
Agora temos que levar a seguinte explicação ao alto, temos sempre que utilizar de macações CSS para trabalhar com este tipo de situação? Sim, pois isso não é questão de defender ou muito menos questão de gosto a sua utilização, isso é o CORRETO! Levando-se em conta que poderiamos devinir certas formatações em nosso proprio HTML, mas isso limitaria a estrutura e não poderiamos colocá-lo nos objetivos WEBSTANDARD, pois o CSS criado desde de 1994 e veio para quebrar certos incomodos de páginas como grande necessidade de formatação numa estrutura em massa. Então para que possamos criar uma DIV como "Box model" temos que relacioná-lo as seguinte TAG's CSS:
QUOTE
- Border
- Margin
- Padding
- Width
- height
- Margin
- Padding
- Width
- height
BORDER
Esta propriedade tem como definição ser colocada uma borda visual personalizada ao redor de uma area delimitada das DIV's podendo ter 3 propriedades:
border-width: define uma espessura para a borda. Lembrando que ele se aplica com a UNIDADE DE MEDIDA.
- border-top-width.
- border-right-width.
- border-bottom-width.
- border-left-width.
border-style: define uma espessura personalizada da borda.
- border-top-style.
- border-right-style.
- border-bottom-style.
- border-left-style.
border-color: define uma cor para espessura da borda. Lembrando que a cor pode ser em nome (red, blue, green, black, etc...), valor em RGB (255, 0, 0) ou em seu valor Hexadecimal (#FF0000).
- border-top-color.
- border-right-color.
- border-bottom-color.
- border-left-color.
Obs: cada propriedade tem sua definição individual em relação a direção que estará sendo aplicada.
MARGIN
Margens são espaços em branco que ficam ao redor do elemento (DIV) e em casos de elementos (DIV's) ao seu redor, ele tem como função separar em sentido adjacente, onde ele tem somente seus valores que corresponde ao sentido do elemento:
- margin-top.
- margin-right.
- margin-bottom.
- margin-left.
Valores permitidos:
AUTO - É o Browser que determina sua margem.
CUMPRIMENTO FIXO - Onde é definido com as UNIDADES DE MEDIDA.
CUMPRIMENTO EM PORCENTAGEM (%) - Como o proprio nome diz, ele define em % o espaço onde o bloco ficará.
PADDING
A propriedade PADDING tem como função controlar o espaço em branco das laterais do texto em relação a borda (BORDER) do bloco (DIV). Suas propriedades seguem abaixo:
- padding-top.
- padding-right.
- padding-bottom.
- padding-left.
Obs: Valores permitidos são CUMPRIMENTO FIXO e CUMPRIMENTO EM PORCENTAGEM (%), citados acima.
WIDTH/HEIGHT
Não terei muito o que comentar em relação a estas duas propriedades, elas ja vem desde do HTML então pra refrescar a memoria, elas tem função de dimensionar o bloco (DIV), width na horizontal e height na vertical e seus valores tanto pode ser em CUMPIMENTO FIXO ou CUMPRIMENTO EM PORCENTAGEM (%).
Agora temos como fica o exemplo na imagem prática de um Box model (DIV).
Clique na imagem para ampliá-la
Então galera o código dessa imagem ficaria assim, simulando uma DIV:
Código HTML:
QUOTE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="boxmodel.css" rel="STYLESHEET" type="text/CSS">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BoxModel
</title>
</head>
<body>
<div id="id">
Meu conteudo!
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="boxmodel.css" rel="STYLESHEET" type="text/CSS">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BoxModel
</title>
</head>
<body>
<div id="id">
Meu conteudo!
</div>
</body>
</html>
QUOTE
Salve o arquivo HTML com o nome: index_boxmodel.html
Código CSS:
QUOTE
/* Aqui fica todas as propriedades CSS comentadas acima.*/
#id {
width: 240px;
height: 110px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #990000;
border-right-color: #990000;
border-bottom-color: #990000;
border-left-color: #990000;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#id {
width: 240px;
height: 110px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #990000;
border-right-color: #990000;
border-bottom-color: #990000;
border-left-color: #990000;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
QUOTE
Salve este arquivo com nome: boxmodel.css
Então é isso pessoal, espero que aproveitem e deêm uma lida em alguma sites abaixo que servem de referencia:
- Maujor
- Tableless
- W3C
Valeu e até a próxima!
Adriano Aguiar - adrianoaguiaralves@gmail.com
Em caso de dúvidas poste abaixo ou utilize nosso Fórum CSS/JavaScript/DHTML
