[Resolvido] Layout andando

MagooPV · Dezembro 22, 2010

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;
}

CarlosMarx · Dezembro 23, 2010

Caro MagooPV, você atentou para o detalhe de que as páginas pousada e acomodações são bem menores na "altura" que a home? Na home é inserida a barra de rolagem vertical (lateral) para que você possa descer a página. Como nas páginas internas o conteúdo é pequeno ou mesmo não existe, não é necessário a barra, sendo que a mesma consome um pequeno espaço do navegador (14px se não me engano, pesquise aí depois). Solução? Aplique um

min-height:XXXpx

nas suas divs.

MagooPV · Dezembro 23, 2010

Vlw mesmo meu amigo era isso

Pô nunca que ia passar isso pela minha cabeça meu caro

Vivendo e aprendendo...sempre

Bom que agora isso não vai rolar mais comigo hehehe

Abraços

Entrar

Arquivado

[Resolvido] Layout andando

Recommended Posts

MagooPV 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

CarlosMarx 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

MagooPV 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante