Ir para conteúdo

POWERED BY:

Arquivado

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

vasigap

Topo não ocupa 100% da tela !

Por , em Desenvolvimento frontend

Recommended Posts

vasigap    0

vasigap
Postado

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;
text-align:left;/*Hack para centralizar no IE*/ 
}

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:

 

http://www.portogente.com.br/npg/

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