← HTML + CSS

Problema com menu <ul> <li> <a>

Lida 2922 vezes

Offline

Pedro Magalhães 
Membro
Mensagens 397 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Boas!

Tenho aqui um enigma com um menu em css, mais propriamente com âncoras.
Este menu tem 960px e está construído em lista não ordenada.

O que se passa é que o link não assume a largura e a altura do <li>.
Não posso dar dimensões aos <li>'s ou <a>'s porque o menu vai ser traduzido para 6 idiomas mediante o que o utilizador escolher.
Aqui fica o meu html e css e um screenshot (a border é a dimensão que o link tem, não existe no css)


HTML

Código: [Seleccione]
           <div id="topmenu">
                <ul>
                    <li><a href="#">O Hotel</a></li>
                    <li><a href="#">Quartos & Suites</a></li>
                    <li><a href="#">Bares & Restaurantes</a></li>
                    <li><a href="#">Praia</a></li>
                    <li><a href="#">Golfe</a></li>
                    <li><a href="#">SPA</a></li>
                    <li><a href="#">Lazer e Actividades</a></li>
                    <li class="last"><a href="#">Eventos</a></li>
                </ul>                                                                                                                                
            </div>


CSS

Código: [Seleccione]
/* Top Menu  */

#wrapper #topmenu{width:960px; height:33px; border-top:2px solid #685232; margin:0 auto; }
#wrapper #topmenu ul{width:960px; height:33px; float:left; background:url(../images/jpg/bkg_menu.jpg) top center no-repeat; margin:0 auto; text-align:center; display:block}
#wrapper #topmenu ul li{padding:0px 22px; line-height:12px; height:33px; float:left; list-style-type:none; margin-right:1px; display:block}
#wrapper #topmenu ul li.last{padding:0px 24px 0px 24px; margin-right:0}
#wrapper #topmenu ul li a{text-decoration:none; display:block; margin:10px auto 0 auto; font-size:12px; color:#665232; font-family:"Times New Roman", Times, serif; text-transform:uppercase}
#wrapper #topmenu ul li a:hover{color:#fff !important}
#wrapper #topmenu ul li:hover{background:#c7beb0; cursor:pointer; color:#fff !important}
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Tenta assim:

Código: [Seleccione]
/* Top Menu  */

#wrapper #topmenu{width:960px; height:33px; border-top:2px solid #685232; margin:0 auto; }
#wrapper #topmenu ul{width:960px; height:33px; float:left; background:url(../images/jpg/bkg_menu.jpg) top center no-repeat; margin:0 auto; text-align:center; display:block}
#wrapper #topmenu ul li{padding:0px 22px; line-height:12px; height:33px; float:left; list-style-type:none; margin-right:1px; display:block}
#wrapper #topmenu ul li.last{padding:0px 24px 0px 24px; margin-right:0}
#wrapper #topmenu ul li a{text-decoration:none; display:block; margin: 0 auto; font-size:12px; color:#665232; font-family:"Times New Roman", Times, serif; text-transform:uppercase; line-height:33px;}
#wrapper #topmenu ul li a:hover{color:#fff !important}
#wrapper #topmenu ul li:hover{background:#c7beb0; cursor:pointer; color:#fff !important}
Offline

Pedro Magalhães 
Membro
Mensagens 397 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Se souberem um menu feito em CSS que ajuste a 100% de largura pré-definida seria talvez o ideal.
Tudo o que encontrei até agora na web nunca é compatível com todos os browsers...
Offline

Pedro Magalhães 
Membro
Mensagens 397 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Tenta assim:

Código: [Seleccione]
/* Top Menu  */

#wrapper #topmenu{width:960px; height:33px; border-top:2px solid #685232; margin:0 auto; }
#wrapper #topmenu ul{width:960px; height:33px; float:left; background:url(../images/jpg/bkg_menu.jpg) top center no-repeat; margin:0 auto; text-align:center; display:block}
#wrapper #topmenu ul li{padding:0px 22px; line-height:12px; height:33px; float:left; list-style-type:none; margin-right:1px; display:block}
#wrapper #topmenu ul li.last{padding:0px 24px 0px 24px; margin-right:0}
#wrapper #topmenu ul li a{text-decoration:none; display:block; margin: 0 auto; font-size:12px; color:#665232; font-family:"Times New Roman", Times, serif; text-transform:uppercase; line-height:33px;}
#wrapper #topmenu ul li a:hover{color:#fff !important}
#wrapper #topmenu ul li:hover{background:#c7beb0; cursor:pointer; color:#fff !important}

Excelente orion. Não me lembrei do line-height para os links,  :obrigado:!
Em altura agora tenho o que pretendo. Agora só falta mais duas cenas:
- a largura do link assumir a largura do <li>.
- e por último hard-core, os <li>'s ajustarem-se à largura do <ul>, sem que lhes dê largura apenas padding...
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Se souberem um menu feito em CSS que ajuste a 100% de largura pré-definida seria talvez o ideal.
Tudo o que encontrei até agora na web nunca é compatível com todos os browsers...

Tenta este... http://dicaswp.com/2010/04/15/dropdown-com-as-paginas-e-sub-paginas-do-wordpress/ Sei que funciona em IE7+, FF3, Opera, Chrome e Safari.
Offline

Pedro Magalhães 
Membro
Mensagens 397 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Obrigado Orion ;)

Olha, mas os <li> não ajustam à largura do <ul>.
Não sei se fiz entender. Os <li> tem de fazer um redimensionamento automático, ou em padding ou em width.
É fácil fazer este ajuste fixando a largura de cada <li>. Mas não posso fazer isso porque o menu será traduzido em vários idiomas...
Talvez só seja possível com recurso a javascript.

Aqui fica o exemplo do menu que enviaste no screenshot.


Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Obrigado Orion ;)

Olha, mas os <li> não ajustam à largura do <ul>.
Não sei se fiz entender. Os <li> tem de fazer um redimensionamento automático, ou em padding ou em width.
É fácil fazer este ajuste fixando a largura de cada <li>. Mas não posso fazer isso porque o menu será traduzido em vários idiomas...
Talvez só seja possível com recurso a javascript.

Aqui fica o exemplo do menu que enviaste no screenshot.

Tentaste com 100%?
Offline

Nuno 
Administrador
Mensagens 7780 Gostos 216
Feedback +2

Troféus totais: 42
Trófeus: (Ver todos)
100 Poll Votes Level 7 Search Mobile User Level 6 Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Tens que dar percentagens a cada li individualmente para eles ajustarem ao ul ou à div em si.
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Metes um min-width, se for maior cresce, se for menor, não passa do min-width definido.