Ir para conteúdo

POWERED BY:

Arquivado

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

kvg666

[Resolvido] alinhamento vertical c/ list

Por , em Desenvolvimento frontend

Recommended Posts

kvg666    0

kvg666
Postado

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;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

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:

Compartilhar este post

Link para o post
Compartilhar em outros sites

kvg666    0

kvg666
Postado

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

 

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=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

 

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;
}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

kvg666    0

kvg666
Postado

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;
}

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