Menu em 2 linhas

[danielsjdr 0]

Bom dia pessoal,Esquecendo o tópico anterior (o layout meu mudou), estou com dificuldades em realizar um menu em 2 linhas.Como seria isto? :DPor exemplo, tenho uma imagem de 180px por 80px, neste caso esta imagem possui um desenho em seu lado direito e deste desenho sai uma linha fina no meio da imagem.O caso é que, se o menu tiver muitas opções ele deve quebrar as opções, por exemplo, 3 acima da linha e 3 abaixo desta linha.Fiz este menu com CSS e usando os objetos <ul> e <li> para as opções (como um menu normal).A quebra da quantidade de opções, vou fazer via programação, por exemplo, se vierem do BD 10 opções sei q irão 5 acima e 5 abaixo da linha, se vierem 3, sei que podem ficar todas acima desta linha.Em resumo, minha dificuldade é a seguinte: Os objetos <li> eu uso display:inline. Como fazer esta quebra?Teria que criar dois blocos em CSS, um para ficar acima da linha e outro para ficar abaixo?Obrigado

[TheChessMan 0]

Nossa, quase deu um nó aqui, hehe.. tente ser mais sucinto nas suas explicações amigão!Fica meio difícil de dizer assim... não teria como postar um linkzinho pra nós ajudarmos?=)

[danielsjdr 0]

Desculpem-me... :D

 

O problema de link é que o meu FTP tá um lixão, mas vale a imagem:

 

 

Bom é isto, acima desta linha tem q ter menu, abaixo tb, só que nenhum deles pode sobrescrever a imagem de fundo, no caso um cacto...

 

Via programação eu vou determinar o número max de menus, acima e abaixo do linha...

 

A duvida é como fazer em CSS que eles fiquem acima ou abaixo da linha...

 

Eu fiz uma div em que as tag <li> recebem display:inline;, funciona bem para uma linha somente....

 

e para fazer a linha de baixo, tem que ser outro div?

 

Att

 

Daniel

[micox 2]

Mostra um desenho completo do que voce quer...

[TheChessMan 0]

Acho que você só precisa colocar largura fixa no seu ulAí se os elementos chegarem perto do cactus, eles vão para baixo

[danielsjdr 0]

Putz... q burrice !!!!!!!!!!!!!!!!! :D

 

isso resolveu um dos meus problemas.

 

Veja

 

Agora eu quero que os textos fiquem centralizados (tentei text-align: center;) e nda...

 

Outra coisa, alguem sabe como acabar com a diferença deste menu do IE para o FF... na verdade nenhum dos dois esta como eu quero... Algumas opções acima da linha e outras abaixo da linha...

 

Obrigado

[TheChessMan 0]

agora é questão de posicionamento cara, margins, paddings...

 

divirta-se!

 

=)

 

 

[uPDATE]

 

Outra coisa, não use hacks do tipo "_padding", isto está totalmente em desuso, se você precisa de hacks para o ie, use o *html, ou "hack estrela", que tbm já começa a ser desaconselhado devido ao IE7 não reconhecê-lo (pq é um bug das versoes anteriores), o melhor jeito é usando comentarios condicionais

 

[/uPDATE]

[pa_bruno 0]

na verdade ele sempre esteve me desuso... o problema eh q ele eh um hack facil e rapido... ae o pessoal naum procura outros...

 

outra coisa, tem menu tah cheio d fechamento </strong> sem ter o d abertura... veja isso... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[danielsjdr 0]

Arrumei isto tdo... na verdade fiz o seguinte:

 

#topodir p {  font-family:Verdana, Arial, Helvetica, sans-serif;  text-align:center;  padding:0;  margin:0;  line-height:26px;}#topodir a { border-right:1px solid #ABA877; text-decoration:none; color:#FFF; text-transform:uppercase; }#topodir a:hover { background-color: #ABA877; color: #FFF;}

Aí eu mesmo controlo quantos irão aparecer sem a necessidade de um <li>...

 

Ainda não dei upload, mas funcionou perfeitamente no IE e no FF...

 

Melhor