- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Menu a scomparsa e css
-
Menu a scomparsa e css
Salve a tutti! Sto facendo qualche prova per i menu a scomparsa, ma ho qualche problema con il layout finale. date uno aguardo qui per esempio:
h*tp://www.bed-and-breakfast-in-umbria.it/test-menu.aspx
Vorrei che le caselle nel menu "chiuso" siano più basse, ma non riesco a capire come fare!
Qualcuno ha idea? Ecco un pezzo di css, quello che interessa:div#divMenuUmbria{
color: #FFFFFF;
vertical-align: top;
width: 100%;
background-color: #1569C7;
}
div#divMenuUmbria li li:hover{
background-color: #377ed0;
}div#divMenuUmbria h3{font-weight: bolder; font-size: 15px;
border-top: 1px solid #FFF;color:; margin: 0;padding: 4px 10px; text-align: center;
}
div#divMenuUmbria ul,div#divMenuUmbria li{margin: 0;padding: 0;list-style-type: none}
div#divMenuUmbria li{margin: 0 0 1px 0}
div#divMenuUmbria a{display: block;padding-left: 15px;
border-top: 1px solid;background-color: #BDBDBD;color: #000;
text-decoration: none;font-weight: bold}
div#divMenuUmbria a:hover{color: #00005A;background-color: #0099FF}
div#divMenuUmbria ul ul a{color: #333; background-color: #AECDFF;font-weight: normal}Grazie a tutti!
-
Ciao cali1981,
ho dato un'occhiata al codice e devo essere sincero non sono risucito bene a capire quale possa essere il problema, perchè sull'ultima voce l'altezza sembra corretta, mentre nelle altre no... non capisco perchè: l'unica cosa che cambia dalle altre voci è il fatto che un elemento del sottomenu sta su due righe invece che su una...Fai una prova molto semplice impostando un altezza fissa agli H3 e vediamo se i li della lista si adattano di conseguenza.
-
peggio! Cambia pochissimo.. potrebbe essere dovuto a ul e li che stanno dentro e sono nascosti?
EDIT: se metto h3 inline non c'è spazio sopra o sotto, ma poi si vede malissimo.. non ci sarebbe qualcosa di intermedio tra inline e block??
-
@cali1981 said:
peggio! Cambia pochissimo.. potrebbe essere dovuto a ul e li che stanno dentro e sono nascosti?
EDIT: se metto h3 inline non c'è spazio sopra o sotto, ma poi si vede malissimo.. non ci sarebbe qualcosa di intermedio tra inline e block??
Ci sta tutto.. io riscriverei il foglio di stile in modo molto dettagliato elemento per elemento. Potrebbe essere che qualche elemento abbia ereditato qualcosa di spiacevola da qualche altro elemento.. qualcosa che non trovo.
Eheh no non c'è altro.. però puoi provare a dare un padding in altezza all'H3, magari ottieni un risultato accettabile.
-
Gh devo trovare un sinonimo per la parola elemento..
-
Ora sembra che va meglio, per lo meno con firefox.. con ie alcune cose vengono una schifezza.. Dai uno sguardo qui per esempio:
http://www.bed-and-breakfast-in-umbria.it/ita/assisi/assisi.aspx
con firefox k, con ie meno, molto meno...
-
Credo di aver risolto anche questo!!! IE mi visualizza i new line se li scrivo, cioè se scrivo:
</li>
</ul>Con l'accapo in mezzo, lui va a capo anche nella pagina! Credo sia un bug, non dovrebbe per niente fare così!
-
@cali1981 said:
Credo di aver risolto anche questo!!! IE mi visualizza i new line se li scrivo, cioè se scrivo:
</li>
</ul>Con l'accapo in mezzo, lui va a capo anche nella pagina! Credo sia un bug, non dovrebbe per niente fare così!
Questa poi... non lo so se è un bug, sinceramente... :bho:
Beh l'importante è che tu abbia risolto
-
Ho fatto una ricerchina e guarda qua, bug e fixes:
http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/
e qua
http://www.csscreator.com/node/6745A quanto pare è come dici tu, IE non traduce bene i tag li e introduce un elemento di new line se ci sono degli spazi.
-
Grazie per la risoluzione, ma per me va bene anche semplicemente togliere l'accapo! Comunque è una cosa da ricordarsi!
Ciao, alla prossima!
-
Basta che tu aggiunga per distanziare
border-top: 1px;
saluti
Alibrando
-
Grazie, proverò anche così!
