Arquivos de sites

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

jQuery – Pegando e atribuindo classes CSS

Assim como é fácil manipular o conteúdo e atributos dos elementos, como nós vimos no capítulo anterior, é igualmente fácil manipular o CSS dos elementos. O jQuery lhe dá acesso fácil para mudança tanto do atributo de estilo, que você manipula usando o método css(), como a(s) classe(s) de um elemento, onde vários métodos diferentes permitem você modificar isso.

Vamos começar olhando a mudança do atributo class (classe). O atributo class recebe um ou vários nomes de classes, que pode ou não referenciar a uma classe CSS definida no seu stylesheet. Geralmente faz, mas você pode de tempos em tempos adicionar nomes de classes aos seus elementos simplesmente para estar apto para alcançar eles facilmente pelo jQuery, já que o jQuery tem um excelente suporte para seleção de elementos baseado nos  nomes da classe.

Eu defini alguns seletores CSS bem simples no meu stylesheet, principalmente para propósitos de teste:

.bold {
        font-weight: bold;
}
.blue {
        color: blue;
}

No seguinte exemplo nós vamos usar três dos métodos mais interessantes relacionados à classe: hasClass(), que checa se um ou vários elementos já tem uma classe específica definida, addClass(), que simplesmente adiciona um nome de classe a um ou vários elementos e o método removeClass(), que  irá… bem, você provavelmente já adivinhou isso.

<a href="javascript:void(0);" onclick="ToggleClass(this);">Toggle class</a>
<script type="text/javascript">
function ToggleClass(sender)
{
        if($(sender).hasClass("bold"))
                $(sender).removeClass("bold");
        else
                $(sender).addClass("bold");
}
</script>

O exemplo é na realidade muito simples. Quando o link é clicado, nós enviamos o próprio link (this) como um parâmetro ao método ToggleClass() que nós temos definido. Nele, nós checamos se o remetente já tem a classe “bold” – se ele tiver nós o removemos, caso contrário nós o adicionamos. Isso é uma coisa muito comum de se fazer, então obviamente o pessoal do jQuery não quer  que nós escrevemos todas essas três linhas de código para isso. É por isso que eles implementaram o método toggleClass(), com o qual nós podemos transformar todo nosso exemplo avima dentro de uma única linha de código:

<a href="javascript:void(0);" onclick="$(this).toggleClass('bold');">Toggle class</a>

Com certeza, nós podemos selecionar multiplos elementos, onde nós podemos adicionar ou remover múltiplas classes, também. Aqui está um exemplo disso:

<div id="divTestArea1">
        <span>Test 1</span><br />
        <div>Test 2</div>
        <b>Test 3</b><br />
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea1 span, #divTestArea1 b").addClass("blue");
        $("#divTestArea1 div").addClass("bold blue");
});
</script>

Primeiro nós selecionamos as tags span e a b, a qual nós adicionamos uma única classe para: classe blue. Então nós selecionamos a tags div, que nós adicionamos duas classes, separadas por espaço: classe bold e a blue. O método removeClass() funciona apenas do mesmo jeito, permitindo você especificar várias classes para serem removidas, separadas por espaços.

Fonte: jquery-tutorial.net