Back to top

Autore Topic: [RISOLTO] Padding voce di menu  (Letto 4211 volte)

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
[RISOLTO] Padding voce di menu
« il: 22 Giu 2012, 16:49:49 »
Salve a tutti. La mia voce di menu
#hornav ul.level-0 > li.menu-item


ha un padding-top di 40px................................... .


Il risultato è che, se faccio click sul testo, funziona il link;
se, invece, clicco sul pulsante e non sul testo del pulsante,
naturalmente il link non funziona per via di quel padding-top a 40 px che serve a spostare il testo sul fondo del pulsante menu.


Potrei risolvere in qualche modo?
« Ultima modifica: 25 Giu 2012, 13:38:53 da Nuvola6 »

adottauncane

  • Visitatore
Re:Padding voce di menu
« Risposta #1 il: 22 Giu 2012, 21:13:19 »
Ciao Nuvola6,
un link al sito?

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Re:Padding voce di menu
« Risposta #2 il: 24 Giu 2012, 08:45:34 »
Ciao adottancane.
Hai ragione. Eccolo

adottauncane

  • Visitatore
Re:Padding voce di menu
« Risposta #3 il: 24 Giu 2012, 13:05:51 »
Ma, forse basta allargare la parte grigina e farla come il bianco che la comntiene...
Una cosa così:

Codice: [Seleziona]
#hornav li.menu-item li.menu-item a.menu-item, #sublevel li.menu-item li.menu-item a.menu-item {
    color: #8F8F8F;
    display: block;
    font-size: 92%;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
    margin-left: -10px !important;
    margin-right: 0;
    margin-top: -10px !important;
    padding: 20px 10px;
    text-decoration: none;
    width: 185px !important;
}
#hornav li.menu-item li.menu-item, #sublevel li.menu-item li.menu-item {
    background: none repeat scroll 0 0 transparent;
    display: block;
    float: none;
    margin-bottom: 10px !important;
    margin-left: -10px !important;
    margin-top: -10px;
    padding-left: 10px !important;
    padding-top: 10px !important;
}
Per provare incollalo solo al fondo del file menu.css

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Re:Padding voce di menu
« Risposta #4 il: 25 Giu 2012, 09:22:32 »
Grazie per l'aiuto, adottauncane.
Non funziona ancora :-(

adottauncane

  • Visitatore
Re:Padding voce di menu
« Risposta #5 il: 25 Giu 2012, 11:18:04 »
Non è ancora perfetto, però penso che sia l'unico modo... (sempre che abbia capito cosa vuoi  :) )

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Re:Padding voce di menu
« Risposta #6 il: 25 Giu 2012, 11:23:34 »
In pratica, vorrei che tutto il pulsante grigio diventi area "cliccabile", se così si può dire.

adottauncane

  • Visitatore
Re:Padding voce di menu
« Risposta #7 il: 25 Giu 2012, 11:28:39 »
Sì, con il codice che ho messo io il sottomenù lo diventa. Sistemando ancora qualcosa per togliere i bordi bianchi. Tu ti rifersci al 1° livello?

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Re:Padding voce di menu
« Risposta #8 il: 25 Giu 2012, 11:32:38 »
Si, esatto, solo al primo livello. Non avevo notato che il tuo codice funzionava sul sottolivello.
Quindi lo tolgo, vero?

adottauncane

  • Visitatore
Re:Padding voce di menu
« Risposta #9 il: 25 Giu 2012, 12:17:30 »
Sì. Prova a togliere i padding dal primo css e metterli nel secondo. Il primo lo correggi il secondo lo aggiungi in fondo al file menu.css:

Codice: [Seleziona]
#hornav ul.level-0 > li.menu-item {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    display: block;
    float: left;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}
menu.css (riga 43)


Codice: [Seleziona]
#hornav ul.level-0 > li.menu-item span.menu-title {
    display: block;
    padding-left: 20px !mportant;
    padding-right: 20px !important;
    padding-top: 43px !important;
}

E vedi se non scombina il secondo livello...

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Re:Padding voce di menu
« Risposta #10 il: 25 Giu 2012, 12:31:19 »
Ora l'area è interamente sensibile al click.
Però si è scombinato il secondo livello

adottauncane

  • Visitatore
Re:Padding voce di menu
« Risposta #11 il: 25 Giu 2012, 13:31:39 »
Sostituisci tutto il menu.css con questo:


Codice: [Seleziona]

#hornav,#sublevel {position:relative}
#hornav ul.sp-menu { margin: 10px}
#sublevel ul.sp-menu { padding: 10px}
#hornav .megacol,#sublevel .megacol {float:left}
#sublevel ul.empty,#sublevel li.empty {height:0px!important;display:none}
#hornav ul li,#sublevel ul li{background:none;padding:0;margin:0}
/*Top Level*/
#hornav,#sublevel{}

#hornav ul.level-0,
#sublevel ul.level-1{float:left;margin:0;padding:0;cursor:pointer;}



#hornav ul.level-0 > li.menu-item {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    display: block;
    float: left;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}


#hornav ul.level-0 > li.menu-item span.menu-title {
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 43px;
}

#hornav ul.level-1 > li.menu-item span.menu-title {
    display: block;
    padding: 0px !important;
}




#sublevel ul.level-1 > li.menu-item{background:none;display:block;float:left;margin:0;padding:0}

#hornav ul.level-0 > li.menu-item.last,
#sublevel ul.level-1 > li.menu-item.last {}


#hornav ul.level-0 > li.menu-item > a.menu-item
#sublevel ul.level-1 > li.menu-item > a.menu-item{display:block;font-weight:400;text-decoration:none;margin:0;padding:5px 10px;}

#hornav ul.level-0 > li.menu-item span.has-image,
#sublevel ul.level-1 > li.menu-item span.has-image{padding-left:18px;display:block;background-repeat:no-repeat;background-position:0 50%}

#sublevel ul.level-1 > li.menu-item span.menu-title{display:block}

#hornav ul.level-0 > li.menu-item span.menu-desc,
#sublevel ul.level-1 > li.menu-item span.menu-desc{display:block;font-weight:400;font-size:92%}


#sublevel ul.level-1 > li.parent > a.menu-item span.menu {display:block;background: none; padding-right: 12px;background:url(../images/big_daddy.png) no-repeat 100% 50%}

#hornav ul.level-0 > li.parent > a.menu-item span.menu {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/big_daddy.png");
    background-origin: padding-box;
    background-position: right 50px;
    background-repeat: no-repeat;
    background-size: auto auto;
    display: block;
    margin-right: 5px;
}

#hornav ul li.parent > a.menu-item span.menu,
#sublevel ul li.parent > a.menu-item span.menu {display:block;padding-right: 12px;background:url(../images/daddy.png) no-repeat 100% 50%}

/*Submenu*/
#hornav li .submenu,#sublevel li .submenu {position: absolute;display:none;z-index:9999}

/*Styling subnav*/
#bg_hornav{background:url(../images/bg_topmenu.png) no-repeat;width:908px;height:74px;margin-left:41px;}
#hornav {float:left;width:690px;margin-left:8px;height:65px;}

#hornav ul ul,
#sublevel ul ul {float: none;}

#hornav li.menu-item li.menu-item, #sublevel li.menu-item li.menu-item {background:none;display:block;margin:0;padding:0;float:none}

#hornav li.menu-item li.menu-item.first,
#sublevel li.menu-item li.menu-item.first { border-top: none; }

#hornav li.menu-item li.menu-item a.menu-item, #sublevel li.menu-item li.menu-item a.menu-item{display:block;font-size:92%;font-weight:400;line-height:normal;text-decoration:none;margin:0;padding:7px 5px;color:#8f8f8f}

/*Dropline or Split menu*/
#sublevel ul.level-1 > li.menu-item{background:none}
#sublevel ul.level-1 > li.menu-item > a.menu-item{color:#333;padding:8px 10px!important}
#sublevel ul.level-1 > li.menu-item span.has-image{}
#sublevel ul.level-1 > li.menu-item span.menu-title{}
#sublevel ul.level-1 > li.menu-item span.menu-desc{}

/*Group*/
* html .group{height:0}
#hornav ul li.menu-item .group{background:none!important;overflow:hidden}
#hornav .group-content ul.sp-menu{margin:10px 5px!important}
#hornav .group-title{overflow:hidden}
#hornav .group-title .menu-title{font-size:100%;font-weight:400;line-height:normal;text-transform:uppercase}
#hornav .group-title .menu-desc{padding-left:0!important}

Dovrebbe funzionare.

Offline Nuvola6

  • Appassionato
  • ***
  • Post: 718
  • Sesso: Femmina
    • Mostra profilo
Re:Padding voce di menu
« Risposta #12 il: 25 Giu 2012, 13:38:37 »
Ci sta poco da fare: i menu sono la tua specialità!
Non c'è un solo post in cui ho sottoposto un menu a verifica e l'hai fatto funzionare alla grande!


Brava davvero :-)
Grazie è poco ma è il minimo che possa dirti.


 



Web Design Bolzano Kreatif