Layout orizzontali di ogni tipo mi hanno incuriosito da quando ho scoperto che potevi farlo. Non so esattamente perché sono affascinato da loro ... forse è solo il mio ribelle interiore che parla. Qualunque sia la ragione, sono quasi pronto a dichiarare lo scorrimento verticale obsoleto, passé e mooolto lo scorso millennio.

Ok, non è proprio quello che intendo. Tuttavia, con l'improvviso aumento della quantità di touch screen in giro, diventa più difficile affermare che "su e giù" sono le nostre migliori opzioni. "Destra e sinistra" sono diventati indicazioni percorribili per il posizionamento dei contenuti, purché non si tratti di notevoli volumi di testo.

Non mi sono mai preso la briga di costruire davvero dei layout orizzontali, però. I problemi tecnici e le limitazioni sembrano sempre essere superiori ai vantaggi stilistici o di navigazione che potrebbero esserci. Quello era prima, comunque; e questo è ora ...

Mi sono imbattuto nella tecnica descritta in questo articolo nel modo in cui di solito mi imbatto in cose: cercando di fare qualcos'altro interamente. Stavo tentando (puoi ridere) di creare un framework di griglia CSS basato sul display: table-cell (okay, smetti di ridere ora).

Bene, per ragioni che ora sembrano ovvie, non ha funzionato. Si prova a creare una griglia di immagini reattive con la proprietà della cella di tabella. Vai avanti, aspetterò.

In poche parole, le celle di una tabella sono progettate per formare un'unica riga orizzontale. (Ho detto smettila di ridere!) Questo è quello che fanno, e non gli piace quando cerchi di fargli fare qualsiasi altra cosa. Ho rinunciato a quel progetto. Poche settimane dopo, però, stavo pensando di ridisegnare di nuovo il mio portfolio.

Ho pensato che sarebbe stato carino mettere tutti i miei progetti su una pagina. Ho preso in considerazione diverse soluzioni organizzative per la visualizzazione dei miei progetti web, di scrittura e di fotografia, e ho trovato questo: voglio visualizzare queste tre categorie come file di miniature che scorrono orizzontalmente.

È stato allora che mi ha colpito: "Le celle da tavolo sarebbero perfette per questo. Inoltre, puoi centrare verticalmente le cose al loro interno! Sono così intelligente da far male! "[Alcune drammatizzazioni qui.]

Non ho ancora ripreso e ridisegnato il mio sito, invece, ho codificato i due esempi della mia tecnica che sono nel file .zip collegato alla fine di questo articolo.

Farlo funzionare

Quindi, per darti un aspetto visivo, ecco a demo che ho elaborato.

Ecco come viene contrassegnata ogni riga:

Project Title

Da lì, il CSS richiesto per farlo funzionare è abbastanza semplice:

// This container element gives us the scrollbars we want.div.horizontal {width: 100%;height: 400px;overflow: auto;}// table-layout: fixed does a lot of the magic, here. It makes sure that the "table cells" retain the pixel dimensions you want..table {display: table;table-layout: fixed;width: 100%;}// Arranging your content inside the "cells" is as simple as using the vertical-align and text-align properties. Floats work, too.article {width: 400px;height: 400px;display: table-cell;background: #e3e3e3;vertical-align: middle;text-align: center;}// Some styling for contrast.article:nth-child(2n+2){background: #d1d1d1;}

Alcune tecniche di layout orizzontale richiedono che l'elemento contenitore ( div.horizontal, in questo caso) abbia una larghezza di pixel definita uguale alla larghezza combinata degli elementi che contiene. Altre tecniche richiedono la visualizzazione: blocco in linea; Non sono un fan di questa tecnica. Con table-cell, continua ad aggiungere elementi ogni volta che ne hai bisogno e sei a posto: è perfetto per l'uso con un CMS.

Rendendolo a schermo intero

Ok, l'altro tipo di layout orizzontale è il layout orizzontale a schermo intero. La creazione di questo con la proprietà table-cell richiede JavaScript. Ho usato jQuery per velocizzare le cose. Il requisito JS potrebbe rendere questa tecnica più utile dal punto di vista della situazione, ma è comunque interessante.

Ecco una demo funzionante.

Il markup è simile:

Full-Screen Horizontal Layouts
Made with display: table-cell;
  Di Ezequiel Bruni 

Qui, tuttavia, è solo una "riga" creata per adattarsi alle dimensioni della finestra del browser. Ogni

// Don't touch this part. It helps.html, body {width: 100%;height: 100%;overflow: hidden;}// In this case, I didn't want a scrollbar, so I used overflow: hidden. The container element is more essential than ever, though. The body element will not do.div.horizontal {display: block;width: 100%;height: 100%;overflow: hidden;position: static;}.table {display: table;table-layout: fixed;width: 100%;height: 100%;}.table > section {width: 1600px; // The width is based on my monitor. It's replaced by jQuery anyway. Percentage widths do not work.height: 100%;display: table-cell;background: #e3e3e3;vertical-align: middle;text-align: center;}

$(window).load(function() {var vWidth = $(window).width();var vHeight = $(window).height();$('.table > section').css('width', vWidth).css('height', vHeight);});$(window).resize(function() {var vWidth = $(window).width();var vHeight = $(window).height();$('.table > section').css('width', vWidth).css('height', vHeight);});