Colocar menu horizontal sobre a div do topo
Como sou iniciante em css e tableless estou me baseando em vídeo aulas e tutoriais para fazer um site dessa forma. Minha dúvida é tenho uma div topo e no meu layout o menu horizontal é em cima do topo. O logotipo fica a esquerda e o menu a direita. O problema é que não consigo colocar o menu exatamente onde ele tem que ficar e o espaço entre um botão e outro está bem grande, já tentei mudar os valores do padding mas nada muda. Vou postar o html e o css aqui para ver se alguém pode me dar um help.
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>Teste</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#slides ul").cycle({
fx: 'fade',
speed: 2000,
timeout: 5000
})
})
</script>
</head>
<body><!--COMEÇA O SITE-->
<div id="topo">
<ul>
<li><a href="historia.php">historia</a></li>
<li><a href="portifolio.php">portifólio</a></li>
<li><a href="blog.php">blog</a></li>
<li><a href="clientes.php">clientes</a></li>
<li><a href="comentarios.php">comentarios</a></li>
<li><a href="contatos.php">contatos</a></li>
</ul>
</div>
</div>
<div id="slides">
<ul>
<li><img src="images/slide1.jpg" /></li>
<li><img src="images/slide2.jpg" /></li>
<li><img src="images/slide3.jpg" /></li>
</ul>
</div>
</body>
</html>style.css
@charset "iso-8859-1";
/ CSS Document /
body {background: #161616 url(img/background.jpg) no-repeat top center; padding:0; background-attachment:fixed;}
#topo{width:980px; margin: 0 auto; background:url(img/topo.png) no-repeat; height:136px;}
#topo ul {
float: right;
margin: 0;
padding: 69px 0em 0px 0em;
list-style: none;
font-size: 16px;
}#topo li {
display: inline;
}#topo a {
display: block;
float: left;
height: 25px;
margin: 0 0 0 8px;
padding: 12px 26px 0 20px;
text-decoration: none;
font-family:"Tw Cen MT", Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #ffffff
}#topo a:hover {
color: #fe8621;
}#topo a:active {
color: #fe8621;
text-decoration: none;
}
#slides{
width:980px;
height:398px;
margin: 0 auto;
overflow:hidden;
padding-left:55px;
padding-top:11px;
}Discussão (1)
Carregando comentários...