Novidades100 - Dicas de Internet e Computador

Customizando o Elemento Div

Propriedades e Atributos do Elemento Html Div

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 até mesmo uma chamada para um outro Url de forma eficiente.
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>

Colocando a div à direita

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 a propriedade Padding

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.

Definindo a propriedade Margin

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 marcar 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 (Background)

Customizando a cor do fundo do conteúdo da div (background), e a cor da fonte (font-color).

Aqui estebelece-se uma cor para o fundo do conteúdo (background), que no caso é #000 (Preta) e uma cor para a fonte 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>

Atribuindo a Botão de Scroll

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>

Ocultar a Barra de Scrolling

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), que pessoalmente não sei o motivo, porém com certeza deve ter algum. Portanto o documento não será validado se tiver incluído no css externo, no entanto dentro de uma div não haverá problema.

Utilizar-se da seguinte linha de comando css overflow-x:hidden, para ocultar a barra de scrolling (barra horizontal).

[código abaixo]

<div style="width:98%;height:140px;border:1px solid #000;float:left;padding:4px;background:#000;color:#fff;overflow:scroll;overflow-x:hidden;">
Conteúdo da div…
</div>

Customizar o Botão Scrollbar

Personalizando a barra vertical da div (scrollbar).
Atenção: Esta propriedade também vai de encontro às regras estabelecidas pelo W3C.

Customizar a barra vertical (scrollbar), colocando cores variadas, utilizando-se da propriedade scrollbar-face-color.
Atenção: Alguns navegadores, como o firefox, google chrome e safari não atendem a essa regra.

[código abaixo]

<div style="width:98%; height:190px;border:1px solid #000;float:left;padding:4px;background:#000;color:#fff;overflow:scroll;overflow-x:hidden;scrollbar-face-color:#ff5;">
Conteúdo da div…
</div>

Misturar Cores de Fundo (Gradient)

Para colocar duas cores de fundo misturando-se de acordo com as propriedades marcadas, atribua novas regras do html5. Veja como fica abaixo:

Background Gradient

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>

Background Gradient em Todos os Navegadores (Cross-Browser)

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 desses atributos e propriedades utilizadas acima, podem ser utilizados muitos outros como font-family, font-weigth, font-size, etc.

| | HomePage | Relatar Problema |