Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Scaico

Site criando barra de rolagem horizontal

Por , em Desenvolvimento frontend

Recommended Posts

Scaico    0

Scaico
Postado

Oi galera, beleza?

 

Estou terminando mais um site e me deparei com um problema bizarro:

 

No Firefox, a home do site está criando uma barra de rolagem horizontal, porem não existe nenhum conteúdo que justifique isso.

 

(Edit: Não está mais mostrando pois usei "Overflow-x:hidden" no body... mas considero isso uma "gambiarra"... se alguem souber como resolver sem usar o overflow-x:hidden, fico grato)

 

O Código da home é o seguinte:

<!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=iso-8859-1" />
<title>Reciclagem</title>
<link href="estilos.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
<center>
<div id="geral">
<div id="logo"><h1></h1><a href="index.asp"><img src="imagens/logo.jpg" width="197" height="128" alt="logotipo" border="0" /></a></div>
<div id="topo">
<div id="botaohome"><a href="index.asp"><img src="imagens/bt_home.jpg" align="top" alt="Home" border="0"></img> HOME</a></div>
<div id="botaocontato"><a href="contato.asp"><img src="imagens/bt_contato.jpg" align="top" alt="Contato" border="0"></img> CONTATO</a></div>
</div>
<div id="tarjahome">
<div id="menu" class="menuhome">
<ul class="menu">
<li class="menu"><a href="missao.asp">Empresa</a></li>
<li class="menu"><a href="desen.asp">Meio-Ambiente</a></li>
<li class="menu"><a href="compo.asp">Vidro</a></li>
<li class="menu"><a href="compra.asp">Serviços</a></li>
</ul>
</div>
</div>
</div>
<div style="width:700px">
<div id="assinatura">2008 - Todos os direitos reservados</div>
<div id="ppcm">Por <a href="http://www.padovaniprado.com.br">PPCM</a></div>
</div>
</center>
</body>
</html>

E o CSS (apenas o que influencia a Home. O resto eu não estou colando por achar que não é relevante):

* {
	padding:0;
	margin:0;
	}

body {
	margin:20px;
	margin-top:0px;
	font-family:"Tahoma", Arial, Sans-Serif;
	background-color: #50685B;
	text-align:center;
	font-size: 12px;
	}

div {
	/*border:1px solid gray;*/
	}

div#geral {
	width:700px;
	background-color:#FFFFFF;
		}

div#logo {
	width:197px;
	height:128px;
	margin:0px;
	float:left;
	overflow:hidden;
	background-image:url(imagens/logo.jpg);
	background-repeat:no-repeat;
	}

#logo h1 {
	display:none;
		}

#tarjaesquerda {
	width:197px;
	height:15px;
	float:left;
	background-color:#98b3a4;
	   }

div#topo {
	width:503px;
	height:128px;
	float:left;
	background-color:#FFFFFF;
	}

#tarjadireita {
	width:503px;
	height:15px;
	float:left;
	background-color:#459067;
	   }

div#botaohome {
	font-size:8px;
	font-weight:bold;
	width:55px;
	height:15px;
	float:right;
	position:relative;
	right: 95px;
	top: 100px;
	}
	
div#botaocontato {
	font-size:8px;
	font-weight:bold;
	width:70px;
	height:15px;
	float:right;
	position:relative;
	left: 40px;
	top: 100px;
	}
	
div#tarjahome {
	width:700px;
	height:241px !important;
	height:270px;
	clear:both;
	background-image:url(imagens/tarja_home.jpg);
	background-repeat:no-repeat;
	margin:0px;
	border-top-color:#459067;
	border-top-style:solid;
	border-top-width:15px;
	border-bottom-color:#98b3a4;
	border-bottom-style:solid;
	border-bottom-width:15px;
	   }
		
div#menu {
	width:400px;
	height:50px;
	font-family:Tahoma;
	font-size:15px;
	color:#CCCCCC;
	display:inline;
	position:relative;
	top:30px;
	left:174px !important;
	left:123px;
	text-align:left;
		}

ul.menu {
		width:400px;
		}

#menu.menuhome {
	left:370px !important;
	left:220px;
		}

ul.menu li {
	display:inline;
	padding-right:13px;
	}

div#assinatura {
	width:450px;
	text-align:left;
	float:left;
	padding-left:10px;
	padding-top:5px;
	color:#FFFFFF;
	font-size:10px;
	   }

div#ppcm {
	width:70px;
	text-align:right;
	padding-right:10px;
	padding-top:5px;

	float:right;
	font-size:10px;
		}

Alguem tem uma ideia do que pode estar causando essa rolagem horizontal?

 

(PS: Sei que o CSS está meio "sujo". Pretendia limpar ele assim que o site estivesse funcionando perfeitamente bem.)

 

Abraços,

Compartilhar este post

Link para o post
Compartilhar em outros sites

Scaico    0

Scaico
Postado

Fala Aprendiz, beleza?

 

Eu concordo que ha uma possibilidade de eu ter sido vitima da Div Mania. Durante toda a execução do projeto eu ficava me perguntando se não teria como diminuir a quantidade de divs. E eu acredito que isso seja possível.

 

Valeu pelo link e pela dica...

\o

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Fala Aprendiz, beleza?

 

Eu concordo que ha uma possibilidade de eu ter sido vitima da Div Mania. Durante toda a execução do projeto eu ficava me perguntando se não teria como diminuir a quantidade de divs. E eu acredito que isso seja possível.

 

Valeu pelo link e pela dica...

\o

Isso que acabou de comentar é normal, acontece com todos...

mas perceberá que daqui um tempo, você começará a fazer as coisas certas! sem nem perceber!

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Scaico    0

Scaico
Postado

É só uma questão de treino, eu suponho... :D

 

Já consegui eliminar duas divs... usando o "border-bottom" das divs acima, nao existe mais a necessidade de duas divs só para "cores"...

Vou continuar :D

 

Valeu Aprendiz!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

WillianAndrade    0

WillianAndrade
Postado

falai Scaico

beleza ?

 

então

dei uma olhada no link

 

e consegui solucionar

 

o que eu fiz?

 

1º - retirei o overflow-x do body

2º - retirei o 'left' que você usou na linha 175 (#menu.menuhome) do seu css

3º - na linha 171, coloquei uma margem (ul.menu {width:400px; margin-left:196px;})

 

notei que você usou a tag <center> para centralizar seu site, isso é uma 'gambiarra' tb, como você disse, rsrs

existem boas maneiras para fazer isso (y)

 

 

beleza?

 

testa ai e ver se deu certo

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Scaico    0

Scaico
Postado

Fala William, belezinha?

 

Ontem, quando tava limpando meu código cheio de DIVS (sim, fui vitima da Div-Mania... reduzi o número de DIVS das páginas de 20 para 11... e daria para fazer menos, talvez...) o Aprendiz me deu uma sugestão bem útil:

 

Mudar o menu, tirando o "display:inline" e colocando "float:left. Isso resolveu o problema da barra de rolagem, eliminando o "overflow-x"... :D

 

Mas valeu pela sua dica também.

 

Valeu por me lembrar do <center>. Eu tinha esquecido de mudar isso!

Já estou usando o sistema:

position: absolute;
	left: 50%;
	margin-left: -350px;
	}

Esse não é gambiarra, eu espero... Hehehe.

 

 

Valeu galera. :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Fala William, belezinha?

 

Ontem, quando tava limpando meu código cheio de DIVS (sim, fui vitima da Div-Mania... reduzi o número de DIVS das páginas de 20 para 11... e daria para fazer menos, talvez...) o Aprendiz me deu uma sugestão bem útil:

 

Mudar o menu, tirando o "display:inline" e colocando "float:left. Isso resolveu o problema da barra de rolagem, eliminando o "overflow-x"... :D

 

Mas valeu pela sua dica também.

 

Valeu por me lembrar do <center>. Eu tinha esquecido de mudar isso!

Já estou usando o sistema:

position: absolute;
	left: 50%;
	margin-left: -350px;
	}

Esse não é gambiarra, eu espero... Hehehe.

 

Caso queiram ver a nova versão (com menos DIV e sem GAMBIS) é só entrar em:

http://www.padovaniprado.com.br/ciclocap/css/2/

(me orgulho, em especial, da organização do .css... Hehehe)

 

Valeu galera. :D

Veja este artigos aqui!

 

http://aprendacss.wordpress.com/2008/06/25...-na-horizontal/

 

http://aprendacss.wordpress.com/2008/06/28...-e-na-vertical/

 

Cuidado com o uso de position absolute, mais para frente pode lhe dar problmemas!

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luciano Fr.    0

Luciano Fr.
Postado

Dei uma analisada no seu html e css , detectei o problema.

 

o problema esta no css

 

 

div#menu {

position: relative;

}

 

remova esse parametro e faca o menu de uma outra forma

como por exemplo

 

#menu { width: fixo}

 

dentro do DIV#menu coloca umas <li> e fecha seu menu.

 

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito