Le colonne presentano una sfida per i Web designer che desiderano evitare datate, goffa tecniche tabella di codifica. Non c'è nessun modo per bloccare parti della pagina Web per le sezioni di contenuto o colonne, in parte per evitare di miscelare con struttura codice di stile. Progettisti utilizzano tecniche galleggiante complicati per inserire colonne sulle pagine Web. È possibile rendere una colonna "galleggiante" a sinistra o a destra del suo contenuto vicino aggiungendo la proprietà "float" in CSS.

Istruzioni

1

Aprire il file HTML della tua pagina Web in un editor di codice quali jEdit, Notepad + + o BBEdit. È anche possibile utilizzare Microsoft Notepad o un altro editor di testo normale, ma capire che mancano colorazione codice utile che rende la lettura più semplice HTML.

2

Trovare la colonna che si desidera galleggiare nel codice HTML. Questo solitamente è avvolto in un "< div >" o "< sezione >" tag, anche se alcuni codificatori utilizzano "< da parte >" tag per barre laterali. Aggiungere un attributo ID al tag per la colonna e assegnargli un nome univoco per il suo valore, ad esempio "colonna" o "leftside."

3

Individuare il tag "< link >" nella parte superiore del file HTML e trovare uno contenente un file CSS. Aprire il file nell'editor di codice. È inoltre possibile inserire CSS tra i tag di "stile < >", ma si dovrebbe mettere il tag "< style >" tra i tag "< head >" nel file HTML.

4

Impostare la colonna su una larghezza di specifica o relativa usando i CSS. Utilizzare i valori dei pixel per larghezze specifiche o valori percentuali per la larghezza relativa. Scrivere il codice come questo:

colonna {width: 200px;}

Qui è una colonna con una larghezza di 20 per cento, rispetto alla larghezza di qualsiasi elemento HTML nidificando la colonna all'interno di:

colonna {width: 20%;} 5

Aggiungere la proprietà "float" per colonna e impostarlo a destra o a sinistra, in questo modo:

colonna {width: 200px; float: right;}

Quando "galleggiante" è impostata a destra, la colonna si allinea a destra di qualsiasi contenuto adiacente. Il contenuto adiacente, ad esempio testo, avvolge intorno alla parte inferiore della colonna. Aggiungere la proprietà "galleggiante" sezione del contenuto del tuo sito Web in CSS per impedire il ritorno a capo.

Consigli & Avvertenze

• Utilizzare un'immagine di sfondo per creare una colonna"finta", se volete dare il vostro colonna l'aspetto di stretching fino a piè di pagina del tuo sito Web. Creare un'immagine di alta di un pixel così ampia come l'intero sito Web e applicarlo ad un "< div >" che avvolge il contenuto e la colonna.
• Colonne non tendere verso il basso per il piè di pagina in una pagina Web quando si utilizza la tecnica di galleggiamento. Utilizzare un "finto colonna" sfondo o JavaScript per correggere il problema se interferisce con il design del tuo sito Web.