Boa tarde :) Bom,estou fazendo um site para a loja da minha mãe,e estou tendo alguns problemas... Link pro site com upload na XPG: http://www.lucastabeliniweb.xpg.com.br/ Percebam que o rodapé está no meio da caixa "categoria" e a maior(conteúdo). Ela não deveria estar ai,deveria estar lá embaixo =/ O estranho é que no Dreamweaver aparece do mesmo jeito que no site online,mas,quando eu rodo o site no Google Chrome,ele roda certo. Aqui o código fonte para vocês analizarem: <!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>Eko Mark Modas</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
@font-face
{
font-family:AUdimat;
src:url('AUdimat-Regular.otf');
}
body{
background-image:url('bg.png')
}
#topo{
width:1024px;
margin-left:-8px;
margin-top:-8px;
height:230px;
background-color:#333;
}
.logo{
margin-left:25px;
margin-top:75px;
}
#menu{
width:1024px;
height:75px;
background-color:#E56464;
margin-left:-8px;
}
.botoes{
width:1000px;
height:75px;
list-style:none;
margin:0px;
}
.botoes li{
float:left;
margin:25px;
padding:0px;
}
.botoes li a{
text-decoration:none;
font-family:AUdimat;
font-size:24px;
color:#C43131;
}
.botoes li a:hover{
//background-color:#C43131;
color:#FFF;
}
.sociais{
position:absolute;
margin-left:750px;
padding:20px;
padding-right:10px;
}
.sociais:hover{
transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1); /* IE 9 */
-webkit-transform: scale(1.1,1.1); /* Safari and Chrome */
-o-transform: scale(1.1,1.1); /* Opera */
-moz-transform: scale(1.1,1.1); /* Firefox */
box-shadow: 2px 2px 5px #888888;
}
#conteudo{
background-color:#ECDFDF;
width:700px;
height:900px;
margin-left:10px;
margin-top:10px;
outline:1px solid #D1AFAF;
float:left;
}
#mais{
width:270px;
height:900px;
background-color:#ECDFDF;
outline:1px solid #D1AFAF;
float:right;
margin-top:10px;
}
#categorias-label{
background-color:#E56464;
width:270px;
height:50px;
margin-top:-22px;
font-family:AUdimat;
color:#C43131;
font-size:18px;
text-align:center;
padding-top:0px;
}
.categorias{
list-style:none;
margin-top:30px;
margin-left:-25px;
text-align:left;
color:#C43131;
}
#foot{
width:1024;
height:75px;
background-color:#E56464;
float:center;
bottom:0;
overflow:hidden;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
color:#FFF;
}
</style>
</head>
<body>
<div id="topo">
<a href="#"><img class="logo" src="http://i.imgur.com/OR3P1.png" alt="Logo"></a>
</div>
<div id="menu">
<ul class="botoes">
<li><a href="#" alt="Home">HOME</li></>
<li><a href="#" alt="Sobre">SOBRE</li></>
<li><a href="#" alt="Produtos">PRODUTOS</li></>
<li><a href="#" alt="Contato">CONTATO</li></>
<div class="sociais">
<a class="icones" href="http://www.facebook.com" target="_blank"><img src="face.png" alt="Facebook"></a>
<a class="icones" href="http://www.twitter.com" target="_blank"><img src="twitter.png" alt="Twitter"></a>
<a class="icones" href="#"><img src="rss.png" alt="RSS"></a>
</div>
</ul>
</div>
<div id="conteudo">
</div>
<div id="mais">
<div id="categorias-label">
<h2>Categorias</h2>
<ul class="categorias">
<li>Masculino</li>
<li>Feminino</li>
<li>Casacos</li>
</ul>
</div>
</div>
<div id="foot">
<p style="margin-top:30px; font-size:14px;">2012.Todos os direitos reservados.<br>Desenvolvido por Lucas Tabelini.</p>
</div>
</body>
</html> Informações : O rodapé está com o CSS "foot"