[Resolvido] vertical-align

[- KbeçãO - 0]

to tentando fazer um menu aqui,

html:

<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="?pg=clientes">Clientes</a></li>
<li class="hover"><a href="">Trabalhos</a></li>
	<ul>
		<li><a href="?pg=cases">Cases</a></li>
		<li><a href="?pg=embalagens">Embalagens</a></li>
		<li><a href="?pg=internet">Internet</a></li>
		<li><a href="?pg=news">News Letter</a></li>
		<li><a href="?pg=alternativa">Mídia Alternativa</a></li>
		<li><a href="?pg=eletronica">Mídia Eletrônica</a></li>
		<li><a href="?pg=embalagens">Mídia Impressa</a></li>
	</ul>
<li><a href="?pg=servicos">Serviços</a></li>
<li><a href="?pg=links">Links</a></li>
<li class="last"><a href="?pg=contato">Contato</a></li>
</ul>

 

css:

#menu {
       float: right;
       margin: 0;
       padding: 0;
border-bottom: 1px solid #FF6600;
width: 490px;
border-radius: 15px;

}
#menu li{
       list-style: none;
       float:left;
height: 8px;
font-size: 11pt;
[b]vertical-align: middle;[/b]
       border-right: 1px solid #BBB;
       padding: 7px 0;
       position: relative;
}
#menu ul {
       position: absolute;
       top: 30px;
       left: 0;
       width: 120px;
       display: none;
background-color: #0066FF;
text-decoration: none;
font-size: 12pt;
text-align: left;
}
#menu li:hover ul {

font-size: 10pt;
       display: block;
background-color: #FF6600;

}

#menu a{
       color:#000;
       text-decoration: none;
       padding: 0px 15px 15px 15px;
	margin-bottom: 10px;
       float: left;
}
#menu a:hover{
       color: #FF9F00;
}
#menu .last{
       border-right: none;
}

#menu ul.align{

border-right: none;
border-bottom: 1px solid #FFFFFF;
font-size: 10px;

}

 

o caso é:

preciso alinhar o texto do menu principal no meio, e com vertical-align ñ consegui fazer...

e o sub-menu, so aparece no Ie

no Mozilla n...

oq to fazndo errado ?

[William Bruno 1501]

use um line-height no lugar do vertical-align.

[- KbeçãO - 0]

beleza, alinhamento na vertical resolvido, agora, pq o sub-menu n aparece no Mozilla?

[Francispansa 6]

Veja, http://imasters.com.br/artigo/16195/css/centralizar_imagem_na_horizontal_e_vertical_com_css/..

Acho que isso e ajuda no teu problema, mas caso não resolva, tente alinhar usando padding mesmo, eu acho mais prático.. =)

[- KbeçãO - 0]

entao, o alinhamento ta pronto, so falta o sub-menu aparecer no Mozilla !

=/

[André D. Molin 15]

O seu HTML não está de acordo com o CSS.

 

<ul id="menu">
       <li><a href="">Home</a></li>
       <li><a href="?pg=clientes">Clientes</a></li>
       <li class="hover"><a href="">Trabalhos</a></li>

<!-- A sua <ul> está dentro da <ul id="menu">, e não dentro da <li> que quer fazer o submenu. -->

               <ul>
                       <li><a href="?pg=cases">Cases</a></li>
                       <li><a href="?pg=embalagens">Embalagens</a></li>
                       <li><a href="?pg=internet">Internet</a></li>
                       <li><a href="?pg=news">News Letter</a></li>
                       <li><a href="?pg=alternativa">Mídia Alternativa</a></li>
                       <li><a href="?pg=eletronica">Mídia Eletrônica</a></li>
                       <li><a href="?pg=embalagens">Mídia Impressa</a></li>
               </ul>

<!-- A sua <ul> está dentro da <ul id="menu">, e não dentro da <li> que quer fazer o submenu. -->

       <li><a href="?pg=servicos">Serviços</a></li>
       <li><a href="?pg=links">Links</a></li>
       <li class="last"><a href="?pg=contato">Contato</a></li>
</ul>

 

O correto seria:

 

<ul id="menu">
   <li><a href="">Home</a></li>
   <li><a href="?pg=clientes">Clientes</a></li>
   <li class="hover">
       <a href="">Trabalhos</a>

       <ul>
           <li><a href="?pg=cases">Cases</a></li>
           <li><a href="?pg=embalagens">Embalagens</a></li>
           <li><a href="?pg=internet">Internet</a></li>
           <li><a href="?pg=news">News Letter</a></li>
           <li><a href="?pg=alternativa">Mídia Alternativa</a></li>
           <li><a href="?pg=eletronica">Mídia Eletrônica</a></li>
           <li><a href="?pg=embalagens">Mídia Impressa</a></li>
       </ul>
   </li>
   <li><a href="?pg=servicos">Serviços</a></li>
   <li><a href="?pg=links">Links</a></li>
   <li class="last"><a href="?pg=contato">Contato</a></li>
</ul>

[- KbeçãO - 0]

@André D. Molin

perfeito cara, era isso msmo...

fechei a <li> antes de inserir a <ul>

n tinha me atinado para isso..

^^

vlw ae..

TÓPICO RESOLVIDO !!!