Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
e ai pessoal, tranquilo?
to com um pequeno problema de posicionamento com um menu dropdown que eu "fiz" (copie/adaptei :D )
ta tudo funcionando "aparentemente" certinho, porém não consigo posicionar ao centro... ele fica deslocado à direita do layout :S
segue o link
http://www.catelsports.com.br/index.php
o codigo..
ul#menu { background:url(images/bg_menu1.jpg); height:25px; list-style: none; margin-bottom:0px; margin-top:0px;}
ul#menu li { height:25px; line-height:25px; border-right:1px solid #B00000; display:block; float:left; }
ul#menu li:hover, ul#menu li.hover { background:url(images/bg_menu2.jpg); }
ul#menu li a { padding:5px 3px 0px 3px; display:block; height:20px; font: bold 10px verdana; color:#FFF; text-decoration:none }
ul#menu li ul { z-index:999; display:none; }
ul#menu li:hover ul, ul#menu li.hover ul { width:140px; display:block; position:absolute; margin:0px; clear:both; }
ul#menu li:hover ul li, ul#menu li.hover ul li { background:#E70000; border:1px solid #B00000; display:block; float:left; width:140px; *margin-bottom:0px; }
ul#menu li ul li:hover, ul#menu li.hover ul li.hover { font-weight:bold; color:#FFFFFF; background-color:#B00000; }
ul#menu li:hover ul li a, ul#menu li.hover ul li a { color:#FFFFFF; display:block; float:none; }
além do posicionamento do menu principal q fica alinhado à direita, no FF os submenus também ficam com um deslocamento à direita.
outro porém que eu notei, é que no I.E. aparentente o hover fica um pouco mais "pesado" do que no IE...
codigo do menu
<ul id="menu" >
<li ><a href="index.php">Home</a></li>
<li><a href="#">Catel Sports</a>
<ul>
<li ><a href="teste.html" class="lightwindow" >Empresa</a></li>
<li ><a href="imagens/logo.jpg" class="lightwindow">Professores</a></li>
<li ><a href="#">Diferenciais</a></li>
<li ><a href="#">Projetos</a></li></ul>
</li>
<li ><a href="#">Modalidades</a>
<ul>
<li ><a href="#">Ginastica</a>
</li>
<li ><a href="#">Musculacao</a></li>
<li ><a href="#">Lutas</a></li>
<li ><a href="#">Ballet</a></li>
<li ><a href="#">Escalada</a></li>
</ul>
</li>
<li ><a href="#">Servicos</a>
<ul>
<li><a href="#">ECG</a></li>
<li><a href="#">Avaliacao Fisica</a></li>
<li><a href="#">Catel Kids</a></li>
</ul></li>
<li ><a href="#">Eventos</a></li>
<li ><a href="#">Galeria</a></li>
<li ><a href="#">Horarios</a>
<ul>
<li><a href="#">Musculacao</a></li>
<li><a href="#">Ginastica</a></li>
<li><a href="#">Lutas</a></li>
<li><a href="#">Ballet</a></li>
<li><a href="#">Escalada</a></li>
</ul>
</li>
<li ><a href="#">Planos</a></li>
<li><a href="#">Localizacao</a></li>
<li ><a href="#">Parceiros</a></li>
<li ><a href="#">Newsletter</a></li>
<li ><a href="#">Contato</a></li>
</ul>>
você esta usando tabelas para estruturar o seu layout, isso é errado
tente css redet
* { margin: 0; padding: 0; }
abraço
ai q ta...rs
eu não me dou muito bem com com divs não, por isso uso tabelas
inclui esse cod... porém num funfou não...
o menu ficou totalmente deslocado à esquerda... e o layout todo fica à esquerda no FF, e centralizado no IE
//antes q me crucifique... sou bem leigo em css... só sei o básico do básico mesmo
acesse esse site!!!
http://aprendacss.wordpress.com/2008/06/25...-na-horizontal/
tem poucos posts!
mas te explica o que quer
abraço
você esta usando tabelas para estruturar o seu layout, isso é errado
tente css redet
* { margin: 0; padding: 0; }
abraço