Jump to content
Sign in to follow this  
BrunoT

Centrar menu

Recommended Posts

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

Share this post


Link to post
Share on other sites
HappyHippyHippo

centrar o que a que ?

ou apresenta uma imagem do que sucede, ou disponibiliza um URL para se poder confirmar


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

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.