Treinando margin:0 auto; (centralizar) e !important (definir quem é importante) em CSS

Eu comecei criando um arquivo HTML no Dreamweaver. Para isso, é só clicar em Arquivo > Novo e escolher um novo arquivo HTML. Renomeei o título do arquivo para “centralizando”, no caso vai aparecer esse nome na barra de títulos quando abrirmos o HTML no navegador.

(Fazer o download dos arquivos)

centralizando-div001

 

Posteriormente, também no Dreamweaver (pode ser feito até no bloco de notas e salvo em HTML ou CSS) criei um arquivo CSS em Arquivo > Novo e escolhi o arquivo como CSS.

centralizando-div002

 

E salvei eles em uma pasta chamada centralizando.

centralizando-div003

 

O arquivo HTML, eu liguei ele para o nosso arquivo CSS para o ele funcionar na nossa página “centralizando”.

centralizando-div004

 

No arquivo HTML eu criei uma estrutura dentro da body (que quer dizer corpo, e é onde tudo acontece, o que vai aparecer na página fica entre a body).

Criei uma div chamada “tudo”, e dentro dela coloquei uma outra div chamada “header” e outra chamada “container”.

centralizando-div005

 

Dentro da “container” eu coloquei três colunas, a “col-one”, “col-two” e a “col-three”.

centralizando-div006

 

E lá no CSS eu criei as regras referente a cada uma delas.

centralizando-div007

 

E comecei a definir a largura de todas. Defini a div “tudo” em pixels e em % o restante, porque como a div “tudo” está declarada que vai ser de 960 px (o padrão para larguras das página da web hoje em dia) a “header” terá 100% disto, ou seja 960px também, a “container” também, porque elas estão dentro da “tudo”. Já as colunas, como estão dentro da “container”, terão duas 25% e uma 50% que ao todo dá 960 px, ou seja, vai ficar uma do lado da outra certinho.

centralizando-div008

 

Olhando nossa página HTML ainda não dá pra ver nada.

centralizando-div009

 

Só se clicarmos com o direito e escolhermos Exibir Código-fonte que vai aparecer como ela já está, só a estrutura, visto que ainda não demos cor às CSS.

centralizando-div010

 

Na div “tudo” não precisa de dar altura porque como ela envolve todas, ela se estica sozinha, mas demos uma altura para o cabeçalho (header), e as colunas. Assim como  a div “tudo”, o “container” contém div que já tem altura, então ela também se estica.

centralizando-div011

 

Olhando a nossa página, já vemos o cabeçalho (vermelho), o container (azul) e as duas colunas amarelas de 25% de 960 px cada e a cinza de 50%. A div “tudo” não dá pra ver, ela está preta por trás de todas (veja no CSS que ela está com a cor #000, ou seja preta).

centralizando-div012

 

Para ver a div “tudo”, vamos dar um padding em volta dela de 10px (padding é preenchimento por dentro. Como eu declarei só uma vez, ele entende como se o padding deve ser em cima, em baixo, na direita e na esquerda. Se eu declarasse assim padding:10px 10px 10px 10px; ia ser a mesma coisa pois em ordem, o primeiro é a declaração de cima, o segundo lado direito, o terceiro em baixo e o quarto lado esquerdo. No caso, quando está tudo igual, é só colocar uma vez ( padding:10px;) que ele entende como se estivesse em todos o lados.)

Nas colunas eu dei um float:left; para flutuar cada uma à esquerda e elas ficarem lado a lado.

centralizando-div013

 

Podemos ver no arquivo HTML aberto no navegador que  ela , a div “tudo” ficou à esquerda e queremos que ela fique no meio (Note que eu diminui o zoom com ctrl- para que pudesse mostrar aqui no print).

centralizando-div014

 

Como queremos deixar ela no meio, damos um margin:20px auto; No caso, 20 px vai servir para cima e baixo, e auto vai servir para direita e esquerda. A caixa vai ser centralizada porque, como a div tudo é de 960px, resta espaço porque a div body pega a tela toda. Quando damos o auto no margin, ela pega essa diferença dos lados da div “tudo” e da div que a contém (aqui a body) divide e aplica uma margin a direita e a esquerda, fazendo ela ficar no meio.

centralizando-div015

 

Podemos ver no arquivo HTML que ela ficou no meio.

centralizando-div016

 

Agora, já aprendemos a fazer com que a div fique no meio, mas vamos supor que envolta à div tudo, termos outra div chamada “envolve”, (note que eu fechei ela ali depois do fechamento da div, coloquei um comentário). Comentário não influencia em nada, é só você colocar <!–qualquer coisa–> no código para marcar algo e não esquecer de nada.

centralizando-div017

 

Depois de fechar fui lá no CSS e criei a regra dela e disse que, assim como a div tudo, ela teria a largura de 960px, mas a margin dela, o espaço preenchido do lado de fora seria  5px em cima, 3 px do lado direito, 5px em baixo e 3px do lado esquerdo (Também poderia ser escrito assim margin:5px 3px; para abreviar).

centralizando-div018

 

Note que na falta do atributo auto em margin, (Agora a div “envolve” prevalece porque ela está fora) ela caiu para a esquerda de novo.

centralizando-div019

 

Em CSS, tudo que é declarado depois, mais em baixo, é o que vale. Se eu colocar margin 5px auto; para a mesma div, é ela que vai valer porque ela vem depois. Veja:

centralizando-div020

 

Note que ela voltou ao meio pois o margin:5px auto;é que está valendo.

centralizando-div021

 

Mas aqui eu posso usar o atributo !important para dizer que aquela declaração de margin, que vem antes é mais importante do que a que vem depois (por padrão, a mais importante é a que vem depois,mas podemos usar !important para dizer qual é a mais importante. Dica: Use sempre !important quando algo não funcionar).

centralizando-div022

 

Aí ela passa a funcionar.

centralizando-div023

O HTML ficou assim:

 

O CSS ficou assim:

 

Então é isso. Isso são coisas simples, mas o objetivo deste artigo foi só mostrar que com estas besteirinhas podemos adiantar e muito nossos trabalhos com CSS.

(Fazer o download dos arquivos)

Siga-me no Facebook

Comments

comments

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *