Ir para o conteúdo
BrunoT

Centrar menu

Mensagens Recomendadas

BrunoT

Bom dia,

Estou com mais um problema em CSS. Fiz um dropdown menu em css, funciona tudo bem excepto a parte que não consigo centrar. Vou por o código html e css

li {
font-family:arial;
font-size:11px;
}
.clear {
clear:both
}
#nav {
margin:0;
padding:0;
list-style:none;
}
#nav li {
float:left;
display:block;
width:130px;
background:#b50133;
position:relative;
z-index:500;
color: white;
margin:0 1px;
}
#nav li a {
display:block;
padding:8px 5px 0 5px;
font-weight:700;
height:23px;
color:white;
text-decoration:none;
text-align:center;
}
#nav li a:hover {
color:white;
}
#nav a.selected {
color:white;
}
#nav ul {
position:absolute;
left:0;
color: white;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}		
#nav ul li {
width:130px;
color:white;
float:left;
border-top:1px solid #fff;
}
#nav ul a {
display:block;
height:15px;
padding: 8px 5px;
color:white;
}
#nav ul a:hover {
text-decoration:underline;
}
*html #nav ul {
margin:0 0 0 -2px;
}

HTML

<ul id="nav">
<li><a href="#" class="selected">Consultas</a>
 <ul>
	 <li><a href="#">Nova Consulta</a></li>
	 <li><a href="#">Listar Consultas</a></li>
 </ul>
 <div class="clear"></div>
</li>
<li><a href="#">Exames</a>
<ul>
 <li><a href="#">Novo Exame</a></li>
 <li><a href="#">Listar Exames</a></li>
</ul>		
 <div class="clear"></div>
</li>
<li><a href="#">Vacinas</a>
<ul>
 <li><a href="#">Nova Vacina</a></li>
 <li><a href="#">Listar Vacinas</a></li>
</ul>		
 <div class="clear"></div>
</li>
<li><a href="#">Medicamentos</a>
<ul>
 <li><a href="#">Novo Medicamento</a></li>
 <li><a href="#">Listar Medicamento</a></li>
</ul>		
 <div class="clear"></div>
</li>
<li><a href="#">Notificações</a>
<ul>
 <li><a href="#">Gerir</a></li>	
</ul>		
 <div class="clear"></div>
</li>
</ul>
<div class="clear"></div>

Depois tenho uma função em jquery que dá o efeito dropdown, mas penso não ser importante copiar para cá.

Alguém consegue dar o toque que falta para centrar ?

Obrigado

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo
body
{
 width: 100%; /* o body deverá ocupar toda a largura do browser */
}

#nav
{
 margin: 0 auto; /* deixar o browser calcular o tamanho das margens laterais */
 width: 660px; /* 5 elementos com 130px de largura + 2px de margem lateral cada = 660px */
}


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.