| 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
Nosso site utiliza cookies para melhorar sua experiência ao utilizar nosso conteúdo, além de personalizar publicidades de acordo com seus interesses.
Política de Privacidade
