My Translations

Here is my sister – Alexa’s – translation from English into Italian. She has volunteered to help the W3 community.

-

Layout senza tabelle HOWTO

Astratto e status

E ‘stato sostenuto più volte che le tabelle non dovrebbero essere utilizzate in HTML per scopi di disposizione. Questa pagina mostra un modo per creare un layout a tre colonne solo con i CSS.

Per favore di inviare dei commenti e dei suggerimenti Dominique Hazaël-Massieux.

Le traduzioni di quest’articolo sono disponibili.

Introduzione

HTML è un linguaggio strutturale, il che significa che è, o dovrebbe essere utilizzato per aggiungere la struttura in un testo attraverso i tags. La tabella tag dovrebbe quindi essere usata solo per formattare i dati in una tabella in relazione tra le colonne con le file.
Ma dal momento che l’apparizione delle tabelle in formato HTML, è stato molto spesso utilizzato per scopi di layout, di solito si usa dividere una pagina web in colonne. Oltre al fatto che rompe il significato di HTML non aiuta sia nei vari casi che potremmo riassumere dalla difficoltà per analizzare o rendere una tabella in uno contesto (disabilità, limitazioni di veduta, …).
Questo documento descrive un modo per creare un layout a tre colonne e i collegamenti ad altre tecniche di layout.

Descrizione dell layout

La tecnica descritta in seguito è quella usata nella pagina del W3C per i nuovi utenti e permette di creare layout a 3 colonne, con le seguenti caratteristiche:

  • il testo al centro della pagina è quello che viene prima del codice, il che significa che è il primo ad essere letto non in CSS o browsers non visivi.
  • la colonna di sinistra e la destra seguono in questo ordine

È ideale per le home page in quanto permette di avere un testo completo nel centro e le liste dei link al lato.

Una delle restrizione è che non funziona per le realizzazioni dell CSS, ma si inserisce molto bene in un layout verticale tradizionale.

Questa layout si applica a questa stessa pagina in modo da poter avere un’idea di ciò che produce.

Realizzazione


Questo layout utilizza il posizionamento assoluto CSS. Se definiamo in 3 divisioni sulla pagina HTML
<div id=”main”>, <div id=”list1″ class=”link-list”>, <div id=”list2″>, possiamo applicare poi le seguenti regole CSS su di loro:

/ * Le proprietà che entrambe le liste sul lato hanno in comune * /
div.link-list (
width:10.2em;
position:absolute;
top:0;
font-size:80%;
padding-left:1%;
padding-right:1%;
margin-left:0;
margin-right:0;
)
/ * Si lascia un posto sul lato usando il margin-* * properties /
# main (
margin-left: 10.2em;
margin-right: 10.2em;
padding-left: 1em;
padding-right: 1em;
)
/ * E poi abbiamo messo ogni lista sul suo posto * /
# (List1
a sinistra: 0;
)
# (List2
a destra: 0;
)

L’idea è quella di ritagliare la divisione principale sui lati usando il margin-left e il margin-right, e quindi la posizione di ogni colonna laterale usando position:absolute, e impostare l’angolo in alto a sinistra e in alto a destra che si coordinano per (0,0 ).

Per evitare cattive realizzazioni dell CSS nella lettura dell foglio di stile, inseriamo semplicemente <style type=”text/css”>@import url(‘ your-stylesheet-url ‘);</style> .

Riferimenti

Altre risorse di layout CSS

Notate che le specifiche CSS2  per visualizzare elementi in righe e colonne , e la sua realizzazione, purtroppo, non è molto diffusa.
La soluzione è un dato e molte altre possibilità:

CSS Riferimenti

CSS Riferimenti

CSS Riferimenti

Dominique Hazaël-Massieux, $Id: csslayout-howto.html.en,v 1.5 2005/12/20 10:36:13 dom Exp $

Esonero dalle responsabilità

Original Document: http://www.w3.org/2002/03/csslayout-howto
Title of Original Document: “Tableless layout HOWTO”

Questa traduzione potrebbe contenere alcuni errori e non è il documento ufficiale. La traduzione originale inglese sul W3 il sito web è il uno che è ufficiale.

— — — —

Click here to go back to my homepage.