Culinária | Detonados | Internet | Poesias | Wallpapers | Web Tools |
Como editar e configurar o elemento div para torná-la mais atraente e eficiente na sua página da web.
As divs são extremamentes úteis para que se possa colocar avisos, informações extras e principalmente para deixar layouts mais atraentes.
Primeiramente vamos configurar a div propriamente dita, editando apenas a largura, altura e uma borda para definir mais claramente o exemplo:
Observe que se não for configurada a sua posição (direita ou esquerda), ela adota o valor padrão da página, ou seja neste caso vai ficar à esquerda.
[código abaixo]
<div style="width:47%; height:auto; border:1px solid #000;">
Conteúdo da div…
</div>
Com a inclusão da propriedade float e o valor right, a div ficará posicionada à direita.
[código abaixo]
<div style="width:47%;
height:auto;border:1px solid #000;float:right;">
Conteúdo da div…
</div>
Para que seja efetivamente definida à esquerda, troque float: right; por float:left;.
Já que agora está compreendido a questão de posicionamento (float left e float right), vamos dar exemplos com divs no tamanho total da largura da coluna.
Definindo um espaço para que o texto não fique colado na borda.
Aqui adiciona-se a propriedade padding para que o conteúdo da div dê uma margem para a borda.
[código abaixo]
<div style="width:98%;height:auto;border:1px solid #000;float:left;padding:4px;">
Conteúdo da div…
</div>
Atenção: Estabelecendo a propriedade padding, a Div se expande um pouco aumentando sua largura e altura.
Adicionando uma margem para que a div afaste-se um pouco do conteúdo ao lado.
Atenção: No caso aqui vou utilizar apenas margin-top e margin-bottom, para dar espaço acima e abaixo da div. Para declarar o mesmo valor de todos os lados basta apenas usar margin:4px;.
[código abaixo]
<div style="width:98%;height:auto;border:1px solid #000;float:left;padding:4px;margin-top:4px;margin-bottom:4px;">
Conteúdo da div…
</div>
Customizando a cor do fundo do conteúdo da div (background) e a cor do texto (color).
Aqui estebelece-se uma cor para o fundo do conteúdo (background), que no caso é #000 (Preta) e uma cor para o texto, que no caso é #fff (Branca).
[código abaixo]
<div style="width:98%;
height:auto;border:1px solid #000;float:left;padding:4px;background:#000;color:#fff;">
Conteúdo da div…
</div>
No caso de que você queira colocar um conteúdo mais extenso dentro de uma div que não poderá exceder um certo espaço, basta acrescentar a propriedade overflow.
Utilizando-se da propriedade overflow para criar um botão de scroll, podendo inserir um conteúdo bem maior que poderia ser mediante a altura e largura da div.
[código abaixo]
<div style="width:98%;height:140px;border:1px solid #000;float:left;padding:4px;background:#000;color:#fff;overflow:scroll;">
Conteúdo da div…
</div>
Ocultando o botão de scrolling (barra horizontal).
Atenção: Esta propriedade não está de acordo com as normas do World Wide Web Consortium (W3C), portanto o documento não será validado se tiver incluído no css externo, no entanto dentro de uma div não haverá problema.
Personalizando a barra vertical da div (scrollbar).
Atenção: Esta propriedade também vai de encontro às regras estabelecidas pelo W3C.
Para colocar duas cores de fundo misturando-se de acordo com as propriedades marcadas, atribua novas regras do html5. Veja como fica abaixo:
Atenção: Esta regra só funciona no Google Chrome.
<div style="width:98%;height:auto;
border:1px solid #aaa;padding:4px;background:#fd0;background:-webkit-gradient(linear,left top,left bottom,color-stop(0.90,#3cf),color-stop(0.02,#ff0));color:#000;">
<h1>Background Gradient</h1>
<p><b>Atenção</b>:
Esta regra só funciona no </b>
Google Chrome</b>.</p>
</div>
Quando configurar as configurações da Div no Css você pode atribuir essas propriedades do gradient em todos os navegadores modernos (Cross-Browser) como está descrito abaixo.
Copie o código abaixo e salve em Bloco de Notas depois abra-o utilizando todos os seus navegadores instalados.
<style type="
text/css">
div{background:-webkit-gradient(linear,left top,left bottom,color-stop(0.90,#3cf),color-stop(0.02,#ff0));}/*Internet Explorer*/
div{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33ccff', endColorstr='#ffff00');}/*Firefox*/
div{width:100%;height:400px;background: -moz-linear-gradient(top, #3cf, #ff0);}/*Google Chrome*/
</style>
<div style="width:100%;height:250px;text-align:center;">
<h1>Background Gradient</h1>
</div>
Além dessas propriedades utilizadas acima, podem ser utilizadas muitas outras como font-family, font-weigth, font-size, etc.
Personalizar Divs, Div Html, Customizar, Div
Pressione CTRL + D para Adicionar Esta Página aos Seus Favoritos