Neste post trago até vocês um código pronto de layout de site que pode ser transformado em fixo ou fluido mudando apenas uma linha do código CSS. Pra quem não sabe, layout fluido é aquele que tem a largura da janela do navegador, e layout fixo é aquele que tem uma largura fixa.
Vamos ao código então:
Código da página index.htm
<!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=iso-8859-1" />
<title>Layout fixo/fluido</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="geral">
<div id="cabecalho">
<h1>Cabealho da pgina</h1>
</div>
<div id="esquerda">
<h2>Lateral esquerda</h2>
</div>
<div id="direita">
<h2>Lateral diretia</h2>
</div>
<div id="centro">
<h2>Centro da pgina</h2>
</div>
<div></div>
<div id="rodape">
<h3>Rodap da pgina</h3>
<h4><a href="http://www.rbtech.info" target="_blank">Criado por www.rbtech.info</a></h4>
</div>
</div>
</body>
</html>Código do arquivo estilo.css
*{
margin:0;
padding:0;
}
#geral{
width:960px; /* Excluindo esta linha vc tem um layout fuido */
margin:0 auto;
}
#cabecalho{
background:#0099FF;
padding:10px;
}
#rodape{
background:#0099FF;
padding:10px;
text-align:center;
}
#esquerda{
width:197px;
background:#999999;
padding:3px;
float:left;
}
#direita{
width:197px;
background:#999999;
padding:3px;
float:right;
}
#centro{
background:#FFFF66;
margin:0 200px; /* a margem colocada aqui deve ser sempre a largura da
coluna da esquerda */
padding:3px;
}
.clear{clear:both;}
Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.
Atualmente temos 5 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.
Cara!
Demais realmente entendi com funciona o Float.
Obs.: relacionado ao entendimento Float.
Obrigado..
mas qual e vantangem e desvantagem de um para o outro?
ResponderRicardo,
Realmente quando não se define a "width" o layout fica fluido, mas o exemplo que você deu, no caso, ficaria muito difícil para trabalhar posteriormente, pois se você acessar de um tablet,por exemplo, um slider, ele não ficaria fluido e desconfiguraria sua página inteira.
Espero que tenha me entendido !
Vi que o artigo é de 2010, quando o assunto ainda não era muito falado, então entendo o artigo ! (risos)
Mas hoje é INCRÍVEL este tipo de "exceção" nas páginas web.
E parabéns pelo blog !
EXCELENTE !!!
Att,
Lucca
Responder
© 2008-2018 - RBTech.info | Todos os direitos reservados | Hospedado por Innova Host
É proibida a reprodução total ou parcial de qualquer conteúdo deste site.
<3
Não sabe por quanto estou tentado fazer meu layout ficar fixo...