Ir para conteúdo
Fórum Script Brasil
  • 0

Alinhamento de Menu

lprtrindade

Perguntado por lprtrindade,

 Share

Pergunta

lprtrindade

lprtrindade

Postado
Postado (editado)

Fala pessoal do ScriptBrasil, tudo bem !?

Primeiramente, desculpa se postei em local errado. É que não sei exatamente onde estáo erro. Se é no HTML em si, ou se é no JavaScript.

Mais acredito que seja no HTML mesmo.

Bem meu problema é o seguinte... Eu estou desenvolvendo um site e havia feito na página inicial um menu. Este menu foi feito em Table com DIVs centralizadas dentro. Ficou perfeitinho.

Só que depois eu tive que fazer um menu com DropDown. E quando eu fiz isso, eu tive que substituir a Table e as DIVs por UL e LI, para que o código funcionasse.

O problema é que quando eu substitui, o menu DropDown ficou beleza, mais o alinhamento do menu principal ficou errado. E não consigo alinhar isto de jeito algum. Pois não consigo usar os UL e LI dentro da Table, que da erro no código.

Para melhor entenderem o que estou dizendo, postarei duas fotos. A Screen1, que foi a que fiz primeiramente com Table e DIVs, e a Screen2 que é a modificada com DropDown. Observem o alinhamento do texto principal na home. Vejam que na Screen2, ele ficou todo pra esquerda, desalinhado.

Abaixo das imagens, postarei o código das páginas para quem quiser dar uma olhada. E Se possível, me diga onde errei, par não cometer o mesmo erro novamente.

Screen 1:

Screen1.jpg

Screen 2:

Screen2.jpg

Código da Screen 1: http://screen1.rg3.net/

Código da Screen 2: http://screen2.rg3.net/

PS.: Postei o link direto pro arquivo HTML, evitando assim de postar um tópico imenso, por causa do código. Basta clicar em "Exibir Código Fonte". (Os scripts estão todos funcionando perfeitamente, basta passar o mouse em cima dos menus.)

Como está em um pasta que não possui as imagens nem nada, joguei o fundo como cinza só para vocês vizualizarem. Mais na real é o que está na foto.

Obrigado a quem puder me ajudar.

Abraços.

Editado por lprtrindade
Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0
lprtrindade

lprtrindade

Postado
  • Autor
Postado

Olá amigo, obrigado por responder.

Desculpe, mais não entendi entendi extamente o que fazer.

Tentei adicionar o comando

margin-left:auto;
    margin-right:auto;
    margin-top:0;
    display:table;
Ao final do meu existente: 
#qm0 a    
    {    
        padding:0px 60px 5px 0px;
        color:#FFFFFF;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size:20px;
        font-weight:bold;
        text-decoration:none;
        text-shadow: 2px 2px 2px #000000;
        text-align:left;
        border-width:0px 1px 1px 0px;
        border-color:#9B9B9B;
    }

Mais não consegui resultado. Ele apenas aumenta um pouquinho só o espaçamento entre os textos mais não alinha.

Se puder me explicar melhor o que devo fazer, ficaria grato.

Obrigado.

Abraços.

Link para o comentário
Compartilhar em outros sites
  • 0
Rogério Guerra

Rogério Guerra

Postado
Postado

Olá lprtrindade,

Para trabalhar com menu horizontal usando UL você podr fazer da seguinte forma:

- HTML completo:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Menu horizontal</title>

<style type="text/css" media="all" id="test">

li

{

float: left;

width: 200px;

text-align: center;

list-style-type: none;

border: 1px solid #000;

}

</style>

</head>

<body>

<ul>

<li>item do menu</li>

<li>item do menu</li>

<li>item do menu</li>

<li>item do menu</li>

<li>item do menu</li>

</ul>

</body>

</html>

Espero ter ajudado

--

Rogério Guerra

Visite o Blog: professorrogerioguerra.blogspot.com

Link para o comentário
Compartilhar em outros sites
  • 0
lprtrindade

lprtrindade

Postado
  • Autor
Postado (editado)

Obrigado ao Rogério por tentar ajudar-me.

De certa forma aprendi algo novo. Porque toda vez que eu fazia menu dessa forma ao invés de usar tudo CSS igual você fez (o que fica bem mais leve), eu usava texto normal dentro de Table ou DIV, igual no exemplo inicial que eu postei.

Vinny, obrigado por ter me mostrado o local. Na verdade fiz um testes dentro dessa classe "qmmc ul" com esses códigos ae, e acabei sem querer descobrindo que pra arrumar o arquivo da forma que eu queria não precisava nem colocar esses códigos ae, bastava eu retirar o comando padding:0px;.

Antes estava assim:

.qmmc ul {list-style:none;padding:0px;margin:0px;}
Agora ficou assim: 
.qmmc ul {list-style:none;margin:0px;}
Pronto, ficou centralizado como eu queria. Muitíssimo obrigado ae pela ajuda. Se você não tivesse me indicado essa 'classe' eu teria ficado rodando até aqui e não iria encontrar onde estava o problema. :lol: Aproveitando a modificação eu tentei dar uma limpada no código todo, lá em cima, e removi muita coisa que achei não estar usando, e que não fez efeito nenhum depois que removi. Se eu tiver removido algo que não deveria, por favor me diga... (Testado no IE8 e no FF 3.6.11) Antes: 
/*[START-QCC]*/.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmmc div{visibility:hidden;position:absolute;}.qmmc .qmcbox{cursor:default;display:inline-block;position:relative;z-index:1;}.qmmc .qmcbox a{display:inline;}.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none;}.qmmc li:hover>ul{left:auto;}/*[END-QCC]*//*[START-QCC0]*/#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:90%;}/*[END-QCC0]*/
Agora: 
/*[START-QCC]*/.qmmc {position:relative;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;margin:0px;}.qmmc li:hover>ul{left:auto;}/*[END-QCC]*//*[START-QCC0]*/#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:90%;}/*[END-QCC0]*/

_______________________________________________________________________________

Aproveitando o tópico, gostaria de tira mais duas dúvidas rápidas... Se possível, já que é relacionada ao mesmo assunto... :blush:

1ª) Pra que serve exatamente o código qmclear !?

Tendo em vista que se eu deixar, tudo fica mil maravilhas. Se eu retirá-lo, tanto lá de cima do script, como do final do código (<li class="qmclear"></li>) simplesmente da erro da <HR> abaixo.

Observe... (repare que a HR ficou escondida do lado direito).

(Já arrumei o código, trocando o <li class="qmclear"></li> por <p> </p>. Mais queria entender exatamente qual foi a finalidade desta tag no código.)

Com o Código qmclear:

Screen3.jpg

Sem o Código qmclear:

Screen4.jpg

2ª) Tipo, o correto seria o menu aparecer somente quando eu passo em cima do texto principal.

Acontece que ele está aparecendo mesmo quando eu passo o mouse em área em branco que está bem distante (mais somente do lado direito). Observe onde está o cursor. E ele já exibiu o menu.

Screen5.jpg

Obrigado mais uma vez pelas ajudas. ;)

PS.: Só uma última coisa, qual a importância hoje de se ter o logo de W3C CSS 3 totalmente válido !?

Pois eu uso um hack pra aparecer sombras no IE (filter: Shadow(Color=#000000, Direction=120, Strength=1);). Se eu deixá-lo, ele não dá como código válido. Se eu retirá-lo, e deixar somente o comando text-shadow eu consigo o logo de código 100% válidado como CSS3 pela W3C. Isso tem alguma relevância hoje em dia !? Ou só pra dizer "o meu é válido" !?

Abraços.

Editado por lprtrindade
Link para o comentário
Compartilhar em outros sites
  • 0
_Vinny_

_Vinny_

Postado
Postado

1 - Essa classe tinha as seguintes formatações:

.qmclear {
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none !important;}

Como já não tenho como ver a página, não sei te tiver o que exatamente fazia...

2 - Você usa imagens nos links?

PS.: Só uma última coisa, qual a importância hoje de se ter o logo de W3C CSS 3 totalmente válido !?

Pois eu uso um hack pra aparecer sombras no IE (filter: Shadow(Color=#000000, Direction=120, Strength=1);). Se eu deixá-lo, ele não dá como código válido. Se eu retirá-lo, e deixar somente o comando text-shadow eu consigo o logo de código 100% válidado como CSS3 pela W3C. Isso tem alguma relevância hoje em dia !? Ou só pra dizer "o meu é válido" !?

Olha, CSS3 ainda não é oficial, apesar de possuir um validador no W3C. Ter o código válido hoje em dia quer dizer uma coisa, se não existiria os padrões do W3C, eu usava esse hack em um site, mas resolvi retirar e deixar apenas o text-shadow. Mas dai o problema continua sendo o IE que não suporta o CSS3(exceto versão 9 beta). Bom, isso pra mim esta mais para questão visual/aparencia do site, se quiser um site válido, recomendo não usar. Agora, se quiser primar pela aparencia do site, use o hack apenas para o IE em um CSS separado.

Link para o comentário
Compartilhar em outros sites
  • 0
lprtrindade

lprtrindade

Postado
  • Autor
Postado

Quanto a página, já já coloco o link dela com o código original que eu havia postado aqui. E depois coloco como estou usando agora, para você ver.

Com relação ao hack, realmente é apenas para fazer a sombra. Pois eu utilizo o text-shadow + o hack por causa do IE. Mais queria saber se realmente esse título de "site 100% validado" vale pra alguma coisa (se tem algum benefício), ou simplesmente serve pra dizer que tem.

Com relação ao IE9 que você citou, já desanimei. Pois estava todo animado com a idéia dele aceitar CSS3, porém, pelo que estava lendo ontem, o IE9 (versão final) somente poderá ser instalado no W7 e muito provavelmente somente nos que tiverem SP1; que ainda estão pensando se será lançado a parte do IE9 ou se será lançado somente a atualização já com ele embutido.

Ou seja, pra todo o resto que possui WinXP ou Vista, serão obrigados a continuarem com o IE7/8. Então de qualquer forma o ideal é se padronizar no IE7/8 mesmo. Infelizmente. :(

Obrigado mais uma vez pela ajuda.

Abraços.

Link para o comentário
Compartilhar em outros sites
  • 0
_Vinny_

_Vinny_

Postado
Postado

IE9 apenas para W7 e Vista se não me engano. Sobre a validação correta do seu codigo, bom:

  • Maior compatibilidade com vários navegadores
  • O codigo do seu site escrito/desenvolvido de maneira correta
  • Motores de busca compreendem com mais facilidade com o codigo correto
  • A navegação fica mais rápida
  • entre outras.
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...