Category Archives: CSS

Como centralizar DIV na VERTICAL e na HORIZONTAL

A arte de centralizar div tanto na horizontal quanto na vertical é discutida a anos pelos desenvolvedores Web, hoje apresentaremos uma das maneiras de centralizar uma div tanto na horizontal quanto na vertical.

Resolvi escrever este artigo depois que voltei a trabalhar com implementação e percebi que existem várias técnicas para centralizar o conteúdo e a maioria é ineficiente, porém neste artigo explicarei que como centralizar seu site com uma técnica simples e direta.

 

O HTML

Felizmente com o advento do Webstandards o HTML se mantém sempre é simples, independete do problema ou solução.

E através do CSS ou JavaScript conseguimos resolver a maioria dos problemas, o que na verdade é um grande alívio, pois dar manutenção no conteúdo no passado era um verdadeiro tormento, tendo que navegar em grandes emaranhados de código.

Agora veremos como ficará o HTML quando queremos centralizar uma div, lembrando que com esta técnica é possível centralizar sites complexos ou simples, de forma organizada e com simplicidade.

    <div id="divCentralizada">
       <p>
          conteúdo centralizada
       </p>
    </div>

O HTML acima nos da 3 elementos, a o <div> que será centralizada, o <p> que representa o conteúdo da página e o texto, apenas para ilustrar como seu conteúdo ficaria centralizado neste exemplo.

O CSS

No CSS iremos posicionar esta DIV (#divCentralizada) através do position: absolute;, ele fará com que a DIV deixe de respeitar o resto do conteúdo e passe a ter uma posição absoluta na página.

Agora que a div(#divCentralizada) esta alinhada independente do “resto”, com isso poderemos definir o top e o left que fará com que nossa DIV se afaste da margem interna do navegador.

Para ambos informaremos 50%, com isso as margens da DIV serão literalmente posicionadas ao centro da tela, veja o código:

<html>
  <header>
    <title>Exemplo 2 - OGENIAL!</title>
    <style>
      #divCentralizada {
        position: absolute;
        width: 600px;
        height: 300px;
        left: 50%;
        top:50%;
        background-color: gray;
      }
    </style>
  </header>
  <body>
    <div id="divCentralizada">
      <p>
        conte&uacute;do centralizada
      </p>
    </div>
  </body>
</html>

Como centralizar uma div

Como podemos ver, ele posicionou a “ponta” da div a 50% de distância da borda esquerda e o mesmo fez com o a borda superior da div que foi posicionada exatamente no meio da tela, porém esperamos que o alinhamento seja feito não através da extremidade da nossa DIV mãe e sim através do seu meio, o que devemos fazer agora é setar uma margem negativa com metade das dimensões da div, como no exemplo acima informamos o tamanho (width com 600px deveremos informar uma margem a esquerda com -300px; (300 negativo) desta forma ela ira recuar até que o centro da DIV fique no centro da tela.

Desta forma a DIV será posicionada primeiro a 50% da disância da margem e logo depois recuará 50% do seu tamanho, acertando exatamento o centro, o mesmo deverá ser feito com a margem superior como vemos no exemplo abaixo.

<html>
   <header>
      <title>Exemplo 2 - OGENIAL!</title>
      <style>
         #divCentralizada {
            position: absolute;
            width: 600px;
            height: 300px;
            left: 50%;
            top:50%;
            margin-left: -300px;
            margin-top: -150px;
            background-color: gray;
         }
      </style>
   </header>
   <body>
      <div id="divCentralizada">
         <p>
            conte&uacute;do centralizada
         </p>
      </div>
    </body>
</html>

Então com esta simples técnica conseguimos centralizar uma dív na tela obtendo o resultado abaixo.

DIV centralizada apartir do seu centro

Acredito que seja válido observar também que a DIV foi centralizada, porém o conteúdo permaneceu alinhado conforme o padrão da página, não atrapalhando assim o “resto” do layout.

Centralizar div em vários navegadores

Este processo é utilizado em diversos sites pelo mundo todo pois funciona no IE 6, IE 7, IE 8 e IE 9, FireFox (2,3) e Google Chrome.

Pois é, centralizar div`s no Internet Explorer foi sempre um problema, mas agora, com esta técnica esta muito mais fácil.

Porque não utilizar a tag <center> para centralizar o conteúdo

A algum tempo a tag <center> era muito utilizada em algumas técnicas para centralizar o conteúdo, porém com o advento do CSS e as novas preocupações dos webmaster`s a tag <center> deixou de ser utilizada e finalmente foi depreciada pela W3C, sendo agora descartada como técnica viável para centralização.

Fonte: ogenial.com.br

Modulando o CSS

As vezes não é inteligente fazer o código CSS todo em apenas um arquivo CSS. É aí que entra a modularização do CSS.

Quando trabalhamos com Padrões Web, trabalhamos com três camadas principais: Informação, formatação e comportamento.
A informação seria controlada pelo HTML. Ele exibiria a informação na tela com significado.
O CSS manipularia a formatação desses elementos para que ficassem belos e controlaria suas posições na tela.
E o Javascript / Ajax cuidaria do comportamento destes elementos.

Vamos nos focar um bocado na segunda camada, o CSS. O CSS é uma linguagem de formatação é extremamente flexível.
O CSS, por ser uma linguagem com uma sintaxe fácil, muita gente coloca a mão durante o processo de desenvolvimento. E como seu código só tende a crescer, temos que ter um cuidado especial na organização dos arquivos.

Há várias maneiras de organizar os arquivos CSS de um site. Há sites que não precisarão de vários arquivos, bastando apenas um. Para estes devemos apenas ter cuidado com o código. Deixando-o simples e legível. Sempre tomando cuidado com a quantidade de linhas e código desnecessário. A estrutura seria mais ou menos essa:

Grandes portais e sites com uma visitação extrema, podem querer otimizar esse código. Isso é considerável apenas para estas excessões. O preço da banda é alto e qualquer 1Kb que economizarem será um caminhão de dinheiro que economizarão. Para sites pequenos, e até mesmo alguns sites de médio porte, na minha opinião, não é necessário haver uma “otimização de código“.

Se você perceber que as páginas são muito diferentes uma das outras e que o código está aumentando descontroladamente, é muito aconselhável você dividir o código CSS para cada padrão de página. Isso ajuda a controlar o tamanho do código e permite que você modifique uma parte do site sem interferir em outras páginas.

Essa opção é ótima para um site que tenha várias seções e cada seção tem um design diferente. Há um inconveniente: o código dentro do HEAD pode ficar enorme com tantas tags de LINK importando os arquivos de formatação. Para mudar isso, você pode fazer duas coisas: a primeira é fazer um arquivo CSS que importe todos os outros arquivos e linkar no HEAD apenas este arquivo.

Com essa primeira opção, o browser ainda carregará todos os arquivos CSS de uma vez. Pode ser que o carregamento fique pesado.
Por isso, há uma segunda opção que é conversar com seu programador para que ele faça uma mágica onde o site carregue apenas o arquivo CSS relativo àquela página. Quando visitamos a página interna, não é necessário carregar o arquivo CSS da HOME, por exemplo. Essa mágica previniria isso.

Outras pessoas preferem separar todo o código CSS em dois arquivos. Um arquivo conterá apenas informações de cor e fonte. E no outro arquivo haverá apenas informações sobre a estrutura do site: largura, altura, tamanho, margin, padding, position, float, etc.
Essa maneira é ótima para caso você quiser dar ao usuário opções de cores. O programador pode fazer um javascript maneiro que permita o usuário clicar e mudar a cor. O designer prepara vários CSS com regras de cores diferentes. A estrutura pode continuar a mesma, mas a paleta de cores muda. A mesma coisa pode-se fazer com a estrutura. A cor continua, mas a estrutura pode ser alterada de acordo com a opção do usuário.

Essas seriam as formas mais comuns de organizar seu CSS. Perca um bocado de tempo planejando essa estratégia. Se o site é muito grande, esse tipo de planejamento prévio pode salvar o projeto. Vale a pena a equipe definir padrões desenvolvimento. O CSS é um dos fatores definitivos para manutenção, velocidade e compatibilidade do site. Um CSS fora de controle é um pesadelo que você não quer ter.

Fonte: Tableless – Diego Eis