Help
Estou tendo problemas com a minha barra de navegação do site, a lista (no caso a barra) não está se encaixando no div "barra".
Se alguem souber como ajetar, me explique...
Esi o código HTML e CSS:
CÓDIGO
<!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=utf-8" />
<title>Página Inicial</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteiner"><!--Start Conteudo-->
<div id="cabecalho"><!--Start Cabeçalho-->
<img src="imagens/cabecalho.png"/>
</div>
<!--End Cabeçalho-->
<div id="navegacao"><!--Start Navegação-->
<ul class="barra">
<li><a href"#">Início</a></li>
<li><a href"#">Projetos</a></li>
<li><a href"#">Galeria</a></li>
<li><a href"#">Parceiros</a></li>
<li><a href"#">Contato</a></li>
</ul>
</div><!--End Navegação-->
<div id="conteudo"><!--Start Conteudo-->
</div><!--End Conteudo-->
<div id="rodape"><!--Start Rodapé-->
</div><!--End Rodapé-->
</div><!--End Conteiner-->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Página Inicial</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteiner"><!--Start Conteudo-->
<div id="cabecalho"><!--Start Cabeçalho-->
<img src="imagens/cabecalho.png"/>
</div>
<!--End Cabeçalho-->
<div id="navegacao"><!--Start Navegação-->
<ul class="barra">
<li><a href"#">Início</a></li>
<li><a href"#">Projetos</a></li>
<li><a href"#">Galeria</a></li>
<li><a href"#">Parceiros</a></li>
<li><a href"#">Contato</a></li>
</ul>
</div><!--End Navegação-->
<div id="conteudo"><!--Start Conteudo-->
</div><!--End Conteudo-->
<div id="rodape"><!--Start Rodapé-->
</div><!--End Rodapé-->
</div><!--End Conteiner-->
</body>
</html>
CÓDIGO
@charset "utf-8";
/* CSS Document */
#body{
margin: 0;
padding: 0;
color: #a1a1a1;
font-size: 12px;
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: #FFFFFF;
}
#conteiner{
width: 772px;
margin: auto;
height: 900px;
}
#cabecalho{
width: 772px;
float: left;
}
#navegacao{
float: left;
width: 772px;
height: 40px;
margin-top: 10px;
background-image: url(imagens/bgmenu.png);
background-repeat: repeat-x;
}
.barra li{
float: left;
list-style-type: none;
text-align: center;
letter-spacing: -1px;
background-image: url(imagens/separador.png);
background-repeat: no-repeat;
background-position: right;
}
.barra li a{
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
display: block;
font-size: 14px;
width: 130px;
height:40px;
}
.barra li a:hover{
background-image: url(imagens/menuover.png);
background-repeat: repeat-x;
}
/* CSS Document */
#body{
margin: 0;
padding: 0;
color: #a1a1a1;
font-size: 12px;
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: #FFFFFF;
}
#conteiner{
width: 772px;
margin: auto;
height: 900px;
}
#cabecalho{
width: 772px;
float: left;
}
#navegacao{
float: left;
width: 772px;
height: 40px;
margin-top: 10px;
background-image: url(imagens/bgmenu.png);
background-repeat: repeat-x;
}
.barra li{
float: left;
list-style-type: none;
text-align: center;
letter-spacing: -1px;
background-image: url(imagens/separador.png);
background-repeat: no-repeat;
background-position: right;
}
.barra li a{
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
display: block;
font-size: 14px;
width: 130px;
height:40px;
}
.barra li a:hover{
background-image: url(imagens/menuover.png);
background-repeat: repeat-x;
}
Agradeço desde já!
