Float centrati
Lunedì 24 Settembre 2007 - 11:38
di Alessandro Fulciniti
Il titolo di questo post potrà sembrare un controsenso, ma magari
vi sarà capitato almeno una volta di chiedervi: come posso centrare
un elemento che contiene una serie di float a larghezza non determinata?
La recentissima risposta viene data in When a float
is not a float, un estensivo tutorial che presenta una tecnica proprio per
questa situazione: ecco l’esempio.
In sostanza si tratta di usare i float combinati con i posizionamenti relativi.
La tecnica richiede un contenitore aggiuntivo (nel caso dell’esempio un div che
contiene la lista) e il commento condizionale per sistemare la resa su IE, ma
tutto sommato è semplice e offre una buona compatibilità. Ho testato
l’esempio con successo su IE dalla versione 5 alla 7 oltre che sulle ultime versioni
di Firefox, Opera e Safari.
Commenti
1
Ad una soluzione del genere ci ero già arrivato, il problema al quale però non ero riuscito a trovare soluzione ( e che si nota anche in quella soluzione ) è che se i contenuti sono tali da occupare più righe solo la prima di esse è realmente allineata al centro, le altre invece saranno ancora allineate a sinistra.
# - postato da Xscratch - 24 Settembre 2007 - 12:01
2
una soluzione ingegnosa e molto molto utile, soprattutto per realizzare menu orizzontali; se è davvero crossbrowser la userò sicuramente.
3
Ecco questa è la classica soluzione che non mi sarebbe mai venuta in mente, fortuna che una necessità del genere non l’avevo ancora avuta :)
Ora il massimo sarebbe una versione senza conditional comments…# - postato da crea-tivo livorno - 24 Settembre 2007 - 13:05
4
Eureka!!! Niente ma davvero niente male …
5
Soluzione ingegnosa anzichè no!
Questi tutorial dimostrano come, combinando proprietà CSS che generalmente non si pensa di usare insieme, si ottengono soluzioni interessanti.# - postato da idrolitina - 24 Settembre 2007 - 14:40
6
Grazie mille Alessandro!!!!
Avevo visto da qualche altra parte questa stessa soluzione qualche tempo fa, ma proprio quando l’altro giorno mi serviva non ero riuscito a ritrovarla!
Cmq ho usato un’altra tecnica che funziona. Eccola, anche se complicata:
http://brunildo.org/test/NavBa.....php?item=1
(NON sono display:inline anche se nell’es sono solo testo)del.icio.us-ed ;)
7
@Crea-tivo Livorno: il commento condizionale si può eliminare usando gli hack. Nell’esempio dell’articolo basta togliere il commento condizionale e aggiungere questa regola nel CSS principale:
* html .navwrap ul, *:first-child html .navwrap ul{ float: left }
Fonte: Hack per IE7 e la tabella di compatibilità.
Ciao!# - postato da Alessandro Fulciniti - 24 Settembre 2007 - 15:31
8
Nel mio sito
www.visonasport.it
ho inserito un menu flottante di Eddie Traversa che mi permette di tenere il menu sempre visibile in alto anche se si scorre la pagina in verticale. Purtroppo non sono un programmatore esperto ed ho qualche difficoltà a portarlo al centro anche quando la risoluzione dello schermo è superiore ed inferiore a quella ottimizzata per il mio sito (1024 x 768). Forse qualcuno di voi mi può dare una mano, vi sarei molto grato e sono disposto a ricompensare chi mi può risolvere il problema. Vi ringrazio anticipatamente.
Luca Visonà# - postato da Luca Visonà - 25 Settembre 2007 - 23:26