Share
I layout fluidi sono il modo perfetto per ospitare i nostri contenuti in qualsiasi dimensione di visualizzazione. Il testo può scorrere mentre i contenitori crescono e si restringono, le immagini e persino i video e gli iframe possono flettersi e squilibrarsi. Ma cosa succede se abbiamo contenuto che non dovrebbe modificare le dimensioni? Per quanto riguarda i blocchi di annunci, ad esempio, che sono spesso progettati con un dimensionamento molto specifico in mente? Stranamente, è qui che i layout delle tabelle vengono in soccorso ...
Mi è stato ricordato di recente quando ho letto l'Implementing Responsive Design di Tim Kadlec. È arrivato anche al momento giusto; Ero nel bel mezzo di un progetto client che aveva bisogno solo di questo approccio (e ero impegnato a macellarlo).
Molti siti Web dipendono dalle entrate pubblicitarie. Per quanto non ti piaccia essere bombardati con le immagini del web marketing, senza di esso non avresti accesso a gran parte dei contenuti gratuiti a cui sei abituato. Tuts +, ad esempio, si affida in parte alle entrate pubblicitarie per mantenere il suo team di scrittori e personale in continua crescita.
L'Interactive Advertising Bureau (iab) è responsabile di una grande quantità di pubblicità digitale e lavora duramente per definire standard e linee guida per l'intero settore. Dai un'occhiata alle loro Linee guida sulla pubblicità display per un riferimento delle dimensioni dei blocchi di annunci universali consigliate:
Quattro immagini a dimensione fissa. Ed è importante che rimangano anche in quelle dimensioni; loghi, cinturini e disclaimer potrebbero diventare tutti irriconoscibili o illeggibili se schiacciati in un layout fluido. Inoltre, le aziende che pagano per questi annunci lo fanno in base alla dimensione e alla posizione dei blocchi. Una pubblicità di 300x250px potrebbe non essere così prominente o efficace se visualizzata a dimensioni più ridotte, in tal modo riducendo la società in questione.
Gli annunci sono progettati per essere visualizzati a una dimensione fissa, quindi, finché non avremo una soluzione migliore per la pubblicità reattiva, è meglio rispettarla.
Costruiamoci rapidamente un layout fluido generico per dimostrare il nostro problema. UN , contenente un e un . Tutto ciò di cui abbiamo bisogno:
Quindi possiamo modellarlo in questo modo:
sezione larghezza: 90%; margine: 0 auto; aside width: 30%; fluttuare: a sinistra; article width: 65%; float: giusto; img larghezza massima: 100%;
Con un po 'di colore aggiunto, questo è l'effetto che otterrai:
Con la nostra img larghezza massima: 100% Regola che ci siamo assicurati che le nostre immagini siano fluide e non si rompano mai dal loro contenitore genitore. Purtroppo, il nostro fluido è più stretto qui rispetto alla larghezza di 300 px dell'immagine, proprio quello che non vogliamo accadere.
Fissiamo la larghezza del lato, lasciando l'articolo per fare la flessione. Come combinazione di fisso e fluido, ci riferiamo a questo tipo di layout come ibrido.
sezione larghezza: 90%; margine: 0 auto; aside width: 300px; fluttuare: a sinistra; article width: 65%; float: giusto; img larghezza massima: 100%;
Funziona su schermi più ampi, ma non appena il contenitore diventa troppo piccolo, ovvero quando 300px è più del 35% della larghezza del contenitore, l'articolo viene inserito sotto:
Possiamo risolvere questo nel nostro caso cambiando il markup in giro; mettendo da parte nel l'articolo:
Quindi togliendo la larghezza e il float dall'articolo, dando finalmente il margine di destra per agire da grondaia:
sezione larghezza: 90%; margine: 0 auto; aside width: 300px; fluttuare: a sinistra; margine-destra: 5%; article img larghezza massima: 100%;
Questo è ciò che otteniamo:
Che è perfetto! Il contenuto dell'articolo è fluido, mentre il blocco di annunci e i suoi genitori sono a larghezza fissa! Puoi persino spostare il lato a destra, scambiando il galleggiante con float: giusto e posizionando la grondaia (il suo margine) anche sull'altro lato.
I problemi sorgono, tuttavia, quando il contenuto dell'articolo inizia a occupare più spazio verticale rispetto al lato. Questo è il risultato:
Ci sono hack per evitarlo; potremmo dare alla parte un'imbottitura di fondo massiccia, quindi un altrettanto massiccio negativo margine inferiore. Quindi con un overflow: nascosto allunghiamo artificialmente la parte, nascondendo ciò che sporge.
Oppure potremmo usare il posizionamento e sistemare la parte in alto a destra dell'articolo, dando all'articolo delle imbottiture per far spazio.
Nessuno di questi è l'ideale, ognuno dei quali presenta i propri problemi unici.
Che cosa?! Ti sento dire ...
Giusto. I layout delle tabelle (Dio riposa le loro anime) erano in realtà piuttosto bravi nell'organizzare layout ibridi, quindi prendiamo una foglia dal loro libro. Usando i CSS possiamo mostrare i nostri elementi come se fossero componenti di una tabella. Anche questo è assolutamente buono; non stiamo usando tavoli reali nel nostro markup (che sarebbe male dato che non stiamo lavorando con dati tabulari). Ci baseremo semplicemente sui tavoli per scopi di visualizzazione, senza cambiare il significato semantico del nostro documento.
Tornando al nostro layout originale (dove il lato e l'articolo erano affiancati) possiamo alterare il CSS per suggerire blocchi da tavolo. La nostra sezione contenente diventa la tabella, l'articolo e a parte diventano le celle della tabella al suo interno:
sezione display: tabella; larghezza: 90%; margine: 0 auto; aside display: table-cell; larghezza: 300 px; article display: table-cell; img larghezza massima: 100%;
Che ci dà:
Hmm, non proprio giusto. Abbiamo bisogno di alterare l'allineamento verticale delle nostre cellule, perché qui l'immagine e il testo sono entrambi sulla stessa linea di base.
a parte display: table-cell; vertical-align: top; larghezza: 300 px; article display: table-cell; vertical-align: top;
Ora, ogni volta che l'articolo o il lato crescono verticalmente, l'altro cresce con esso. Tuttavia, la disposizione dipende dal DOM; qualsiasi elemento della cella di una tabella compaia per primo nel documento appare anche prima (a sinistra) del nostro layout di tabella.
Ovviamente, possiamo concludere tutto in una query multimediale, in modo che questo layout venga eseguito solo su schermi più grandi. Sugli schermi più piccoli la parte si posizionerà ordinatamente sopra l'articolo. Dai un'occhiata alla demo per vedere come si comporta.
L'uso della visualizzazione tabella CSS è supportato in tutti i browser moderni, ma è stato adottato solo da Internet Explorer con il rilascio di IE8.
Per i browser precedenti, pertanto, sarebbe saggio includere in modo condizionale un foglio di stile di fallback, che offre una soluzione di layout alternativa:
(o potresti semplicemente ignorare IE7 e sotto ...)
Come menziona anche Tim nel suo libro, i telefoni Windows 7 caricheranno anche negli stili ie.css che abbiamo appena impostato. Per evitare che ciò accada, dovrai modificare le condizioni:
Così ce l'abbiamo - chi avrebbe mai pensato che i layout di una tabella potessero aiutarti in quest'era di responsive web design ?! Certo, questa non è la soluzione perfetta che avresti desiderato, ma fino a quando CSS Grid Layout e Flexbox guadagneranno un po 'più di trazione, questa è un'ottima alternativa.
Accentsconagua