[Resolvido] Layout andando
Salve salve meus amigos
Venho mais uma vez trazer um problema que está me deixando meio doido ^^
Já vi e revi o código mais não to conseguindo achar onde estou errando
Seguinte:
Quando eu clico passeio pelos links Home, Apousada e Acomodações eles tem andando dependendo do navegador "estou testando nos principais"
Ex: Quando eu clico para ir para a página A Pousada o layout anda um pouco e anda mais um pouco em Acomodações segue o link aew pra vocês apreciarem hehehe
Detalhe o comportamento está diferente dependendo do navegador
No Chrome A Pousada e Acomodações estão com o mesmo margin mas já a Home não
Já no Mozilla Home e A Pousada estão iguais mas quando clico em Acomodações ele anda....teso eu sei ^^
Segue aew o link desse mistério:
http://magoopv.orgfr...yout-novo/html/
Segue o Código também:
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>Pousada Parnaioca - Venha descançar na Ilha da Parnaioca</title>
<link rel="stylesheet" href="../css/estilo.css" type="text/css" />
</head>
<body id="bgbody">
<div id="wrap">
<div id="bgtopo"></div><!--fecha bgtopo-->
<div id="conteudo">
<h1 id="logo"><a href="index.html" title="Pousada Parnaioca">Pousada Parnaioca</a></h1><!--fecha logo-->
<ul id="menu">
<li><a href="index.html" title="Home">home</a></li>
<li><a href="apousada.html" title="A Pousada">A Pousada</a></li>
<li><a href="acomodacoes.html" title="Acomodações">Acomodações</a></li>
<li><a href="passeios.html" title="Passeios">Passeios</a></li>
<li><a href="fotos.html" title="Fotos">Fotos</li>
<li><a href="praias.html" title="Praias">Praias</a></li>
<li><a href="eventos.html" title="Eventos">Eventos</a></li>
<li><a href="contatos.html" title="Contatos">Contato</a></li>
</ul><!--fecha menu-->
<div id="acomodacoes">
<h1>Acomodações</h1>
<img src="../imagens/separador-texto-apousada.png" width="" height="" alt="" title="" />
</div><!--fecha acomodacoes-->
</div><!--fecha conteudo-->
</div><!--fecha wrap-->
<div id="bgrodape">
<div id="contatorodape">
<p>Copyright 2010 Pousada Parnaioca - Ilha grande</p>
<address>Ilha Grande - Rio de Janeiro | (21) 9999 - 9999</address>
</div><!--fecha contato-rodape-->
</div><!--fecha bgrodape-->
</body>
</html>CSS
{/reset global de propriedades*/
padding:0px;
margin:0px;
border:0px;
list-style:none;
}html, body, #wrap {
height: 100%;
}
#wrap {
height: auto;
min-height: 100%;
background-color:#ffff00;
}#bgtopo{/background do topo/
background-image: url(../imagens/pousada-nuvem-topo.jpg);
height:179px;
min-width:960px;
}#bgbody{/background do body/
background-image: url(../imagens/textura-corpo-site.jpg);
min-height:100px;
}
#conteudo{
width:960px;
margin:auto;
min-height:100px;
position:relative;
background-color:#ff0000;
}/Topo/
#logo a {
float:left;
outline:none;
text-indent:-9999px;
background-image: url(../imagens/logo-pousada-parnaioca.png);
width:261px;
height:126px;
margin:-144px 0px 0px 14px;
}
#menu{margin:-31px 0px 0px 37px
}
#menu li{
float:left;
text-transform: uppercase;
padding-left:20px;
}#menu li a{
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:16px;
color:#ffffff;
}#menu li a:hover,#menu li.ativo a{
color:#04d444;
}
#bannerhome{
margin: 35px 0px 0px 17px;
float:right;
}
#blocoum{
width:247px;
height:302px;
background-image: url(../imagens/bg-bloco.png);
margin:23px 0px 0px 82px;
float:left;
}
#blocodois{
width:247px;
height:302px;
background-image: url(../imagens/bg-bloco.png);
margin:23px 0px 0px 50px;
float:left;
}
#blocotres{
width:247px;
height:302px;
background-image: url(../imagens/bg-bloco.png);
margin:23px 0px 0px 50px;
float:left;
}#blocoum h1{
background-image:url(../imagens/img-texto-passeios.png);
text-indent:-9999px;
float:left;
width:119px;
height:35px;
margin:10px 0px 0px 20px;
}#blocodois h1{
background-image:url(../imagens/img-texto-evento.png);
text-indent:-9999px;
float:left;
width:119px;
height:35px;
margin:10px 0px 0px 20px;
}#blocotres h1{
background-image:url(../imagens/img-texto-como-chegar.png);
text-indent:-9999px;
float:left;
width:191px;
height:49px;
margin:10px 0px 0px 20px;
}#blocoum img, #blocodois img, #blocotres img{
margin:10px 0px 0px 10px;
/border:5px #ff0000;esse border não está funcionando pq isso...perguntar ao professor/
}
#blocoum h2, #blocodois h2{
font-family:"Trebuchet MS";
font-size:15px;
color:#96623b;
margin:10px 0px 0px 10px;
}#blocoum h3, #blocodois h3{
font-family:"Trebuchet MS";
font-size:13px;
color:#a86d41;
margin:5px 0px 0px 10px;
}#blocoum a{
font-family:"Arial";
font-size:13px;
color:#000000;
float:right;margin:-17px 45px 0px 0px
}
#blocoum a:hover{
text-decoration:none;
}#blocoum h4 a{
background-image:url(../imagens/img-valor-paseio.png);
text-indent:-9999px;
float:left;
width:221px;
height:28px;
margin:25px 0px 0px 13px;
}#blocodois h4 a{
background-image:url(../imagens/img-confira-evento.png);
text-indent:-9999px;
float:left;
width:204px;
height:23px;
margin:42px 20px 0px 20px;
}#blocotres h4 a{
background-image:url(../imagens/img-veja-o-mapa.png);
text-indent:-9999px;
float:left;
width:134px;
height:27px;
margin:83px 58px 0px 50px;
}#blocoum h4 a:hover{
background-image:url(../imagens/img-valor-paseio-hover.png);
text-indent:-9999px;
float:left;
width:221px;
height:28px;
margin:25px 0px 0px 13px;
}#blocodois h4 a:hover{
background-image:url(../imagens/img-confira-evento-hover.png);
text-indent:-9999px;
float:left;
width:204px;
height:23px;
margin:42px 20px 0px 20px;
}#blocotres h4 a:hover{
background-image:url(../imagens/img-veja-o-mapa-hover.png);
text-indent:-9999px;
float:left;
width:134px;
height:27px;
margin:83px 58px 0px 50px;
}
#colunaum{
width:351px;
height:351px;
float:left;
margin:100px 54px 65px 105px;
padding-bottom:38px;
}
#colunadois{
width:351px;
height:351px;
float:left;
margin-top:100px;
padding-bottom:38px;
}#colunaum h1{
background-image:url(../imagens/img-texto-conheca-o-livro.png);
text-indent:-9999px;
float:left;
width:260px;
height:40px;
margin:0px 0px 15px 0px;
}#colunadois h1{
background-image:url(../imagens/img-texto-apousada.png);
text-indent:-9999px;
float:left;
width:164px;
height:35px;
margin:0px 0px 20px 0px;
}#colunaum h2, #colunadois h2{
font-family:"Arial";
font-size:20px;
color:#96623b;
margin:18px 0px 13px 0px;
}#colunaum p, #colunadois p{
font-family:"Trebuchet MS";
font-size:17px;
color:#a36d44;
}#colunaum a , #colunadois a{
background-image:url(../imagens/link-saiba-mais.png);
width:73px;
height:35px;
float:right;margin:0px 44px 0px 0px
}
#colunaum a:hover,#colunadois a:hover{
background-image:url(../imagens/link-saiba-mais-hover.png);
}
#bgrodape{
position:relative;
margin-top:-48px;
height:48px;
background-image:url(../imagens/bg-rodape.jpg);
clear:both;
min-width:960px;
}
#contatorodape{
font-family:Arial;
color:#f8d6b2;
text-align:center;
padding-top:5px;
}#contatorodape address{
font-size:13px;
margin:0px 0px 0px 13px;
}/fim da home/
#apousada{
margin:40px 0px 0px 0px;
padding-bottom:38px;
float:left;
}#apousada h1{
background-image:url(../imagens/img-texto-apousada.png);
width:164px;
height:35px;
text-indent:-9999px;
float:left;
margin:0px 0px 18px 40px;
}
.fotopousada1{
margin:30px 30px 0px 20px;
float:left;
}#apousada p{
font-family:"Trebuchet MS";
font-size:15px;
color:#a36d44;
}
.fotopousada2{
float:right;
margin:30px 30px 0px 20px;
}
.apousadaespaco1{
margin:60px;
}
.apousadaespaco2{
margin:132px 0px 0px 20px;
}/fim da apousada/
#acomodacoes{
margin:40px 0px 0px 0px;
padding-bottom:38px;
background-color:#0000ff;
float:left;
}#acomodacoes h1{
background-image:url(../imagens/img-texto-acomodacoes.png);
width:183px;
height:35px;
text-indent:-9999px;
float:left;
margin:0px 0px 18px 40px;
}Discussão (2)
Carregando comentários...