Problema altezza bottoni in menù verticale css

**capsula** · 16-07-2006, 12:08

Buona domenica a tutti!
Sto realizzando un menù verticale in Html e Css. Per fare i bottoni uso un'immagine di sfondo che viene cambiata al hover del link.
L'immagine la ho fatta larga 200px e alta 32px, così se qualche utente ingrandisse il testo della pagina i link nel menù non sforerebbero dall'immagine.

Di default vorrei che con gli 11px del font l'immagine risultasse altra 20px, idem al rollover.
Dato che l'immagine normale e del rollover è su uno stesso file non so come scrivere il codice...

Non so bene come spiegare sta cosa quindi vi posto il css, l'hml e l'immagine....
Spero almeno di aver spiegato decentemente cosa voglio ottenere... casomai dite che rispiego meglio se riesco!

HTML

codice:

	<div id="menu9">
		<ul>
			[*]Home
			[*]Products
			[*]Services
			[*]Support
			[*]Order
			[*]News
			[*]About
		[/list]
	</div>

CSS

codice:

#menu9 {
        width: 200px;
        margin: 10px;
        }

#menu9 li a {
        height: 32px;
          voice-family: inherit;
          voice-family: inherit;
          height: 24px;
        text-decoration: none;
        }

#menu9 li a:link, #menu9 li a:visited {
        color: #838383;
        display: block;
        background:  url(menu9.gif) no-repeat left top;
        padding: 8px 0px 0px 35px;
		border-top: 1px solid #838383;
		border-right: 1px solid #838383;
		border-bottom: 0px;
		border-left: 1px solid #838383;
        }

#menu9 li a:hover { 
                color: #434343;
		background-position: 100% -32px;
                padding: 8px 0px 0px 35px;
		border-top: 1px solid #434343;
		border-right: 1px solid #434343;
		border-bottom: 0px;
		border-left: 1px solid #434343;
        }

#menu9 li a.ultimocolleg:link, #menu9 li a.ultimocolleg:visited {
		border-bottom: 1px solid #838383;
		}
		
#menu9 li a.ultimocolleg:hover { 
		border-bottom: 1px solid #434343;
		}

Ecco vedete che la seconda immagine è caricata tramite un background-position: 100% -32pixel
Non so come fare per fare di default un'altezza di 20px ad esempio che sia mantenuta anche all'hover... ieri ho fatto una prova ma stupidamente la ho cancellata

L'immagine per il menu che uso è questa: (sfondo blu link normale, sfondo arancio link all'hover)

**fcaldera** · 16-07-2006, 12:47

Ho chiamato menu.gif l'immagine che hai allegato: in questo caso per gestire lo stato normale e hover è sufficiente ancorare lo sfondo rispettivamente in alto e in basso e dare display: block al link

Nota che per centrare verticalmente il testo del link ho impostato il line-height ad un valore pari all'altezza del menu (32px) e un padding left di 35px per non sovrapporre il link alla freccia
(padding + width = 200px)

codice:

<style>
a {
  display       : block;
  width         : 165px;
  height        : 32px;
  line-height   : 32px;
  
  text-decoration : none;
  padding       : 0 0 0 35px;
  background    : url(menu.gif) top left no-repeat;
}
a:hover {
  background-position    : bottom left;
}
</style>


link

Ciao
-Fab-

**capsula** · 16-07-2006, 14:51

Ciao, grazie della risposta, ho provato il tuo codice e funziona.
Ma quello che voglio io è un'altra cosa.

Vorrei che la dimensione del bottone del link, cioè del[*]Link sia di altezza di 20px (se no con 32 il menù mi occupa troppo spazio), ma se scrivo:
a {
display : block;
width : 165px;
height : 20px;
line-height : 20px;
}

quando si verifica lo stato hover le dimensioni cambiano tornando di 32 pixel....

Non so se riesco a spiegare quello che voglio ottenere....

Grazie, sappiatemi dire, ciao

PS: io e te stiamo vicini, io sono di Montebelluna!!!

**capsula** · 06-08-2006, 15:16

Riuppo il topic.... il problema di prima è risolto... ora ne ho un altro con la visualizzazione con IE....

Vi posto codice HTML, CSS e una foto di ciò che il bug fa così è subito chiaro.

HTML

codice:

<ul id="menuVert">
<li class="titSez">HOME
<li class="titSez">PRIMA VOCE
	<ul>
		[*]Mappa
		[*]Ringraziamenti
	[/list]
<li class="titSez">Forum
	<ul>
		[*]Forum Community
	[/list]
<li class="titSez">News
	<ul>
		[*]News di oggi
		[*]Invia una News
		[*]Il grande Archivio
	[/list]
<li class="titSez">Download
	<ul>
		[*]Scarica a manetta!
	[/list]
<li class="titSez">Contenuti
	<ul>
		[*]Guestbook
		[*]Nuovi progetti
	[/list]
<li class="titSez">Wrestling
	<ul>
		[*]Report PPV
		[*]Rubriche
	[/list]
<li class="titSez">Info
	<ul>
		[*]Contattaci
		[*]Ricerca Staff
		[*]Segnalaci
		[*]Statistiche
		[*]Tuo Account
	[/list][/list]

CSS

codice:

ul#menuVert {
	width: auto;
	margin: 2px;
	}

ul#menuVert li.titSez {
	height: 20px;
	line-height: 20px;
	margin: 1px 0px 0px 0px;
		border-top: 1px solid #000;
		border-right: 1px solid #000;
		border-bottom: 0px;
		border-left: 1px solid #000;
	padding: 0px 0px 0px 8px;
	background: url(../images/menuvert_liv.gif) no-repeat;
	color: #333;
	font-weight: bold;
	}

ul#menuVert li a {
	display: block;
	height: 20px;
	line-height: 20px;
	text-decoration : none;
		border-top: 1px solid #838383;
		border-right: 1px solid #838383;
		border-bottom: 0px;
		border-left: 1px solid #838383;
	padding: 0px 2px 0px 22px;
	background: url(../images/menuvert_active.gif) no-repeat;
	font-weight: normal;
	}

ul#menuVert li a:hover {
		border-top: 1px solid #434343;
		border-right: 1px solid #434343;
		border-bottom: 0px;
		border-left: 1px solid #434343;
	background: url(../images/menuvert_hover.gif) no-repeat;
	text-align: right;
	}

ul#menuVert li a.ultimocolleg { border-bottom: 1px solid #838383; }
ul#menuVert li a.ultimocolleg:hover { border-bottom: 1px solid #434343; }

Come vedete IE mi sfasa la seconda immagine... la carica con una rientranza... invece deve essere in linea come lo è per FF... dove sbaglio?

Grazie a tutti in anticipo, ciao!

**capsula** · 07-08-2006, 14:01

Uffi mi fa male la testa a furia di sbatterla su per il muro

Odio IE... non capisce un cazzo! Come si risolve il mio problema??

**Mich_** · 07-08-2006, 14:23

Non sono sicuro di cio` che sto dicendo, ma forse vale la pena provare.

Credo che alcuni browser usino il padding-left per spostare il testo nei[*], altri il margin-left.
Quindi converrebbe sempre definire sia margin-left che padding-left sia nel <ul> che nel[*] (mettendoli a zero se non servono).

**capsula** · 07-08-2006, 15:22

Cavoli hai ragione!!! Grazie mille!!!
Dato che il problema era solo con IE ho usato i commenti condizionali! Posto il codice, in grassetto le modifiche!

codice:

ul#menuVert {
	width: auto;
	margin: 2px;
	}

ul#menuVert li.titSez {
	height: 20px;
	line-height: 20px;
	margin: 1px 0px 0px 0px;
		border-top: 1px solid #000;
		border-right: 1px solid #000;
		border-bottom: 0px;
		border-left: 1px solid #000;
	padding: 0px 0px 0px 8px;
	background: url(images/menuvert_liv.gif) no-repeat;
	color: #333;
	font-weight: bold;
	}

ul#menuVert li a {
	display: block;
	height: 20px;
	line-height: 20px;
	text-decoration : none;
		border-top: 1px solid #838383;
		border-right: 1px solid #838383;
		border-bottom: 0px;
		border-left: 1px solid #838383;
	padding: 0px 2px 0px 22px;
	background: url(images/menuvert_active.gif) no-repeat;
	font-weight: normal;
	}

ul#menuVert li a:hover {
		border-top: 1px solid #434343;
		border-right: 1px solid #434343;
		border-bottom: 0px;
		border-left: 1px solid #434343;
	background: url(images/menuvert_hover.gif) no-repeat;
	text-align: right;
	}

ul#menuVert li a.ultimocolleg { border-bottom: 1px solid #838383; }
ul#menuVert li a.ultimocolleg:hover { border-bottom: 1px solid #434343; }
</style>
<!--[if IE]>
<style type="text/css">
ul#menuVert li.titSez {
	padding: 0px 0px 0px 0px; /* annullo padding left per titoli sezioni */
	text-indent: 8px; /* invece del padding uso l'indentazione del testo di 8 px */

	}
ul#menuVert li a {
	text-indent: 0px; /* alle altre voci tolgo l'indentazione che si andava a sommare ai già 22px di padding creandone 30px in totale */
}
</style>

<![endif]-->

Discussione: Problema altezza bottoni in menù verticale css

Strumenti discussione

Ricerca discussione

Visualizza

Problema altezza bottoni in menù verticale css

Permessi di invio