Lição 14: Posicionando elementos

O princípio de posicionamento CSS

Considere a janela do navegador como um sistema de coordenadas:

O princípio de posicionamento CSS estabelece que você pode posicionar um elemento em qualquer lugar na tela usando um sistema de coordenadas.

Vamos supor que queremos posicionar um cabeçalho. Usando o box model (ver lição 9) o cabeçalho pode ser estilizado para ser apresentado como mostrado abaixo:

Se quisermos o cabeçalho posicionado a 100px do topo do documento e a 200px à esquerda, podemos usar o seguinte CSS:

  h1 {   position:absolute;   top: 100px;   left: 200px;  }    

O resultado é mostrado a seguir:

Como você pode ver, posicionar com CSS é uma técnica precisa para colocar elementos. É muito mais fácil do que usar tabelas, imagens transparentes e tudo mais.

Posicionamento absoluto

Um elemento posicionado absolutamente não cria nenhum espaço no documento. Isto significa que não deixa nenhum espaço vazio após ser posicionado.

Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute. Você pode então usar as propriedades left, right, top, e bottom para definir as coordenadas e posicionar o elemento.

Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro cantos da página:

  #box1 {   position:absolute;   top: 50px;   left: 50px;  }    #box2 {   position:absolute;   top: 50px;   right: 50px;  }    #box3 {     position:absolute;   bottom: 50px;   right: 50px;  }    #box4 {   position:absolute;   bottom: 50px;   left: 50px;  }    

• Ver exemplo

Posicionamento relativo

Para posicionar um elemento de forma relativa a propriedade position deve ser definida para relative. A diferença entre os dois tipos de posicionamento é a maneira como o posicionamento é calculado.

O posicionamento para posição relativa é calculado com base na posição original do elemento no documento. Isto significa uma movimentação do elemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo o elemento ocupa um espaço após ser posicionado.

Como exemplo de posicionamento relativo vamos tentar posicionar três imagens relativamente as suas posições originais na página. Notar como as imagens deixam um espaço vazio nas suas posições originais no documento:

  #dog1 {   position:relative;   left: 350px;   bottom: 150px;  }  #dog2 {   position:relative;   left: 150px;   bottom: 500px;  }    #dog3 {   position:relative;   left: 50px;   bottom: 700px;  }    

• Ver exemplo

Sumário

Nas duas lições anteriores você aprendeu como flutuar e posicionar elementos. Estes dois métodos posibilitam a você construir o layouy sem uso das ultrapassadas tabelas e imagens transparentes no HTML. Use CSS. É mais preciso, mais vantajoso e muito mais fácil de manutenir.

Lição 13: Flutuando elementos (floats)

Um elemento pode ser 'flutuado' à esquerda ou à direita com uso da propriedade float. Isto significa que o box e seu conteúdo são deslocados para a direita ou para a esquerda do documento (ou do bloco container) (ver lição 9 para descrição do Box model). A figura a seguir ilustra o princípio de float:

Se desejamos que um texto seja posicionado em volta de uma figura como mostrado abaixo, basta flutuarmos a imagem:

Como isto é feito ?

O HTML para o exemplo acima é mostrado a seguir:

  <div id="picture">   <img src="bill.jpg" alt="Bill Gates">  </div>    <p>causas naturales et antecedentes,   idciro etiam nostrarum voluntatum...</p>    

Para conseguir o efeito mostrado, basta definir uma largura para o box que o contém e declarar para ele float: left;

  #picture {   float:left;   width: 100px;  }    

• Ver exemplo

Outro exemplo : colunas

Floats podem ser usados para construir colunas em um documento. Para criar as colunas estruturamos as colunas no código HTML usando <div> como mostrado a seguir:

  <div id="column1">   <p>Haec disserens qua de re agatur   et in quo causa consistat non videt...</p>  </div>    <div id="column2">   <p>causas naturales et antecedentes,    idciro etiam nostrarum voluntatum...</p>  </div>    <div id="column3">   <p>nam nihil esset in nostra    potestate si res ita se haberet...</p>  </div>    

A seguir definimos a largura de cada coluna, por exemplo 33%, e declaramos float: left; para cada uma das colunas:

  #column1 {   float:left;   width: 33%;  }    #column2 {   float:left;   width: 33%;  }    #column3 {   float:left;   width: 33%;  }    

• Ver exemplo

float pode ser declarado left, right ou none.

A propriedade clear

A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento.

Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do elemento flutuado. Veja no exemplo acima que o texto deslocou-se automaticamente para o lado da foto de Bill Gates.

A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se clear, for por exemplo definido both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código.

  <div id="picture">   <img src="bill.jpg" alt="Bill Gates">  </div>    <h1>Bill Gates</h1>    <p class="floatstop">causas naturales et antecedentes,   idciro etiam nostrarum voluntatum...</p>    

Para evitar que o texto se posicione no espaço livre deixado pela foto do Bill Gates basta adicionar a seguinte regra CSS:

  #picture {   float:left;   width: 100px;  }    .floatstop {   clear:both;  }    

• Ver exemplo

Sumário

Floats são muito úteis em várias situações e frequentemente usados em conjunto com posicionamento. Na próxima lição veremos como posicionar um box tanto de maneira relativa como absoluta.

Lição 12: Altura e largura

Atribuindo largura [width]

A propriedade width destina-se a definir a largura de um elemento.

O exemplo a seguir constrói um box dentro do qual podemos digitar um texto:

  div.box {   width: 200px;   border: 1px solid black;   background: orange;  }    

• Ver exemplo

Atribuindo altura [height]

No exemplo acima a altura será determinada pelo conteúdo inserido no box. Você pode definir a altura de um elemento com a propriedade height. Como exemplo, vamos fazer a altura do box anterior igual a 500px:

  div.box {   height: 500px;   width: 200px;   border: 1px solid black;   background: orange;  }    

• Ver exemplo

Sumário

Nas Lições9, 10, 11 e 12 você aprendeu os fundamentos do box model em CSS. Como podemos notar o box model fornece uma série de novas opções de estilização. Até agora, você deve ter usado tabelas para criar seus layouts, porém com CSS e o box model você, a partir de agora, estará capacitado a criar layouts mais elegantes, precisos e em conformidade com as recomendações do W3C.

Lição 11: Bordas

Definindo margin de um elemento

Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A margin é a distância entre os lados de elementos vizinhos (ou às bordas do documento). Ver o diagrama mostrado na lição 9.

Vamos começar com um exemplo mostrando como definir margins para o documento, ou seja, para o elemento <body>. A ilustração a seguir mostra como serão as margens da página.

As CSS são mostradas abaixo:

  body {   margin-top: 100px;   margin-right: 40px;   margin-bottom: 10px;   margin-left: 70px;  }    

Ou, adotando uma sintaxe mais elegante:

  body {   margin: 100px 40px 10px 70px;  }    

• Ver exemplo

As margens para a maioria dos elementos pode ser definida conforme o exemplo acima. Podemos então, por exemplo, definir margens para todos os parágrafos <p>:

  body {   margin: 100px 40px 10px 70px;  }    p {   margin: 5px 50px 5px 50px;  }    

• Ver exemplo

Definindo padding de um elemento

Padding pode também ser entendido como "enchimento". Isto faz sentido, porque padding não é computado na distância entre elementos, padding define simplesmente a distância entre a borda e o conteúdo do elemento.

Ilustramos o uso de padding através de um exemplo onde todos os cabeçalhos têm uma cor de fundo definida:

  h1 {   background: yellow;  }    h2 {   background: orange;  }    

• Ver exemplo

Definindo padding para os cabeçalhos, alteramos a quantidade de enchimento existente ao redor de cada um deles:

  h1 {   background: yellow;   padding: 20px 20px 20px 80px;  }    h2 {   background: orange;   padding-left:120px;  }    

• Ver exemplo

Sumário

Você está no caminho para se tornar um mestre em CSS box model. Na próxima lição veremos com detalhes como atribuir bordas coloridas e formas aos elementos.

Lição 10: Margin e padding

Definindo margin de um elemento

Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A margin é a distância entre os lados de elementos vizinhos (ou às bordas do documento). Ver o diagrama mostrado na lição 9.

Vamos começar com um exemplo mostrando como definir margins para o documento, ou seja, para o elemento <body>. A ilustração a seguir mostra como serão as margens da página.

As CSS são mostradas abaixo:

  body {   margin-top: 100px;   margin-right: 40px;   margin-bottom: 10px;   margin-left: 70px;  }    

Ou, adotando uma sintaxe mais elegante:

  body {   margin: 100px 40px 10px 70px;  }    

• Ver exemplo

As margens para a maioria dos elementos pode ser definida conforme o exemplo acima. Podemos então, por exemplo, definir margens para todos os parágrafos <p>:

  body {   margin: 100px 40px 10px 70px;  }    p {   margin: 5px 50px 5px 50px;  }    

• Ver exemplo

Definindo padding de um elemento

Padding pode também ser entendido como "enchimento". Isto faz sentido, porque padding não é computado na distância entre elementos, padding define simplesmente a distância entre a borda e o conteúdo do elemento.

Ilustramos o uso de padding através de um exemplo onde todos os cabeçalhos têm uma cor de fundo definida:

  h1 {   background: yellow;  }    h2 {   background: orange;  }    

• Ver exemplo

Definindo padding para os cabeçalhos, alteramos a quantidade de enchimento existente ao redor de cada um deles:

  h1 {   background: yellow;   padding: 20px 20px 20px 80px;  }    h2 {   background: orange;   padding-left:120px;  }    

• Ver exemplo

Sumário

Você está no caminho para se tornar um mestre em CSS box model. Na próxima lição veremos com detalhes como atribuir bordas coloridas e formas aos elementos.

Lição 9: O box model

O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML. O box model, detalha ainda, as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento. Abaixo apresentamos um diagrama representando a estrutura de construção do box model:

O box model em CSS

A ilustração acima é teórica. Vamos explicá-la na prática tomando como base um cabeçalho e um texto. O HTML para nosso exemplo (o texto foi retirado da Declaração Universal dos Direitos Humanos e está no original em inglês) é o mostrado abaixo:

  <h1>Article 1:</h1>    <p>All human beings are born free  and equal in dignity and rights.  They are endowed with reason and conscience  and should act towards one another in a  spirit of brotherhood</p>    

Definindo estilos para cores e fontes o exemplo pode ser apresentado como a seguir:

O exemplo contém dois elementos: <h1> e <p>. O box model para os dois elementos é mostrado a seguir:

Embora possa parecer um pouco complicado, a ilustração mostra como cada um dos elementos é contido em um box (uma caixa). Boxes que podem ser ajustados e controlados via CSS.

Sumário

Nesta lição você foi apresentado ao box model. Nas três lições seguintes iremos detalhar como criar e controlar elementos no box model.

Lição 8: Agrupando elementos (span e div)

Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id.

Nesta lição veremos com detalhes o uso dos elementos HTML <span> e <div> no que se refere a sua vital importância para as CSS.

• Agrupando com <span>


• Agrupando com<div>

Agrupando com <span>

O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento.

Um exemplo deste uso é mostrado na citação abaixo de autoria de Benjamin Franklin:

  <p>Dormir cedo e acordar cedo faz o homem
saudável, rico e sábio.</p>    

Vamos supor que queremos enfatizar na cor vermelha os benefícios apontados por Mr. Franklin pelo fato de não se passar o dia dormindo. Para isto marcamos os benefícios com <span>. A cada span atribuímos uma class, e estilizamos na folha de estilos:

  <p>Dormir cedo e acordar cedo faz o homem
<span class="benefit">saudável</span>,
<span class="benefit">rico</span>
e <span class="benefit">sábio</span>.</p>    

A folha de estilos:

  span.benefit {   color:red;  }    

• Ver exemplo

É claro que você pode usar id para estilizar o elemento <span>. Mas, como você deve estar lembrado, deverá usar uma única id para cada um os três elementos <span>, conforme foi explicado na lição anterior.

Agrupando com <div>

Enquanto <span> é usado dentro de um elemento nível de bloco como vimos no exemplo anterior, <div> é usado para agrupar um ou mais elementos nível de bloco.

Diferenças à parte, o agrupamento com <div> funciona mais ou menos da mesma maneira. Vamos ver um exemplo tomando duas listas de presidentes dos Estados Unidos agrupados segundo suas filiações políticas:

  <div id="democrats">  <ul>  <li>Franklin D. Roosevelt</li>  <li>Harry S. Truman</li>  <li>John F. Kennedy</li>  <li>Lyndon B. Johnson</li>  <li>Jimmy Carter</li>  <li>Bill Clinton</li>  </ul>  </div>    <div id="republicans">  <ul>  <li>Dwight D. Eisenhower</li>  <li>Richard Nixon</li>  <li>Gerald Ford</li>  <li>Ronald Reagan</li>  <li>George Bush</li>  <li>George W. Bush</li>  </ul>  </div>    

E na folha de estilos, podemos agrupar a estilização da mesma maneira como fizemos no exemplo acima:

  #democrats {   background:blue;  }    #republicans {   background:red;  }    

• Ver exemplo

Nos exemplos mostrados acima usamos somente <div> e <span> para simples estilizações, tais como cores de textos e de fundos. Contudos estes dois elementos possibilitam estilizações bem mais avançadas como veremos adiante nas lições deste tutorial.

Sumário

Na lição7 e 8 você aprendeu seletores id e class e elementos <span> e <div>.