Ir para conteúdo

Arquivado

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

vasigap

Topo ocupando realmente 100% da tela

Por , em Desenvolvimento frontend

Recommended Posts

vasigap    0

vasigap
Postado

Bom após 2 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

marcus_du    1

marcus_du
Postado

Simples,

 

Primeiramente você deve delimitar o tamanho do conteúdo do topo.

Por exemplo:

 

.conteudoTopo{
width: 960px;
height: 200px;
margin: 0 auto;
}

 

 

Explicando:

O conteúdo terá um tamanho padrão definido, o que não deixa ele correr na tela.

 

O margin ali, faz com que o conteúdo fique sempre no centro, aplicando margem igual dos dois lados do conteúdo.

 

Simples assim!

 

Qualquer dúvida, posta ai!

Compartilhar este post

Link para o post
Compartilhar em outros sites

vasigap    0

vasigap
Postado

Simples,

 

Primeiramente você deve delimitar o tamanho do conteúdo do topo.

Por exemplo:

 

.conteudoTopo{
width: 960px;
height: 200px;
margin: 0 auto;
}

 

 

Explicando:

O conteúdo terá um tamanho padrão definido, o que não deixa ele correr na tela.

 

O margin ali, faz com que o conteúdo fique sempre no centro, aplicando margem igual dos dois lados do conteúdo.

 

Simples assim!

 

Qualquer dúvida, posta ai!

 

Hum, eu entendi na teoria,mas na prática não consegui...

 

Eu tentei colocando essa class na div com o conteudo(div_meio_topo), desse jeito funcionou,mas as margins não são preenchidas,ae as margins ficam em branco,tentei substituir por padding, mas o lado direito não preenche ><

 

Tentei tambem colocando uma div conteudo dentro da <div id="div_meio_topo">

E não funfo tambem ><

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