Menu (UL+Li): bottoni ridimensionabili!

[99caos]

Ho creato un menu tramite liste e l'ho animato tramite MooTools.

Il risultato potete vederlo qui:

MainMenu

Vorrei migliorarlo in alcuni punti.

Innanzi tutto vi posto l'html:

<div id="mainmenu">
 	<ul>
		<li id="iconHome">
			<a href="mainMenu.html" title="test">
				
				Home
			</a>
			
		
	[/list]
</div>

Div contenitore #mainmenu
Ul
Li (background per clip)
A (background specifico)
Non breaking space (per FF)
Em che racchiude il testo (per nasconderlo)
I (background di chiusura)

Tutto questo non è molto simpatico!
Devo scrivere necessariamente tutto questo codice per farlo funzionare?

Più avanti trovata il listato del css, ora vi posto la versione html completa:

<div id="mainmenu">
 	<div id="topLayers">
		<div id="login">
			

Registrati o Effettua il  <span class="logOutLink">[ Login ]</span></p>
		</div>
		<div id="search">
			

Effettua una <span class="logOutLink">[ Ricerca ]</span></p>
		</div>
	</div>
	<ul>
		<li id="iconHome">Home
		<li id="iconLogin">Login
		<li id="iconSearchUser">Utenti
		<li id="iconSearchPhoto">Foto
		<li id="iconSearchVideo">Video
		<li id="iconSearchMusic">Musica
		<li id="iconSearchClan">Clan
		<li id="iconSearchTag">Etichette
		<li id="iconSearchDefault">Ricerca
		<li id="iconHelp">Help
	[/list]
</div>

il css è il seguente:

#mainmenu ul { 
	height: 30px;
	width: 780px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	overflow: hidden;
}
 
#mainmenu ul li {
	float: left;
	display: block;
	width: 78px;
	height: 30px;
	// questo è lo sfondo generale dei pulsanti serve per coprire un piccolo bug
	background: transparent url("../images/mainMenu_buttonBg.png") top right no-repeat;
	line-height: 30px;
}
// questo è lo sfondo di destra
#mainmenu ul li i {float: right; width: 10%; background: transparent url("../images/mainMenu_buttonEnd.png") top right no-repeat;}
// questo è lo sfondo di sinistra, le immagini vengono definite successivamente
#mainmenu ul li a {float: left;  width: 90%; text-decoration: none}
// questo serve per far scomparire il testo
#mainmenu ul li a em { display: none;}

// qui ci sono le definizioni delle immagini di sfondo dei pulsanti
#iconHome a					{background: transparent url("../images/mainMenu_buttonHome.png")}
#iconLogin a				{background: transparent url("../images/mainMenu_buttonLogin.png")}
#iconSearchUser a			{background: transparent url("../images/mainMenu_buttonUsers.png")}
#iconSearchPhoto a		{background: transparent url("../images/mainMenu_buttonPhoto.png")}
#iconSearchVideo a		{background: transparent url("../images/mainMenu_buttonVideo.png")}
#iconSearchMusic a		{background: transparent url("../images/mainMenu_buttonMusic.png")}
#iconSearchClan a			{background: transparent url("../images/mainMenu_buttonClan.png")}
#iconSearchTag a			{background: transparent url("../images/mainMenu_buttonTags.png")}
#iconSearchDefault a		{background: transparent url("../images/mainMenu_buttonSearch.png")}
#iconHelp a					{background: transparent url("../images/mainMenu_buttonHelp.png")}

Visto che il[*] si ingrandisce al passaggio del mouse, svelando il resto dell'immagine, per rendere questo effetto ho impostato le percentuali: 90% ai link e 10% ai tag [i].
In questo modo però quando si ingrandisce il pulsante tra il link e il tag [i] si forma uno spazio vuoto di uno o due px.
Per ovviare a questo ho impostato uno sfondo particolare per i[*].

Suggerimenti?

[99caos]

ovviamente le png si vedono solo in FF e IE7. successivamente ci farò l'hack... ora mi interessa solo perfezionare la tecnica

[99caos]

cavolaccio!

ho aggiornato i file in remoto e mi si è sballato tutto... ed ora non ho tempo per rimetterci le mani...

dovrò aspettare domani per fare le modifiche.

per il momento non spaventatevi se vedete un macello

[99caos]

Ho ripristinato la situazione ed ho fatto sostanziali modifiche al css e all'html.

Il link è sempre quello:

MooTools+Css Menu

html:

<ul>
	<li id="iconLogin">Login[/list]

css:

#mainmenu ul
{ 
	height: 30px;
	width: 780px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	/* questo fa sfarfallare l'ultimo bottone
	ma in mancanza l'ultimo bottone andrebbe a capo*/
	overflow: hidden;
}

#mainmenu ul li
{ 
	float: left;
	width: 78px;
}

#mainmenu ul li a
{ 
	display: block;
	/* il tag a contiene come bg la fine del pulsante in posizione
	alto destra*/
	background: transparent url('../images/mainMenu_buttonEnd.png') no-repeat top right;
	height: 30px;
	padding-right: 12px;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
}

#mainmenu ul li a em
{ 
	display: block;
	/*e' il tag em che contiene il resto dell'immagine */
	background: transparent url("../images/mainMenu_button.png") no-repeat;
	margin: 0;
	height: 30px;
	line-height: 30px;
	padding: 0 0 0 12px;
	font-style: normal;
}

/* i tag b invece contengono le immagini
che vengono mostrate solo al ridimensionamento
dei pulsanti

qui ho un problema,
non riesco a gestire l'altezza delle immagini in modo che occupino
tutto lo spazio del pulsante.
Credo che il problema nasca dalla natura inline dell'elemento b
*/
#mainmenu ul li a em b
{ padding-left: 70px; width: 40px; height: 60px;}

#iconHome b
{ background: transparent url("../images/mainMenu_home.png") top right no-repeat}

Problemi

- sfarfallio dell'ultimo pulsante a causa della fuoriuscita dal width del contenitore
- ora le immagini che si trovano nei pulsanti non occupano tutta l'altezza degli stessi