Ir para conteúdo

POWERED BY:

Arquivado

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

rvlira

[Resolvido] Centralizar menu no div

Por , em Desenvolvimento frontend

Recommended Posts

rvlira    0

rvlira
Postado

Pessoal, boa noite.

 

Tenho um simples menu horizontal feito com UL e LI dentro de um DIV. Meu único problema é que os itens não ficam centralizados dentro do DIV.

 

Já tentei diversas opções (center, text-align, etc). Gostaria de saber se alguém tem alguma solução.

 

Segue o código:

 

<!DOCTYPE html PUBLIC "-//W3C//1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Página Teste</title>
<style type="text/css">
#container{
	margin:0px;
	width:100%;
}

/* Set up the containing div with a background image */
#outer {width:900px; height:27px; background:#000000; border-style:none; position:relative; margin: 0; }

/* The menu styling */
/* Remove the padding, margins and bullets from the lists */
.menu, .menu ul {list-style-type:none; padding:0; margin:0; }

/* for IE7 to position the tables correctly */
.menu {position:relative;}

/* for IE5.5 and IE6 to position the tables corectly */
* html .menu {position:static;}

/* Set up the size of the list items and float left to place inline */
.menu li {float:left; width:125px; height:27px; margin:0; border-style:none; background:#000000;}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0; font-size:1em;}

/* Default link styling */
.menu li a {display:block; color:#ffffff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none; text-align:center;}

/* Style the list OR link hover. Depends on which browser is used */
.menu :hover {color:#ffffff; background:#000000;}

/* Give the link OR list a relative position. Depends on which browser is used */
.menu li.sub:hover,
.menu li.sub a:hover {position:relative;}

/* For all browsers except IE5.5 and IE6 to keep the hover state through the menu cascade. */
.menu li:hover > a {color:#ffffff; background:#000000;}

/* keep the 'next' level invisible by placing it off screen. */
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul ul.left {position:absolute;left:-9999px; width:128px;}

/* Position the drop-down first sub level beneath the top level list item when hovering over the top level list OR link. The transparent image is for IE7 to render this correctly. The image does not have to exist :) */
.menu :hover ul{left:-1px; top:24px; background:transparent; padding-top:3px;}

/* Position the flyout sub levels to the right or left when hovering over the sub level list OR link. */
.menu :hover ul :hover ul {padding:9px 3px;left:100px;top:0;}
.menu :hover ul :hover ul.left {left:-106px;}
.menu :hover ul :hover ul :hover ul {padding:9px 3px;left:100px;top:0;}
.menu :hover ul :hover ul :hover ul.left {left:-106px;}
</style>
</head>
<body>
<div id="container" align="center">
<div id="outer">
<ul class="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</div>
</body>
</html>

Obrigado pela ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rvlira    0

rvlira
Postado

Thiago, muito obrigado. Funciona perfeitamente.

 

Só vou ter um problema agora: Eu tô fazendo esse menu na intenção de montar uma classe PHP. O menu será montado a partir do banco de dados. Sendo assim o menu poderá ter tanto 3 como 6 opções dentro do DIV, ou seja, essa largura do UL não será fixa.

 

Mas acho que isso eu tenho como resolver criando uma função Javascript para alterar a largura do UL de acordo com uma fórmula qualquer, não?

 

Creio que seja a única solução já que o CSS já deverá ter um tamanho fixo.

 

De qualquer maneira, novamente agradeço pela ajuda. Pelo menos agora sei que é possível concluir a idéia que eu tive.

 

t+!

Compartilhar este post

Link para o post
Compartilhar em outros sites

henry franklin    0

henry franklin
Postado

rvlira!

 

já que será uma lista creio q ficará na vertical.

é so imaginar o valor máximo que cada linha terá e calcular o tamanho.

seria bom também limitar o número de caracteres na inserção no banco pra nao haver quebra (ou outra coisa q estrague) quando a página for exibida.

 

abç!

Compartilhar este post

Link para o post
Compartilhar em outros sites

rvlira    0

rvlira
Postado

henry, obrigado pela ajuda.

 

Pois é, o menu na verdade é horizontal. Mas dá na mesma não? Só calcular pela largura de cada LI.

 

Na programação eu me saio muito melhor do que nessa parte "visual". Já consegui fazer a função.

 

Deixo aqui para o caso de ser útil para mais alguém.

 

<script language="Javascript">
function centralizaMenu(){
  var lista = document.getElementById("ulmenu");
  var opcoes = 0; 
  for (var i = 0; i < lista.childNodes.length; i++) {
	if (lista.childNodes[i].nodeName == "LI") {
	  opcoes++
	}
  }
  lista.style.width=(opcoes*125)+"px";
}
</script>

Para funcionar tive que definir um ID para o UL. No caso ficou "ulmenu".

 

t+!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaayá Pezzuti    0

Kaayá Pezzuti
Postado

Na verdade a melhor forma de fazer isso é dessa forma

 

ul{ 	 left:50%; 	
float:left; 	
position:relative; 	
}

 li{ 	right:50%; 	
float:left; 	
margin-left:10px; 	
margin-right:10px; 	
position:relative;  	
}

 

dessa forma independente do numero de menus adicionados ele ira centralizar

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