[codebox]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout teste!!!</title>
<style type="text/css">
body {
background-color: #EDEDED;
font-family: Verdana;
font-size: 11px;
color: #333333;
text-align: center;
margin: 0px;
}
#page {
width: 600px;
background-color: #FFFFFF;
text-align: left;
margin-left: auto;
margin-right: auto;
}
#login {
width: 100%;
color: #FFFFFF;
height: 20px;
text-align: right;
background-color: #000066;
margin-bottom: 10px;
}
#header {
background-color: #0066FF;
width: 600px;
height: 170px;
}
#content {
width: 590px;
padding-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
float: left;
}
#footer {
background-color: #000066;
width: 100%;
height: 70px;
background-position: bottom;
clear: both;
}
</style>
</head>
<body>
<div id="login">Isto aqui parece muito divertido!!! Ou não...</div>
<div id="page">
<div id="header"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lorem. Suspendisse pretium lacus at neque. Donec arcu. In in lectus tincidunt enim feugiat imperdiet. Vestibulum urna erat, consectetur quis, semper sed, dictum sed, ipsum. Integer consequat egestas nisi. Mauris eget odio viverra tellus accumsan lacinia. Sed rhoncus ligula sed tortor. Nullam semper erat quis orci. Nullam ultricies, nunc in vestibulum venenatis, ante eros porta metus, quis congue lacus tortor non magna. Suspendisse pulvinar lorem sed libero.
<br />
Nam sagittis leo ac nibh. Quisque eu quam. Cras sapien dui, venenatis at, condimentum in, sollicitudin at, odio. Aliquam massa est, scelerisque sit amet, suscipit quis, pharetra et, tellus. Vivamus quis neque. Sed lacus nisl, mollis quis, feugiat cursus, mattis ac, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi eu felis eu ligula gravida convallis. Curabitur nisl. Fusce nisl metus, sodales ut, euismod at, ullamcorper sed, libero. Nunc quam nisl, cursus a, rutrum sit amet, pulvinar ac, neque.
</div>
<div id="footer"></div>
</div>
</body>
</html>[/codebox]
E se ponho fora do alinhamento "page", esse atributo desaparece por completo!
[codebox]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout teste!!!</title>
<style type="text/css">
body {
background-color: #EDEDED;
font-family: Verdana;
font-size: 11px;
color: #333333;
text-align: center;
margin: 0px;
}
#page {
width: 600px;
background-color: #FFFFFF;
text-align: left;
margin-left: auto;
margin-right: auto;
}
#login {
width: 100%;
color: #FFFFFF;
height: 20px;
text-align: right;
background-color: #000066;
margin-bottom: 10px;
}
#header {
background-color: #0066FF;
width: 600px;
height: 170px;
}
#content {
width: 590px;
padding-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
float: left;
}
#footer {
background-color: #000066;
width: 100%;
height: 70px;
background-position: bottom;
clear: both;
}
</style>
</head>
<body>
<div id="login">Isto aqui parece muito divertido!!! Ou não...</div>
<div id="page">
<div id="header"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lorem. Suspendisse pretium lacus at neque. Donec arcu. In in lectus tincidunt enim feugiat imperdiet. Vestibulum urna erat, consectetur quis, semper sed, dictum sed, ipsum. Integer consequat egestas nisi. Mauris eget odio viverra tellus accumsan lacinia. Sed rhoncus ligula sed tortor. Nullam semper erat quis orci. Nullam ultricies, nunc in vestibulum venenatis, ante eros porta metus, quis congue lacus tortor non magna. Suspendisse pulvinar lorem sed libero.
<br />
Nam sagittis leo ac nibh. Quisque eu quam. Cras sapien dui, venenatis at, condimentum in, sollicitudin at, odio. Aliquam massa est, scelerisque sit amet, suscipit quis, pharetra et, tellus. Vivamus quis neque. Sed lacus nisl, mollis quis, feugiat cursus, mattis ac, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi eu felis eu ligula gravida convallis. Curabitur nisl. Fusce nisl metus, sodales ut, euismod at, ullamcorper sed, libero. Nunc quam nisl, cursus a, rutrum sit amet, pulvinar ac, neque.
</div>
</div>
<div id="footer"></div>
</body>
</html>[/codebox]
Alguém me ajuda a obter um footer 100% que se estenda por todo o layout sem estragar alguma coisa? Obrigada desde já!!!
