sábado, 9 de abril de 2011

Criação de Layout: Expansível ou Fixo?

Uma das primeiras perguntas que nos fazemos ao começar a pensar num layout é será que dá pra desenvolver na praia? como disponibilizar as informações. Junto com essa pergunta vem uma outra: Layout Expansível (que ocupa toda a àrea do navegador) ou fixo (que fica "preso" a uma determinada àrea independente da resolução da tela)?

Esta é uma questão que somente você e seu cliente podem entrar em guerra acordo.

Então para facilitar nossa vida, vou disponibilizar umas maneiras simples de montar cada um dos tipos. Vamos começar com Layout Expansível.

Como sempre fazemos, vamos começar por partes, abaixo temos o html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <link type="text/css" rel="stylesheet" href="estilo.css" />
  </head>
  <body>
    <div id="cabecalho">
      <h1>Cabeçalho</h1>
    </div>
    <div id="conteudo">
      <div id="esquerda" class="coluna">
        <h2>Coluna Esquerda</h2>
        <p> asuidhiasdhiahd ahsdihaisdhaisdh da sdhisd  adihasidiasdiasdhaisdads dasidhasdhads </p>
      </div>
      <div id="principal">
        <h2>Coluna Principal</h2>
        <p> asuidhiasdhiahd ahsdihaisdhaisdh da sdhisd adihasidiasdiasdhaisdads dasidhasdhads </p>
      </div>
      <div id="direita" class="coluna">
        <h2>Coluna Direita</h2>
        <p> asuidhiasdhiahd ahsdihaisdhaisdh da sdhisd adihasidiasdiasdhaisdads dasidhasdhads </p>
      </div>
    </div>
    <div id="rodape">
      <address>Rua com Endereço, s/n - Lugar - UF</address>
    </div>
  </body>
</html>

Feito o html, chegou a hora de aplicar o css nele. Abaixo temos o CSS:

@charset "utf-8";
/* CSS Document */

#cabecalho, #rodape {
 background-color:#00CCFF;
}

/* Modo Expansível */


#principal {
 margin: 0 200px;
}
#conteudo {
 position: relative;
 min-height: 300px;
}
.coluna {
 background-color:#CCCCCC;
 position: absolute;
 top:0;
 width: 190px;
}
#esquerda {
 left:0;
}
#direita {
 right: 0;
}

/* Modo Fixo */

#centralizador {
 margin: 0 auto;
 width: 900px;
}
#colesq, #coldir {
 float: left;
 width: 150px;
}
#centro {
 float:left;
 width: 600px;
}
#corpo {
 display: table;
}

Finalizando com felicidade o css, poderemos ver a página pronta

Chegou a hora de começarmos a mexer no Layout Fixo, com isso veremos um diferença na criação da página. Segue o código html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <link type="text/css" rel="stylesheet" href="estilo.css" />
  </head>
  <body>
    <div id="centralizador">
      <div id="cabecalho">
        <h1>Cabeçalho</h1>
        <ul id="nav">
          <li><a href="#">Item1</a></li>
          <li><a href="#">Item2</a></li>
          <li><a href="#">Item3</a></li>
          <li><a href="#">Item4</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
          <li><a href="#">Item5</a></li>
        </ul>
      </div>
      <div id="corpo">
        <div id="colesq">
          <h2>Coluna Esquerda</h2>
          <p> asuidhiasdhiahd ahsdihaisdhaisdh da sdhisd adihasidiasdiasdhaisdads dasidhasdhads </p>
        </div>
        <div id="centro">
          <h2>Coluna Principal</h2>
          <p> asuidhiasdhiahd ahsdihaisdhaisdh da sdhisd adihasidiasdiasdhaisdads dasidhasdhads </p>
        </div>
        <div id="coldir">
          <h2>Coluna Direita</h2>
          <p> asuidhiasdhiahd ahsdihaisdhaisdh da sdhisd adihasidiasdiasdhaisdads dasidhasdhads </p>
        </div>
      </div>
      <div id="rodape">
        <address>Rua com Endereço, s/n - Lugar - UF</address>
      </div>
    </div>
  </body>
</html>

Agora, vamos a la playa ao css:

@charset "utf-8";
/* CSS Document */

#cabecalho, #rodape {
 background-color:#00CCFF;
}
/* Modo Fixo */

#centralizador {
 margin: 0 auto;
 width: 900px;
}
#colesq, #coldir {
 float: left;
 width: 150px;
}
#centro {
 float:left;
 width: 600px;
}
#corpo {
 display: table;
}

/* Menu Horizontal */

#nav {
 list-style:none;
 display:table;
 margin:0 auto;
 padding:0;
}
#nav li{
 float:left;
 margin:3px 2px;
}
#nav a {
 background-color:#FFFFFF;
 display:block;
 text-align:center;
 text-decoration:none;
 width:50px;
}
#nav a:hover {
 background-color:#333333;
}

Bons estudos e divirta-se ;-)