Aiuto per menù fatto con immagini e relativo sottomenù

[warim1974]

Salve mi chiamo Francesco e sono un autodidatta che si sta cimentando con un piccolo sito internet. So poco di html e non quasi nulla di css e mastico poco l'inglese. Dopo 3 giorni di tentativi e prove (sto uscendo pazzo) sono riuscito a creare un menu' fatto con delle immagini create con Photoshop (il testo messo come immgine mi sembra più definito e bello così) e a cui ho applicato un effetto di fade hover (seguendo questo tutoria http://www.fedeweb.net/tutorial-jquery-fade-hover/ che mi piace e sono riuscito a mettere sotto ad ogni immagine un sottomenu andando a tentativi usando questo tutorial http://smashinghub.com/simple-jquery-drop-down-menu-tutorial.htm.
Ora non riesco a mettere a posto il menù (causa mia ignornza) e volevo chiedere se qualcuno poteva aiutarmi:
1. mettere meno spazio tra le parole (immagini): news biography works ecc
2. centrare meglio il menù rispetto al centro della pagina web e ogni sottomenu rispetto alla voce del menù relativa
3. tra la prima voce del sottomenù e la relativa voce del menù ci dovrebbe essere meno spazio
4. aggiustare le varie voci del sottomenù che risultano essere sovraesposte (uniformare il tutto)
5. far si che le scritte del sottomenù fossero formattate a sinistra (ora come ora sono tipo centrate)

Qualcuno potrebbe aiutarmi col codice per favore? Lo lascio in allegato.
Grazie 1000 a chiunque possa aiutaemi. Buona serata.
Francesco

P.s: non ho capito come mettere gli allegati, una copia di ciò che ho fatto si trova qua www.annaderrico.com/sito.zip

 

[criric]

Ciao

1. mettere meno spazio tra le parole (immagini): news biography works ecc

togli width:100px; da qui

	.navigation  li {
		float:left;			/* Show list items inline */
		width:100px; 
		position:relative; 
	}

e modifica le misure del padding:8px 7px 8px 7px; (rispettivamente : top right bottom left) da qui fino a che non trovi la distanza giusta

	.navigation  li a {
		background:#ffff; 
		color: black;
		display:block;  	/* Making sure a element covers whole li area */
		padding:8px 7px 8px 7px; 
		text-decoration:none; /* No underline */
		border-top:1px solid #0;
		text-align:center; 
	}

 

[warim1974]

Provo, grazie 1000!!