Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom após vários dias de pesquisa não achei a solução então resolvi postar aqui para ver se alguem consegue me ajudar
Estou com 2 problemas...no topo que estou desenvolvendo, quando eu aumento a fonte(famoso ctrl+rodinha do mouse, ou ctrl+seta pra cima) o topo não acompanha o crescimento do conteúdo,mesmo com width 100%(isso só acontece no firefox)
O outro problema é que quando eu aumentava a fonte, o form que tem na página quebrava pra proxima linha...isso só acontece quando eu defino o width 100%, quando era um width fixo ele não quebrava
Esse problema do form eu consegui arrumar,gostaria de saber se o jeito que eu fiz é muito gambiarra, se existe outra forma de arruma-lo.
Para arrumar eu coloquei margin negativa margin:30px -1000px 0 200px; para segurar o logo na mesma linha
segue o código
/***********************************************/
/ index.css /
/***********************************************/
/***********************************************/
/ Layout Divs /
/***********************************************/
#div_tudo{
width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;body{
margin:0;/serve para centralizar a pagina/
padding:0; /serve para centralizar a pagina/
width:100%;
}
#div_topo{
width:100%;
height:140px;
}
#div_barra_topo{
background-image:url(/imgs/barra_topo.jpg);
}
#div_barra_topo_links{
line-height:25px;
margin-left:10%;
}
#div_barra_topo_links a{
color:#FFF;
text-decoration:none;
}
#div_meio_topo{
background-image:url(/imgs/fundo_meio_topo.jpg);
background-repeat: repeat-x;
margin-top:1px;
border-top:1px solid #B44141;
border-bottom:1px solid #B44141;
height:100px;
}
#div_logo{
float:left;
margin:15px 0 0 10%;
}
#div_form_busca{
float:left;
width:350px;
height:50px;
display:inline;
margin:30px -1000px 0 200px;
}
#img_logo_p_topo{
float:left;
}
#input_pesquisa_topo{
float:left;
background-image:url(/imgs/icone_pesquisa.jpg);
background-repeat:no-repeat;
background-position:left;
margin: 5px 0px 0px 10px;
padding-left:18px;
border: 1px solid #B64242;
width:240px;
}
#input_pesquisa_enviar_topo{
float:left;
margin:4px 0 0 62%;
}
#div_menu{
height:31px;
background: #F4F4F4;
}
#div_esquerda{
width:180px;
height:auto;
}
#div_central{
width:520px;
margin:10px 0px 0px 10px;
height:auto;
}
#div_direita{
width:240px;
height:auto;
}E o HTML
<body>
<div id="div_tudo"><!--Inicio div_tudo-->
<div id="div_topo"><!--Inicio Div_topo-->
<div id="div_barra_topo"><!--Inicio Div_barra_topo-->
<div id="div_barra_topo_links"><!--Inicio Div_barra_topo_links-->
<a href="sobre.php">O site</a> | <a href="fale.php">Fale Conosco</a>
</div> <!--Fim Div_barra_topo_links-->
</div><!--Fim Div_barra_topo-->
<div id="div_meio_topo"><!--Inicio div_meio_topo-->
<div id="div_logo"><!--Inicio div_logo-->
<a href="index.php"><img src="http://www.portogente.com.br/npg/imgs/logo.png" border="0"></a>
</div> <!--Fim div_logo-->
<div id="div_form_busca"><!--Inicio div_form_busca-->
<img src="http://www.portogente.com.br/npg/imgs/logo_p.jpg" id="img_logo_p_topo">
<form name="busca" action="arquivo.php" method="get">
<input type="text" name="palavras" id="input_pesquisa_topo"><br>
<input type="image" id="input_pesquisa_enviar_topo" src="http://www.portogente.com.br/npg/imgs/btn_buscar_topo.jpg">
</form>
</div> <!--Fim div_form_busca-->
</div> <!--Fim div_meio_topo-->
<div id="div_menu"><!--Inicio div_menu-->
<?php include "menu.php"; ?>
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'pt',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div> <!--Fim div_menu-->
<div id="div_menu2"><!--Inicio div_menu2-->
s
</div> <!--Fim div_menu2-->
</div><!--Fim Div_topo-->
</div>
</body>
</html>Para ve-lo em ação hospedei ele no seguinte link:
Carregando comentários...