Web designer spesso affrontare il problema di presentare le informazioni in un modo che è visivamente accattivante. le pagine web a due colonne forniscono una soluzione che crea la lettura dei contenuti più facile e separa contenuto principale di informazioni supplementari. Quando si utilizza il formato a due colonne per separare contenuto, è importante avere contenuti a parità di larghezza e altezza simili per facilitarne la lettura. Quando la separazione dei contenuti da risorse, è l'ideale per non avere il vostro contenuti così a lungo che le risorse sono persi. L'obiettivo è quello di creare una pagina web che cattura l'occhio del lettore.

istruzione

istruzione

1 Creare due divisioni (div) nel corpo del tuo contenuto Hypertext Markup Language (HTML). Questi div possono includere uno stile in linea di "float: left". Il codice HTML per questo è:

<Div style = "float: left"> contenuto </ div>
<Div style = "float: left"> risorse </ div>.

(Non includere il punto alla fine come parte di quel comando o di ulteriori comandi.)

Sostituire "contenuto" e "risorse" con il contenuto della tua pagina web.

2 Creare un div compensazione. Un div compensazione ferma elementi da variabile sulla tua pagina web. Questo è il codice HTML per un div con un \ class "chiaro \":

<Div class = "clear"> </ div>.

Nel foglio di stile, definire quella classe chiaro con i seguenti attributi:

font-size: 0px
ANDARE
margin: 0
ANDARE
padding: 0
ANDARE
line-height: 0px
ANDARE
clear: both
ANDARE
float: none
ANDARE
border: none
ANDARE

Il div compensazione annulla gli elementi galleggianti provenienti dai due div galleggianti creata nel passaggio 1. Se non avessimo cancellare i div galleggianti, quindi qualsiasi contenuto successiva continua a "galleggiare" sulla sinistra dell'ultimo contenitore.

3 Creare un canale di scolo tra le due colonne galleggiavano. Una grondaia è lo spazio utilizzato per separare le due colonne visivamente. Ci sono cinque modi per creare una grondaia:

1) Aggiungere 20 pixel di destra-padding alla prima div galleggiante. Il primo div galleggiante si presenta quindi come questo: <div style = "float: left; padding-right: 20px; "> contenuto </ div>.

2) Aggiungere 20 pixel di sinistra-padding alla seconda div galleggiante: <div style = "float: left; padding-left: 20px; risorse "> </ div>.

3) Aggiungere 10 pixel di destra-padding alla prima div galleggiante e 10 pixel di sinistra-padding alla seconda div galleggiante:

<Div style = "float: left; padding-right: 10px; "> contenuto </ div>
<Div style = "float: left; padding-left: 10px; risorse "> </ div>.

4) Creare un nuovo div che va tra il div prima galleggiante e la seconda div galleggiante:

<Div style = "float: left;"> contenuto </ div>
<Div class = "grondaia"> </ div>
<Div style = "float: left;"> risorse </ div>.

Questa \ class "grondaia \" dovrebbe avere i seguenti attributi:

blocco di visualizzazione
ANDARE
float: left
ANDARE
width: 20px; .

5) Al posto del secondo contenitore galleggiante sinistra, può galleggiare destra. Dare i contenitori galleggianti larghezze uguali che non sono uguali al contenitore principale. Ad esempio, se il contenitore principale ha una larghezza di 900 pixel, quindi i contenitori galleggianti possono avere una larghezza di 440 pixel, dando una grondaia di 20 pixel. Ecco il codice:

<Div style = "float: left; width: 440px; "> contenuto </ div>
<Div style = "float: right; width: 440px; "> risorse </ div>.

4 Salvare il file con l'estensione .html.

5 Aprire il file HTML in un browser Web e rivedere la pagina web. Apportare modifiche al codice, se necessario, per ottenere i risultati desiderati.

Consigli e avvertenze

• Invece di stili inline, è possibile creare classi nei vostri contenitori galleggianti. Ad esempio, una classe floatLeft può essere definito nel foglio di stile come "float: left".
• Quando la separazione contenuti da risorse, i tuoi div non devono essere uguale larghezza. Generalmente, il rapporto tra contenuto e risorse è compreso tra 2: 1 e 3 a 1.
• Posizionare un commento vuota all'interno della div compensazione per scopi di IE6. In caso contrario, è possibile ottenere alcuni problemi di spaziatura tra Microsoft Internet Explorer versione 6 (IE6) e altri browser web.