Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
1 05 de Abril de 2009
Estilizando DIVs
Introdução
Uma DIV (Divisão) é um elemento de bloco. Desta forma, ela ocupa toda a extensão da janela do
navegador. Uma DIV pode ser entendida como um container, que tem a capacidade de armazenar
conteúdo. Quando falo sobre conteúdo, estou me referindo a qualquer conteúdo HTML,
HTML tal como textos,
linhas horizontais (hr), tabelas, listas e até outras DIVS.
Você deve pensar numa DIV como um elemento retangular (bloco), que tem um certo conteúdo.
....
Texto fora da div.
<div>
Texto dentro da div
</div>
Texto fora da div.
....
Note que não existe diferença visual entre o texto de fora da div e o texto criado dentro da div.
Apesar disto, podemos perceber que o texto que foi inserido dentro da DIV ficou numa linha separada dos
demais textos (criados fora da DIV).
No exemplo abaixo, utilizaremos o CSS para colocar uma borda em todas as DIVs existentes na página:-
página:
<html>
<head>
<title> Exemplo 1 – Estilizando
zando DIVs via CSS </title>
<style>
div { border:1px solid black; }
</style>
</head>
<body>
Texto fora da div.
<div>
Texto dentro da div
</div>
Texto fora da div.
</body>
</html>
Ao inserirmos uma borda na DIV podemos verificar que a mesma se estende até o final (horizontal) da
página.
Nota
Mantenha a unidade de medidada colada no valor a ser aplicado, isto é, não insira espaços entre eles, senão, o
atributo não funcionar. Exemplo: 12px;
No exemplo a seguir irei identificar a DIV a ser estilizada (para que apenas esta div tenha seu estilo
manipulado) e no conjunto de estilos
stilos irei definir uma largura de 300 pixels:-
pixels:
<html>
<head>
<title> Exemplo 2 – Estilizando DIVs via CSS </title>
<style>
#primeira {
border:1px solid black;
width:300px;
}
</style>
</head>
<body>
Texto fora da div.
<div id="primeira">
Uma div é um elemento de bloco cujo tamanho horizontal (width) é igual ao da tela do
navegador e seu tamanho vertical é igual ao conteúdo que a DIV está armazenando.<br>
A DIV aumenta verticalmente na medida em que seu conteúdo também aumenta.
</div>
Texto fora da div.
</body>
</html>
</body>
Nota
Na medida em que você alterar a largura da janela (width), o conteúdo da DIV é distribuido
distrib e ajustado
conforme este tamanho.
Isto quer dizer que se o desenvolvedor inserir uma imagem de fundo que tenha uma dimensão maior do
que o objeto ao qual esta imagem será aplicada, apenas parte desta imagem
imagem será exibida, porque o que
será exibido é o objeto.
Exemplo:-
Objeto HTML sem a imagem de fundo (Um parágrafo simples sem nenhum outro estilo definido):-
...
<p> texto </p>
...
Nota
Se a DIV estiver sem conteúdo algum, nada será exibido. Exemplo:-
...
<div> </div>
...
Utilizaremos uma imagem de nome imgVictoria.png e alguns elementos de estilo serão customizados para
destacar atributos visuais desta DIV.
<html>
<head>
<title> Exemplo 3 – Inserindo imagem de fundo numa DIV </title>
<style>
# segunda {
background:url(imgVictoria.png);
border:1px solid black;
color:white;
font-weight:bold;
font-size:18px;
height:250px;
}
</style>
</head>
<body>
Texto fora da div.
<div id="segunda">
<p>A cidade de Victoria.
Victoria </p>
</div>
</body>
</html>
Nota
A imagem de fundo tem 800 pixels de largura. No exemplo acima, o navegador está sendo num monitor
com uma resolução de 1024 pixels de largura. Como a div destaque não teve sua largura definida, ela acaba
ac
ocupando toda a largura da tela (elemento de bloco).
Como a largura da imagem de fundo é menor (800 pixels) do que a div onde ela deve ser aplicada (1024
pixels), a imagem é duplicada em sua exibição
exibiçã de fundo. Note que inseri uma borda branca na própria
imagem para melhor notar suas dimensões.
Isto quer dizer que caso a largura da DIV seja maior do que a imagem de fundo, a mesma será duplicada
(verticalmente e horizontalmente), a não ser que se utilize a opção no-repeat,, na propriedade
background:url(..) ou background-image,
background do CSS.
<html>
<head>
<title> Utilizando um Icone como imagem de fundo de um formulario </title>
<style>
#newsletter {
background:url(128.png) no-repeat;
Background-color:olive;
border:1px solid black;
color:white;
font-name:Verdana;
font-size:16px;
height:140px;
padding-left:150px;
}
</style>
</head>
<body>
Texto fora da div.
<form id="newsletter" action="#" >
<h2> Envio de Newsletters </h2>
Nome: <input type="text" id=" nome " name=" nome " > </br>
e-Mail: <input type="text" id=" email" name=" email " > </br>
<input type="submit" value=" Enviar">
</form>
</body>
</html>
Resultado:-
A imagem pode ser facilmente alterada por outra e os estilos podem ser trabalhados de forma a gerar
diferentes versões do mesmo formulário.
Ao inserir um conteúdo numa DIV, caso o mesmo não caiba nas dimensões da DIV, poderá acontecer o
seguinte:-
No Firefox
O Firefox respeita as dimensões definidas pelo estilo da DIV, de forma que seu conteúdo estoura tais
dimensões.
No exemplo abaixo, verificamos a DIV (e seu tamanho) que está com a borda vermelha e fundo amarelo.
Dentro dela, um pouco deslocada para a direita, está uma imagem que estoura (ultrapassa) suas dimensões.
Internet Explorer
No caso do IE, ele ajusta o tamanho da DIV ao seu conteúdo, ignorando as informações definidas pelo
CSS.
Exemplo de uma imagem inserida dentro de uma DIV com dimensões menores do que a imagem:-
Exemplo:-
<html>
<head>
<title> Exemplo 2 – Estilizando DIVs via CSS </title>
<style>
#terceira{
background-color:orange;
border:1px solid black;
height:220px;
width:200px;
}
</style>
</head>
<body>
<div id="terceira">
<p>Uma DIV pode ter seus tamanhos de altura (height) e largura (width) configurados via
CSS.</p>
<p> <img src="imgMenor.jpg"> </p>
<p>Se o conteúdo da DIV não couber dentro do tamanho especificado, seu conteúdo
estoura a DIV.</p>
</div>
</body>
</html>
</body>
Nota
No IE, a largura da DIV está sendo respeitada, mas sua altura esta sendo alterada para aceitar o conteúdo.
Exemplo:-
<html>
<head>
<title> Exemplo 2 – Estilizando DIVs via CSS </title>
<style>
#quarta{
background-color:khaki;
height:100px;
margin-top:100px;
overflow:auto;
width:200px;
}
</style>
</head>
<body>
<div id="quarta">
Esta DIV teve sua propriedade overflow setada para auto (scroll)
<p> <img src="imgMenor.jpg"> </p>
</div>
</body>
</html>
</body>
Resultado:-
Exemplo:-
<html>
<head>
<title> Exemplo 2 – Estilizando DIVs via CSS </title>
<style>
#quinta{
background-color:khaki;
height:100px;
overflow:hidden;
width:200px;
}
</style>
</head>
<body>
<div id="quinta">
Esta DIV teve sua propriedade overlay setada para hidden
<p> <img src="imgMenor.jpg"> </p>
</div>
</body>
</html>
</body>
Resultado:-
imgVictoria.png
Links Interessantes
Smashing Magazine
Algumas imagens disponibilizadas por
or este site podem ser utilizadas gratuitamente para
p criação de topos de
páginas.
Exemplo:-
http://www.smashingmagazine.com/2008/03/05/blog
http://www.smashingmagazine.com/2008/03/05/blog-headers-for-free-download/
Conclusão
Verificamos neste artigo algumas possibilidades na estilização
estilizaç de elementos HTML,, dentre eles parágrafo
par e
divs. Outros elementos podem ser também
tamb trabalhados. Alguns pontos interessantess foram a utilização
utilizaç de
imagens em fundo de divs e o estudo da
d maneira pela qual o conteúdoúdo de uma div pode ser formatado.
cmajer@uol.com.br
cmajer@ig.com.br