Ciao a tutti
Ultimamente sono riuscito a trovare po' di tempo per sperimentare e migliorare il codice che produco. Le discussioni del forum sono un ottimo spunto e proprio partendo da questa discussione ho cercato di creare delle liste (verticali e orizzontali) il cui testo fosse allineato verticalmente
In rete si trovano poche soluzioni e quelle poche fanno uso di elementi contenitori strutturati ad hoc che fanno uso di posizionamenti assoluti e/o relativi. Per quanto possano rivelarsi utili in determinati casi, in generale preferisco evitarne l'uso se la soluzione è ottenibile senza usarli.
sono giunto ad un codice che effettivamente fa quello che mi ero preposto, ed è il seguente
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Liste</title> <style type="text/css"> body { font : 12px; } table, td, tr, body, html, ul { margin : 0; padding : 0; } ul { list-style-type : none; width : 150px; } /*** centered menu ***/ li { display : table; height : 5em; width : 100%; *vertical-align : middle; /* IE margin bug on[*] (try to remove it) */ border : 1px solid #767676; /*** Show borders ***/ } li a { display : table-cell; *display : block; /* IE */ *width : 100%; /* IE */ vertical-align : middle; background : #f0f2f1; /*** Show link effective area ***/ } ul.floated { width : 450px; } ul.floated li { float : left; width: 148px; } /*** for IE ***/ table { border-collapse: collapse; } table, tr, td { width : 100%; height : 100%; vertical-align : middle; } </style> </head> <body> <h1>Liste centrate</h1> <h2>Vertical menu</h2> <ul>[*] Voce 1 [*] Voce 2 disposta su due righe di testo [*] Voce 3 disposta invece su ben tre brevi righe di testo. [/list] <h2>Horizontal menu</h2> <ul class="floated">[*] Voce 1 [*] Voce 2 disposta su due righe di testo [*] Voce 3 disposta invece su ben tre brevi righe di testo. [/list] </body> </html>
L'esempio è visibile qui: http://www.fabriziocalderan.it/code/liste.html
Il codice css non fa uso di posizionamenti e questo è già un discreto passo in avanti.
Ora il problema di questa soluzione è insita nella proprietà display: (table | table-cell); che explorer non supporta correttamente e il risultato è visibile facendo un confronto della resa di questo codice:
- Tutti i browser eccetto explorer rendono il link delle stesse dimensioni del list-item
- Explorer continua a considerare l'elemento come inline: al massimo trasformando in inline-block e forzandone le dimensioni orizzontali riesco a riempire il list-item (in larghezza)
Il colore di sfondo ai link l'ho messo per far notare a colpo d'occhio la differenza.
Notate che se vi viene in mente di settare height: 100% ai link perderete la centratura verticale.
Ciò implica l'impossibilità pratica di applicare degli stili ai link (ad esempio il cambio di background allo stato hover), ma se questo non vi serve allora il codice può andare bene.
Ho già esplorato altre possibilità, ad esempio di annidare il commento condizionale (e quindi la tabella) dentro il link, ma explorer non rende cliccabile la voce contenuta nella cella.
In altre parole ora mi chiedo se sia possibile o meno rendere l'area del link pari al list-item che lo contiene.
Fab
Rispondi quotando
