Salve
Devo realizzare un layout elastico a tre colonne.
Ma dai tutorial letti non mi è ancora chiaro come dimensionare le colonne in em.
Dando un occhiata su layout gia pronti ho notato che molti avevano le 2 colonne laterali con un width compreso tra i 13 e i 14 em mentre sulla colonna centrale non veniva impostato nessun valore di width.
Qualcuno potrebbe gentilmente farmi capire i motivi di una tale scelta?
La colonna centrale, che di solito è la più grande e contiene il contenuto, è quella "fissa". Mentre le altre sono appunto elastiche... Io ho fatto più pagine in quel modo e preferisco definire i valori delle colonne esterne in %. Di solito gli em si usano per permettere all'utente di cambiare i caratteri di una pagina, attraverso le opzioni del browser. Ma in pratica non viene fatto praticamente mai, dall'utente medio. Usando le percentuali, riesci a rendere la pagina adattabile alle varie risoluzioni dello schermo.
Ti ringrazio j-mk, però a me interessa proprio capire il discorso sui layout elastici in em per l'accessibilità
Guarda qui ne fanno un cenno più che dignitoso:
http://css.html.it/guide/lezione/57/layout-elastico/
Sono sicuro che se cerchi negli articoli di html.it troverai anche qualcosa di più specifico, anche se basta questo a capire il funzionamento della cosa.
Io spesso faccio in questo modo
Div colonna di destra con floata:right e width valorizzato
Div colonna di sinistra con float:left e width valorizzato
Div Parte centrale con margin left e margin right uguali (leggermente maggiori) alle width delle due colonne ma senza width valorizzato
(inserite nel markup proprio nell'ordine destra, sinistra, centro)
Questo fa si che, qualsiasi sia la risoluzione scelta dall'utente, la parte centrale si "incastrerà" sempre perfettamente tra le due colonne occupando tutta la larghezza possibile, poichè un div che non ha "float" occupa sempre il massimo della larghezza possibile, che nel nostro caso è la larghezza totale della pagine meno i due margini messi per "fare spazio" alle colonne destra e sinistra
Si anche questo è un ottimo modo, hai anche lasciato lo spazio per il padding.
Permessi di invio
Rispondi quotando