[Resolvido] alinhamento vertical c/ list

kvg666 · Julho 22, 2010

Boa noite,

Estou tendo problemas aqui para fazer um menu em lista (css sprite). Tenho uma DIV para o menu, e quando coloco a lista (<li>) dentro da DIV, a mesma "desce", se afastando do topo. Sem a lista, fica normal.

Aqui uma imagem para ilustrar melhor o problema:

Imagem Postada

Aqui o trecho do código correspondente ao menu:

HTML

<div id="menu">
	
        <ul>
	<li><a class="home" href=".../index.php" title="Home"></a></li>
	<li><a class="contato" href="contato.php" title="Contato"></a></li>
	</ul>
				
</div>

CSS

#menu {
background:url(layout/menu.png) repeat-x;
height:40px;
margin:auto;
width:960px;
}

#menu li {
list-style:none;
display:inline;
}
#menu li a {
background:url(layout/menubotoes.png) no-repeat;
height:40px;
float:left;
}

Paulo de Tarso F. M. · Julho 22, 2010

Olá kvg666. Não tem como nos disponibilizar um link para sua página? De repente, pode ser que existam outras formatações que estejam influenciando e seria interessante que tivéssemos acesso à página completa...

:joia:

kvg666 · Julho 22, 2010

O site não esta totalmente pronto ainda, não tenho online. Estou postando o código...

HTML

Mostrar conteúdo oculto

<!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>Untitled Document</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
	
	<div id="topo">
	
	     </div>
	
	<div id="menu">
			
		<ul>
		<li><a class="home" href=".../index.php" title="Home"></a></li>
		<li><a class="contato" href="contato.php" title="Contato"></a></li>
		</ul>
				
	      </div>
		
	<div id="conteudo">

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

</body>
</html>

CSS

Mostrar conteúdo oculto

body {
background:url(layout/bg.png) repeat-x #FFF;
margin:0;
text-align:center;
}
#topo {
background:url(layout/topo.png) no-repeat;
height:149px;
margin:auto;
width:960px;
}
#menu {
background:url(layout/menu.png) repeat-x;
height:40px;
margin:auto;
width:960px;
}
#menu li {
list-style:none;
display:inline;
}
#menu li a {
background:url(layout/menubotoes.png) no-repeat;
height:40px;
float:left;
}
#menu .home {
background-position:0 0;
width:78px;
}
#menu .home:hover {
background-position:0 -40px;
}
#menu .contato {
background-position:-78px 0;
width:100px; 
}
#menu .contato:hover {
background-position:-78px -40px;
}
#conteudo {
height:400px;
margin:0 auto;
text-align:left;
width:1000px;
}
#rodape {
background:url(layout/rodape.png) repeat-x;
height:39px;
}

IvanNildo · Julho 22, 2010

Tente usar CSS reset ou então aumentar um pouco o tamanho da div do menu... as vezes o li não ta cabendo na div

kvg666 · Julho 22, 2010

Em 22/07/2010 at 12:23, 'IvanNildo' disse:

Tente usar CSS reset ou então aumentar um pouco o tamanho da div do menu... as vezes o li não ta cabendo na div

Era isso mesmo, CSS Reset. Funcionando perfeitamente, muito obrigado IvanNildo pela ajuda e Paulo pela tentativa ...

*{
margin:0;
padding:0;
border:0;
}

Entrar

Arquivado

[Resolvido] alinhamento vertical c/ list

Recommended Posts

kvg666 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

kvg666 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

IvanNildo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

kvg666 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

problemas SEO no google (retorno)

Pergunta: gerar sitemap.xml

Pergunta: gerar sitemap.xml

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante