Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite a todos.
Gostaria de fazer um topo de um site preencher todo espaço superior igual esse site:
cmspress.net
Porém o meu código esta deixando uma barra de rolagem horizontal no navegador como se
tivesse mais conteúdo a direita do site sendo que não tem, para resolver isso coloquei
overflow-x:hidden no CSS, mais acredito que não estou fazendo da forma certa, quando eu
redimenciono o navegador a barra horizontal não aparece e eu não consigo visualizar o
restante do site, só consigo na vertical, e seu eu tirar o overflow-x:hidden do CSS eu
consigo visualizar tudo no navegador, mais distorce o layout.
CSS
<style type="text/css">
<!--
html{ overflow-x:hidden;}
-->
body {margin:0 0 0 0;}
#topo { width:100%;height:180px;background-color:#86b83d; border:solid #86b83d 1px;}
</style>
>
body, html{
margin:0;
padding:0;
width:100%;
height:100%;
}
#topo{
background:#069;
width:100%;
height:180px;
}Distorceu o layout e criou a barra horizontal no navegador... :(
Sem redimensionar o navegador ele fica com a barra horizontal e
redimensionando ele distorce o layout ... :(
Manda um print do site, se possivel manda um link pra poder visualizar, pq se não fica dificil de saber o que é.. :P
Ta ai amigo, salva como teste.html no seu desktop.
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site</title>
<style type="text/css"></style>
</head>
<body>
<div id="topo"><!-- inicio #topo -->
<div id="topo_meio"><!-- inicio #topo_meio -->
<div id="logo"><!-- inicio #logo -->
</div><!-- fim #logo -->
<div id="titulo"><!-- inicio #titulo -->
</div><!-- fim #titulo -->
<div id="subtitulo"><!-- inicio #subtitulo -->
</div><!-- fim #subtitulo -->
</div><!-- fim #topo_meio -->
</div><!-- fim #topo -->
<div id="box_meio"><!-- inicio #box_meio -->
<div id="box_meio_esquerda"><!-- inicio #box_meio_direita -->
<div id="box_meio_esquerda_1"><!-- inicio #box_meio_esquerda_1 -->
</div><!-- fim #box_meio_esquerda_2 -->
<div id="box_meio_esquerda_2"><!-- inicio #box_meio_esquerda_2 -->
</div><!-- fim #box_meio_esquerda_2 -->
<div id="box_meio_esquerda_3"><!-- inicio #box_meio_esquerda_3 -->
</div><!-- fim #box_meio_esquerda_3 -->
<div id="box_meio_esquerda_4"><!-- inicio #box_meio_esquerda_4 -->
</div><!-- fim #box_meio_esquerda_4 -->
<div id="box_meio_esquerda_5"><!-- inicio #box_meio_esquerda_5 -->
</div><!-- fim #box_meio_esquerda_5 -->
<div id="box_meio_esquerda_6"><!-- inicio #box_meio_esquerda_6 -->
</div><!-- fim #box_meio_esquerda_6 -->
<div id="box_meio_esquerda_7"><!-- inicio #box_meio_esquerda_7 -->
</div><!-- fim #box_meio_esquerda_7 -->
<div id="box_meio_esquerda_8"><!-- inicio #box_meio_esquerda_8 -->
</div><!-- fim #box_meio_esquerda_8 -->
<div id="box_meio_esquerda_9"><!-- inicio #box_meio_esquerda_9 -->
</div><!-- fim #box_meio_esquerda_9 -->
<div id="box_meio_esquerda_10"><!-- inicio #box_meio_esquerda_10 -->
</div><!-- fim #box_meio_esquerda_10 -->
<div id="box_meio_esquerda_11"><!-- inicio #box_meio_esquerda_11 -->
</div><!-- fim #box_meio_esquerda_11 -->
<div id="box_meio_esquerda_12"><!-- inicio #box_meio_esquerda_12 -->
</div><!-- fim #box_meio_esquerda_12 -->
</div><!-- fim #box_meio_direita -->
<div id="box_meio_direita"><!-- inicio #box_meio_esquerda -->
<div id="box_meio_direita_sobre"><!-- inicio #box_meio_esquerda_sobre -->
<div id="box_meio_direita_sobre_titulo"><!-- inicio #box_meio_esquerda_sobre_titulo -->
</div><!-- fim #box_meio_esquerda_sobre_titulo -->
</div><!-- fim #box_meio_esquerda_sobre -->
<br /><br /><br /><br /><br /><br /><br />
<div id="box_meio_direita_menu"><!-- inicio #box_meio_esquerda_menu -->
<div id="box_meio_direita_menu_titulo"><!-- inicio #box_meio_esquerda_menu_titulo -->
</div><!-- fim #box_meio_esquerda_menu_titulo -->
</div><!-- fim #box_meio_esquerda_menu -->
<br /><br /><br /><br /><br /><br /><br />
<div id="box_meio_direita_links"><!-- inicio #box_meio_esquerda_links -->
<div id="box_meio_direita_links_titulo"><!-- inicio #box_meio_esquerda_links_titulo -->
</div><!-- fim #box_meio_esquerda_links_titulo -->
</div><!-- fim #box_meio_esquerda_links -->
<br /><br /><br /><br /><br /><br /><br />
</div><!-- fim #box_meio_esquerda -->
</div><!-- fim #box_meio -->
<div id="rodape"><!-- inicio #rodape -->
</div><!-- fim #rodape -->
</body>
</html>Amigo, aqui ficou tudo certinho..
Testei nos navegadores IE, FF, CHROME e SAFARI, em nenhum criou a barra horizontal..
Usei tambem três resoluções, 800x600, 1024x768 e 1280x800 e tudo certinho em todas, a não ser o overflow que escondeu parte da pagina na resolução de 800x600..
Qual navegador você ta usando e qual versão é?
>
Amigo, aqui ficou tudo certinho..
Testei nos navegadores IE, FF, CHROME e SAFARI, em nenhum criou a barra horizontal..
Usei tambem três resoluções, 800x600, 1024x768 e 1280x800 e tudo certinho em todas, a não ser o overflow que escondeu parte da pagina na resolução de 800x600..
Qual navegador você ta usando e qual versão é?
RESOLVIDO
CSS
body, html {margin:0; padding:0;}
#topo { width:100%;height:180px; background-color:#86b83d; border-bottom:solid #86b83d 1px; min-width:940px;}
#topo_meio{width: 940px; height:155px; padding-top:10px; position: relative; left: 50%; margin-left: -472px; border:solid #000000 0px;}
#logo{ width:200px; height:110px; border:solid #86b83d 1px;}
#titulo{ width:200px; height:41px; border:solid #86b83d 1px;font-size:35px; font-family:Arial; color:#FFFFFF; float:left; }
#subtitulo{ width:726px; height:21px; margin-top:20px; margin-left:10px; font-family:Arial; border:solid #FF0000 0px; color:#FFFFFF;
float:left;}
#box_meio { width: 940px; height:600px; margin-top:10px; position: relative; left: 50%; margin-left: -470px; border:solid #000000 1px;}
#box_meio_esquerda{ width:738px; height:598px; border:solid #AA0EE0 1px;float:left;}
#box_meio_esquerda_1{ width:182px; height:197px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_2{ width:182px; height:197px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_3{ width:182px; height:197px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_4{ width:182px; height:197px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_5{ width:182px; height:197px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_6{ width:182px; height:197px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_7{ width:182px; height:197px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_8{ width:182px; height:197px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_9{ width:182px; height:197px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_10{ width:182px; height:197px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_11{ width:182px; height:197px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_12{ width:182px; height:197px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_imagem1{ width:182px; height:147px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_imagem2{ width:182px; height:147px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_imagem3{ width:182px; height:147px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_imagem4{ width:182px; height:147px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_imagem5{ width:182px; height:147px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_imagem6{ width:182px; height:147px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_imagem7{ width:182px; height:147px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_imagem8{ width:182px; height:147px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_banner1{ width:182px; height:147px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_banner2{ width:182px; height:147px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_banner3{ width:182px; height:147px; border:solid #006633 1px; float:left;}
#box_meio_esquerda_banner4{ width:182px; height:147px; border:solid #006633 1px; float:left;}
#box_meio_direita{ width:198px; height:598px; border:solid #FF0000 0px; float:left;}
#box_meio_direita_sobre{width:196px; height:100px; border:solid #86b83d 1px;float:left;}
#box_meio_direita_sobre_titulo{width:194px; height:30px; text-align:center; background-color:#86b83d; font-size:18px; font-family:Arial;
border:solid #87b83d 1px; color:#FFFFFF; float:left;}
#box_meio_direita_menu{width:196px; height:100px; border:solid #86b83d 1px;float:left;}
#box_meio_direita_menu_titulo{width:194px; height:30px; text-align:center; background-color:#86b83d; font-size:18px; font-family:Arial;
border:solid #87b83d 1px; color:#FFFFFF; float:left;}
#box_meio_direita_links{width:196px; height:100px; border:solid #86b83d 1px;float:left;}
#box_meio_direita_links_titulo{width:194px; height:30px; text-align:center; background-color:#86b83d; font-size:18px; font-family:Arial;
border:solid #87b83d 1px; color:#FFFFFF; float:left;}
#rodape { width:100%;height:180px;background-color:#86b83d; border-top:solid #86b83d 1px; margin-top:10px; min-width:940px}
body, html{
:D