Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoas,
Por favor, se tiverem um tempinho em testar o meu layou em vários browsers ficarei grato. Preciso que testem no FF 2.x, IE 6.x etc. No Windows está belezinha no IE 7.x e FF 3.x.
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rodape fixo no fim da página</title>
<style type="text/css" media="all"> height:100%;
} margin:0;
padding:0;
background:#ddd;
color:#666;
font:75%/1.4 Verdana, Arial, Helvetica, sans-serif;
text-align:center;
} height: 100%;
}
#Tudo {
width:100%;
min-height:100%;
background-color: #336633;
position: relative;
}
#AreaCabecalho {
background-color: #99CC00;
height: 140px;
width: 100%;
}
#AreaMenuEsquerdo_AreaConteudo {
width:1000px;
position:relative;
background-color:#CCCCCC;
margin:0 auto;
text-align:left;
}
#AreaConteudo {
background-color: #FFCC00;
float: right;
width: 828px;
padding-left: 5px;
padding-top: 10px;
padding-bottom: 145px;
}
#AreaMenuEsquerdo {
background-color: #CC0000;
width: 167px;
float:left;
text-align:left;
padding-top: 10px;
padding-bottom: 145px;
}
#AreaRodape {
background-color: #0099FF;
text-align: left;
height: 140px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div id="Tudo">
<div id="AreaCabecalho">AreaCabecalho AreaCabecalho AreaCabecalho AreaCabecalho AreaCabecalho</div>
<div id="AreaMenuEsquerdo_AreaConteudo">
<div id="AreaMenuEsquerdo">Content for id "AreaMenuEsquerdo" Goes Here</div>
<div id="AreaConteudo">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin ultrices, augue eu scelerisque iaculis, augue mi placerat turpis, eget laoreet velit odio cursus tortor. Mauris hendrerit orci vel nisl. Nulla non lacus eu nibh aliquet cursus. Donec pulvinar, sem facilisis pharetra ultricies, augue erat cursus erat, quis vulputate mi felis sed nibh. Phasellus rutrum imperdiet metus. Vestibulum elementum vulputate arcu. Morbi pellentesque ipsum eu nunc. Nulla at nulla et ante eleifend facilisis. Morbi orci lectus, rutrum a, imperdiet vel, imperdiet eget, metus. Quisque ac enim sed odio feugiat ultrices. Ut feugiat malesuada leo. Pellentesque consectetuer arcu non neque. </p>
<p>Suspendisse in erat nec orci tincidunt hendrerit. Mauris euismod posuere diam. Aenean ligula ipsum, mattis aliquam, imperdiet et, tincidunt vel, odio. Sed malesuada magna sit amet turpis. Proin sit amet eros ornare ipsum ultricies volutpat. Nam turpis sapien, laoreet et, ullamcorper vel, iaculis vel, metus. Proin felis sapien, scelerisque sit amet, dapibus in, tincidunt et, risus. Nam tempor purus ut metus rutrum pharetra. Morbi purus nibh, ullamcorper a, venenatis id, luctus eu, eros. Aenean id dolor. Cras urna. Sed sollicitudin urna eget ante. </p>
<p>In feugiat, libero in commodo euismod, quam erat lacinia quam, interdum feugiat magna leo non velit. Quisque bibendum massa et ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ipsum dui, interdum vel, tempor in, bibendum eget, mauris. Pellentesque justo eros, tincidunt eget, adipiscing vel, convallis in, nisi. Aliquam sollicitudin pede a metus. Suspendisse malesuada. Praesent tincidunt egestas quam. Mauris venenatis egestas leo. Aenean mattis. Suspendisse ut ligula nec nisi luctus egestas. Mauris eget erat in urna porta ullamcorper. </p>
<p>Ut mollis elit nec sem. In sed felis. Fusce congue quam vel sapien. Pellentesque adipiscing quam eu ante. Curabitur nisl justo, euismod vitae, eleifend vel, euismod et, nisi. Cras mi. Suspendisse turpis enim, varius adipiscing, dignissim eu, dapibus eget, magna. Fusce vehicula orci. Nunc in augue non augue tempor scelerisque. Ut auctor, velit sed sodales tempus, nibh dui dictum nunc, quis faucibus nisi massa in leo. Sed porttitor lorem eget dui. Nam mollis venenatis ipsum. Curabitur ultricies erat eu orci. </p>
<p>Nunc ac nibh. Aliquam erat volutpat. Mauris bibendum tincidunt risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris massa felis, aliquam eu, pretium at, elementum eget, purus. Sed tincidunt, nibh eget mollis tempor, pede justo rhoncus risus, quis sagittis nisi diam vel pede. Duis fringilla odio in mauris. Cras nec eros eu nulla laoreet tempor. Pellentesque tellus neque, pulvinar ac, iaculis cursus, tempus nec, urna. Aliquam erat volutpat. Morbi mauris ligula, rhoncus non, commodo et, feugiat non, nunc. Ut at turpis.<br />
<br />
Ut mollis elit nec sem. In sed felis. Fusce congue quam vel sapien. Pellentesque adipiscing quam eu ante. Curabitur nisl justo, euismod vitae, eleifend vel, euismod et, nisi. Cras mi. Suspendisse turpis enim, varius adipiscing, dignissim eu, dapibus eget, magna. Fusce vehicula orci. Nunc in augue non augue tempor scelerisque. Ut auctor, velit sed sodales tempus, nibh dui dictum nunc, quis faucibus nisi massa in leo. Sed porttitor lorem eget dui. Nam mollis venenatis ipsum. Curabitur ultricies erat eu orci. <br />
<br />
_ FIM DA LINHA _</p>
</div>
<p> </p>
</div>
<div class="clear"></div>
</div>
<div id="AreaRodape">Content for id "AreaRodape" Goes Here</div>
</div>
</body>
</html>Carregando comentários...