Como utilizar uma div "wrapper"

Escrito por ehow contributor | Traduzido por cezar rosa
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como utilizar uma div "wrapper"
Veja as principais utilizades de divs "wrapper" (website image by 6922Designer from Fotolia.com)

Uma div "wrapper", ou uma div contêiner, é uma div que envolve outros elementos. Elas são utilizadas nas páginas web para diversos propósitos. Neste artigo explicarei algumas das razões de utilizá-las.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Página web
  • Folha de estilos

Lista completaMinimizar

Instruções

  1. 1

    Uma página web pode usar um ou mais elementos div para envolver outros elementos. Essas divs podem ter vários IDs, como "wrapper" e "container", mas não estão restritas a tais IDs. Elementos div são identificados por um atributo ID ou CLASS, para que as regras de estilo sejam aplicadas corretamente. Aqui você vê um exemplo de um elemento div, com atributo ID=WRAPPER, que envolve todo conteúdo de uma página.

  2. 2

    O propósito de envolver todo conteúdo em uma página é de aplicar certas regras, como margens e bordas, em toda página. Aqui, por exemplo, a regra CSS centraliza e configura uma margem de zero pixel no topo e rodapé da página:

    body div#wrapper { margin:0 auto; }

  3. 3

    Outra razão para utilizar este artifício é de agrupar elementos para propósitos de apresentação. Por exemplo, você pode querer um envoltório em torno dos elementos de navegação, talvez com uma borda ou algum preenchimento. Alternativamente você pode querer alinhar a navegação à esquerda ou à direita. Envolvendo a navegação neste tipo de div com um ID, como "NAV" ou "GLOBALNAV", você cria um contêiner, que pode ser estilizado da maneira que quiser.

  4. 4

    Estas divs também podem ser usadas para criar leiautes com CSS. Colunas podem ser criadas dentro desta div. Abaixo você visualiza um leiaute com duas colunas, uma coluna de navegação e a outra para o conteúdo.

    • Existem muitas formas de criar um leiaute com duas colunas, este é só um exemplo.

    #wrapper { position: relative; }

    nav {

    width: 20%; position: absolute; left: 10px; top: 40px; }

    content{

    width: 70%; margin-left: 25%; }

  5. 5

    Estas divs também podem agrupar elementos HTML de forma semântica. Você já viu tais divs com nomes como "content" e "nav". No HTML exibido no passo 2, você viu uma div "wrapper" semântica para o elemento "header". Envolver elementos relacionados estruturalmente e semanticamente fazem parte dos propósitos do elemento div. Uma div nada mais é do que um contêiner genérico que você usa para criar estruturas e apresentações.

Dicas & Advertências

  • Utilizar um ID para identificar um elemento div dá a você formas de estilizá-lo de maneira única. Além disso, efeitos em JavaScript podem ser aplicados neste elemento.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível