Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 75 postagens
Mais de 75 postagens
Tópico Autor
Mensagens: 87
Sexo: Masculino

Acertar com o css - menu

12-07-2011 05:44

Bom dia.

Estou com um problema que ainda não consegui resolver. Fiz o menu da imagem no computador portátil com alguns exemplos que vi. Ficou muito bonito, mas na hora de abrir numa definição diferente fica tudo mal posicionado.

http://imageshack.us/photo/my-images/838/cssw.jpg/

O css referente a esse menu é este:

/* ********************************* Menu principal *********************************** */ .arrowblue { width: 100%; /*width of menu*/; border-style: solid solid none solid; border-color: #94AA74; border-width: 1px; } .arrowblue ul { list-style-type: none; margin: 0; padding: 0; } .arrowblue li a { display: block; background: url('../imagens/arrowblue1.gif') 100% 0; height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/; padding: 4px 0 4px 10px; line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/; text-decoration: none; font-style: normal; font-variant: normal; font-weight: bold; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; } /* The magic */ .arrowblue ul li { position: relative; } . arrowblue li ul { position: absolute; top: 0; display: none; } .arrowblue ul li a { display: block; text-decoration: none; background: url('../imagens/arrowblue1.gif') 100% 0; } .arrowblue li:hover ul, li.over ul { display: block; } .arrowblue li a:link, .arrowblue li a:visited { color: #3399FF; } .arrowblue li a:hover { color: #0033CC; background: url('../imagens/arrowblue2.gif') 100% 0; } .arrowblue li a:selected { color: #26370A; background: url('../imagens/arrowblue3.gif') 100% 0; } .arrowblue li a:active { color: #000066; background: url('../imagens/arrowblue3.gif') 100% 0; } .vazio { background: url('../imagens/arrowblues.gif') 100% 0; } #menubv { width: 12em; padding: 0; margin: 0; font: 14px Verdana, sans-serif; } #menubv ul { list-style: none; margin: 0; padding: 0; } #menubv li { border-bottom: 1px solid #f00; margin: 0; } #menubv li a { display: block; padding: 5px 5px 5px 0.5em; font-weight: bold; border-left: 10px solid #ffc0cb; border-right: 10px solid #fff5ee; background-color: #ffe4e1; color: #808000; text-decoration: none; } #menubv li a:hover { border-left: 10px solid #fcc; border-right: 10px solid #fff; background-color: #fff0f5; color: #ccc; } /* Fix IE. Hide from IE Mac \*/ * html ul#menubv li { float: left; height: 1%; } * html ul#menubv li a { height: 1%; } /* End */

Na minha página eu defini dessa forma:

<div id="menu" class="menutext" /> <!--DIV MENU--> <div class="arrowblue"> <ul> <li class="vazio"></li> <?php //Construção do menu pela BD - Dinâmico // menus principais $resultado=$conect->criarmenualuno();//Cria item de menu while($campos=mysql_fetch_array($resultado)) { extract($campos);?> <li class="selected"> <a href="<? echo $link ?>" target="iConteudo"><? echo $texto ?> </a> <ul> <? $resultado2=$conect->criarsubmenualuno($id_menu);//Cria item de submenu while($campos2=mysql_fetch_array($resultado2)) { extract($campos2);?> <li class="selected"> <a href="<? echo $link ?>" target="iConteudo"><? echo $texto ?> </a></li> <? } ?> </ul> <? } ?></li> </ul> </div>

Agradeço a ajuda!
0
 
Mais de 75 postagens
Mais de 75 postagens
Tópico Autor
Mensagens: 87
Sexo: Masculino

Acertar com o css - menu

12-07-2011 11:38

Acho que já descobri. Estava atribuindo um valor fixo e agora coloquei 100%. Parece que funcionou.


;)
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17521
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Acertar com o css - menu

12-07-2011 12:52

Boa.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado