Ir para conteúdo

POWERED BY:

Arquivado

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

Jean Martins

[Resolvido] layout com espaço entre o topo e a barra de navegação

Por , em Desenvolvimento frontend

Recommended Posts

Jean Martins    0

Jean Martins
Postado

Olá Galera!

 

Estou com duvidas, sou iniciante em css e estou desenvolvendo um layout para meu site e está sobrando espaço entre o topo e a barra de navegação horizontal, procurei nesse forum algo parecido e nao encontrei. Será que alguém poderia me dar uma ajuda?

 

Esse é o codigo:

 

pagina layout.css:

body {
		margin:0;
		padding:0;
		border:none;
		font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
		background:#ffe;
		color:#333;
		text-align:center;
	}
	
body#duascolunas #nav {
	display:none; /* 'Some' com a coluna de navegacao */
	}
body#duascolunas #principal {
	width:615px; /* Estende a coluna principal */
	border-left-width:0;
	padding-right:0;
	}
	
#tudo {

		width:750px;
		margin:0 auto;
		text-align:left;
	  }

#topo {

		height: 153px;
		border-bottom: 1px solid #c30;	  
	  }	

#barranav {
			height: auto;
			font-family: Arial, Helvetica, sans-serif, Verdana;
			font-size: x-small;
			color: #000000;
			text-decoration: none;
			text-align: left;
		  }

#nav {
	width:120px;
	float:left;
	}

#principal {
	float:left;
	width:435px;
	margin-left:3px; 	
	text-align:justify;
	border:dotted #c30;
	border-width: 0 1px;
	padding: 0 10px;
	}

#apoio {
	width:120px;
	float:right;
	}

#rodape {

		clear:both;
		text-align:center;
		border-top: 1px solid #c30;
		
	 }

 

 

index (pagina com o codigo html)

 

<!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>Untitled Document</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="tudo">

  <div id="topo">
	<h1>TOPO</h1>
  </div>
  <div id="barranav">
		  <p>
			<a href="#">Home</a>
			<a href="#">Empresa</a>
			<a href="#">Hardware</a>
			<a href="#">Web</a>
			<a href="#">Downloads</a>
			<a href="#">Contato</a>
		</p>	
  </div>
  <div id="nav">
<h2>COLUNA DE NAVEGACAO</h2>
<p>...</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<div id="principal">
<h2>COLUNA PRINCIPAL</h2>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<div id="apoio">
<h2>COLUNA DE APOIO</h2>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<div id="rodape">
...
</div>
</div>


</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Sua estrutura XHTML está errada. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Você utilizou um <p> para criar um menu. :blink: :blink: :blink:

 

Faça assim no XHTML:

 

<div id="barranav">
         <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Empresa</a></li>
           <li><a href="#">Hardware</a></li>
           <li><a href="#">Web</a></li>
           <li><a href="#">Downloads</a></li>
           <li><a href="#">Contato</a></li>
       </ul>    
 </div>

 

No CSS, adicione um CSS Reset, no #barranav adicione um float: left e width: 100% e depois coloque esse código:

 

#barranav ul {
	list-style: none;
}

#barranav ul li {
	float: left;
	margin: 0 10px 0 10px;
}

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jean Martins    0

Jean Martins
Postado

Não funcionou Thelon, pelo que vejo, quando eu tiro a tag <p> a barra volta ao normal.

 

Vout entar sua dica thiago, assim que concretizar algum resultado posto novamente! Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jean Martins    0

Jean Martins
Postado

Não funcionou Thelon, pelo que vejo, quando eu tiro a tag <p> a barra volta ao normal.

 

Vout entar sua dica thiago, assim que concretizar algum resultado posto novamente! Obrigado.

Thiago tentei sua dica mas desestruturou todo o layout ja refiz todo o codigo mas nao deu certo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Colocou um css reset?

* {
 margin: 0;
 padding: 0;
}
independente do que acontecer, essa é a forma correta de se começar um CSS.

Daí, você vai setando na segurança de que vai evitar várias diferenças entre browsers, os margins e paddings que quiser.

 

Seria legal que você postasse um link, pois assim, poderíamos acompanhar a evolução do teu código, sugerindo mais coisas, e vendo oque você eventualmente possa ter feito de forma incorreta, ou o link, ou atualize o post, com o teu código mais atual.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jean Martins    0

Jean Martins
Postado

Eu refiz o layout, eu nao tinha colocado de forma correta o css reset, na verdade isso pra mim é uma novidade.

Me parece que funcionou, nao tenho como postar link pois por enquanto estu fazendo local mas vou postar o codigo atual:

 

no html eu coloquei como tinha me indicado.

 

no css ficou asssim:

* {
margin: 0;
padding: 0;
}
body {
	margin:0;
	padding:0;
	border:none;
	font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
	background:#ffe;
	color:#333;
	text-align:center;
		  }
	
body#duascolunas #nav {
	display:none; /* 'Some' com a coluna de navegacao */
	}
body#duascolunas #principal {
	width:615px; /* Estende a coluna principal */
	border-left-width:0;
	padding-right:0;
	}
	
#tudo {
	width:750px;
	margin:0 auto;
	text-align:left;
		  }

#topo {

	height: 153px;
/*	border-bottom: 1px solid #c30;	  */
	  }	
	  
#barranav {
	   height: auto;
				   font-family: Arial, Helvetica, sans-serif, Verdana;
				   font-size: x-small;
				  color: #000000;
				  text-decoration: none;
				  text-align: left;
	 float:left;
	 width: 100%;
}

#barranav ul {
	list-style: none;
}

#barranav ul li {
	float: left;
	margin: 0 10px 0 10px;
}


#nav {
	width:120px;
	float:left;
	}

#principal {
	float:left;
	width:435px;
	margin-left:3px; 	
	text-align:justify;
	border:dotted #c30;
	border-width: 0 1px;
	padding: 0 10px;
	}

#apoio {
	width:120px;
	float:right;
	}

#rodape {

	clear:both;
	text-align:center;
/*	border-top: 1px solid #c30; */
		
	 }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

AhiahsoiHAOiSHihoIAosiasiOIASoih Eu tinha me esquecido de informar sobre o CSS Reset. Foi mal... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Mas agora parecesse que o problema foi sanado.

 

Como disse o Bruno, é bom você sempre começar com um CSS Reset, pois você acaba zerando algumas propriedades que já tem um valor default e que muitas vezes atrapalha na incompatibilidade de browser. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jean Martins    0

Jean Martins
Postado

Obrigado pelas dicas, valeu mesmo. Agora vou para a etapa conteudo, em breve estarei no forum novamente rssssss, valeu mesmo!

 

Obrigado a todos! Abraços

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