Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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">](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>Carregando comentários...