Niquelao » Archivio del weblog » Layout a tre colonne e markup… "quello giusto"

» Archivio del weblog » Layout a tre colonne e markup… “quello giusto” Niquelao - CSS Layout a tre colonne e markup… “quello giusto” 4 giugno 2006 di Rumoroso Quando si intende strutturare il contenuto di un documento web, si deve evitare con ogni mezzo di tener presente quale sarà il design visivo, e in particolare il layout . Questo è fondamentale se si vuole ottenere un contenuto strutturato correttamente dal punto di vista del flusso dell’informazione, nonché un markup semantico e un codice ottimale.

Per raggiungere questo obiettivo si deve utilizzare come premessa indiscutibile l’uso degli standard del W3C , evitando il markup extra la cui finalità sia servire al foglio di stile per la presentazione. Caso sviluppato .- Il contenuto del documento è strutturato in tre aree o gruppi funzionali : contenuto specifico, menu di navigazione principale e un’area di carattere trasversale al sito (relativa sia al documento corrente, come potrebbero essere le notizie della sezione, sia al sito web o portale, come ad esempio link di interesse legati alla tematica del portale o un insieme di banner).

L’organizzazione del contenuto nel codice deve essere stabilita in base al suo livello di specificità e rilevanza rispetto alla pagina corrente. Così, il gruppo di informazioni specifico del documento dovrebbe apparire per primo nel codice, seguito dall’area di carattere trasversale se questa è specificamente legata alle informazioni precedenti e varia in funzione del contenuto. Subito dopo verrebbe il menu di navigazione principale.

Nel caso in cui l’informazione trasversale sia comune a tutto il sito e non abbia carattere specifico in ciascuna sezione, questa sarà disposta alla fine, preceduta dal menu. In tutti i casi si dovrebbero creare link la cui finalità sia quella di potersi muovere nel documento saltando tra ciascuno dei tre gruppi per andare al successivo o al precedente. Cercando di ottenere un codice il più pulito e ottimale possibile, l’impostazione dello stesso è la seguente:

Sono stati aggiunti un’intestazione e un piè di pagina essendo questa una delle situazioni più comuni che si possono verificare.

Si utilizzano contenitori generici di blocco ( div ) per mostrare l’esempio. Nel caso in cui questi includessero un unico blocco (ad esempio, una lista), non sarebbero necessari, poiché l’identificatore si potrebbe applicare direttamente su di esso.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Per il desiderio di ottenere un codice pulito e ottimale , non si utilizzano contenitori che raggruppino uno o più di questi. Il markup applicato e la sua organizzazione sono rimasti intatti tra gli esempi. Gli stili applicati in modo generico sono stati inclusi in un css comune. L’insieme degli stili specifici per ciascuno è stato incluso all’interno dell’intestazione del documento per facilitarne la revisione.

In tutti i casi si è mantenuto il blocco di contenuto principale con un comportamento fluido. Si è utilizzato il selettore universale per applicare margini ai primi discendenti del blocco chiamato “contenido1”.

Dato che non tutti i browser riconoscono correttamente lo pseudo-elemento ” :first-child ”, si è ricorso ad applicare le proprietà a tutti i discendenti del blocco e poi ad annullarle a tutti i discendenti il cui padre sia discendente dello stesso. Si possono utilizzare altri metodi, come ad esempio l’uso dello pseudo-elemento precedentemente citato insieme a commenti condizionali per Internet Explorer (IE). Un altro modo sarebbe stato creare un blocco dentro “contenido1 ” e applicare gli stili necessari su questo.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Si è evitato questo metodo per ottenere un markup più pulito e senza la presenza di elementi la cui finalità sia servire nell’impaginazione. In realtà, la/le proprietà che si potrebbero vedere modificate per i discendenti sono i margini laterali, proprietà facilmente controllabili, per cui la soluzione proposta si considera la più ottimale per questo caso. È importante tenere conto di quali proprietà e attributi sono stati dichiarati in vista della comparsa di possibili effetti inaspettati nell’applicare gli stili.

Per esempio, in IE, quando si includono liste dentro elementi flottati e posizionati in relativo, non si mostrano gli stili applicati allo sfondo né i colori applicati ai bordi (questo si può ovviare posizionandole in relativo). L’idea è ottenere un layout a tre colonne con un ordine determinato in funzione delle necessità del sito. I diversi layout sono mostrati organizzati in funzione dell’ordine dei blocchi e della loro caratteristica fluida.

La fluidità dei blocchi si ottiene definendo la loro larghezza in percentuale (essendo per tutti gli esempi un 20% del totale del loro contenitore) e la rigidità in unità assolute (essendo in tutti gli esempi 150px). Allo stesso modo, invece di utilizzare unità assolute, si potrebbero utilizzare unità relative (em).

Tutto dipenderà dalle necessità particolari di ciascun caso: Ordine nel layout 1 2 3 Esempio di design fluido: Fluido Fluido Fluido Esempio di design ibrido: Fluido Rigido Fluido Esempio di design ibrido: Fluido Fluido Rigido Esempio di design ibrido: Fluido Rigido Rigido Ordine nel layout 1 3 2 Esempio di design fluido: Fluido Fluido Fluido Esempio di design ibrido: Fluido Fluido Rigido Esempio di design ibrido: Fluido Rigido Fluido Esempio di design ibrido: Fluido Rigido Rigido Ordine nel layout 2 1 3 Esempio di design fluido: Fluido Fluido Fluido Esempio di design ibrido: Rigido Fluido Fluido Esempio di design ibrido: Fluido Fluido Rigido Esempio di design ibrido: Rigido Fluido Rigido Ordine nel layout 2 3 1 Esempio di design fluido: Fluido Fluido Fluido Esempio di design ibrido: Rigido Fluido Fluido Esempio di design ibrido: Fluido Rigido Fluido Esempio di design ibrido: Rigido Rigido Fluido Ordine nel layout 3 1 2 Esempio di design fluido: Fluido Fluido Fluido Esempio di design ibrido: Fluido Fluido Rigido Esempio di design ibrido: Rigido Fluido Fluido Esempio di design ibrido: Rigido Fluido Rigido Ordine nel layout 3 2 1 Esempio di design fluido: Fluido Fluido Fluido Esempio di design ibrido: Fluido Rigido Fluido Esempio di design ibrido: Rigido Fluido Fluido Esempio di design ibrido: Rigido Rigido Fluido In qualcuno dei casi e per qualche browser (come può essere Internet Explorer) potrebbe verificarsi un comportamento anomalo al ridimensionamento della finestra.

Fondamentalmente, il comportamento scorretto è dovuto al fatto che, anche se si indica al contenitore quale debba essere la sua larghezza, al ridimensionamento il testo influisce spingendo leggermente i bordi dello stesso. Se l’insieme dei blocchi deve occupare il 100% del contenitore, potrebbe accadere che uno di quelli che hanno dimensioni relative, per l’effetto sopra menzionato, occupi qualcosa in più di quanto dovrebbe, spingendo gli altri, i quali, essendo flottati e non trovando spazio, saltano verso il basso.

Per dare soluzione si può dichiarare una dimensione in uno di essi leggermente inferiore a quella ideale (per esempio, 19,9% invece di 20%). Categoria: CSS —> 1 commento Norwin Galeano 28 agosto 2006 Molto buono. Questo articolo deve essere di grande utilità per coloro che iniziano a impaginare le proprie pagine

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.