Non è necessario creare tavoli per un layout a due colonne. È possibile creare loro con i fogli di stile a cascata (CSS). Ecco come creare una casella di div a livello 800-pixel con due colonne uguali che è al centro dello schermo del browser.
istruzione
1 Aprire il Blocco note o l'editor HTML e digitare quanto segue in un nuovo documento vuoto:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html>
<Head>
2 Avanti, digitare quanto segue:
<Style type = "text / css">
<! -
contenitore {
margin: 0 auto; /
Questo centra il contenitore div sulla pagina /
width: 800px;
}
leftcolumn {
float: left;
margin: 0;
width: 50%;
}
rightcolumn {
float: right;
margin: 0;
width: 50%;
display: inline;
}
// ->
</ Style>
3 Chiudere la sezione <head> con il seguente tag: </ head>
4 Terminate codifica il layout a due colonne con il seguente:
<Body>
<Div id = "container">
<div id="leftcolumn">Put left column content here</div>
<div id="rightcolumn">Put right column content here</div>
</ Div>
</ Body>
</ Html>
Consigli e avvertenze
- Assicurarsi di aggiungere il doctype come la prima riga di codice. Doctype è il nome abbreviato per il Document Type Definition (DTD), che racconta i browser, i motori di ricerca e altri strumenti di analisi la pagina della versione di (X) HTML si sta usando. Questo imposta anche una modalità di analisi standard ed elimina le congetture per il browser o altro strumento di analisi tuo page.To mantenere il vostro codice compatibile con i nuovi standard Web, usare tutto in minuscolo per tutti i vostri HTML tags.Adjust gli stili a cascata nella <head > sezione per mettere creare uno sfondo per la pagina, impostare la dimensione del carattere e lo stile, mettere spazio intorno alle colonne, cadere un'immagine di sfondo o effettuare altre regolazioni estetici.
- Assicurarsi di utilizzare il corretto Document Type Definition per il file HTML o non sarà visualizzato correttamente nel browser. Ci sono molti tipi di documenti HTML, con l'essere più comune: HTML 4.01 Strict, HTML 4.01 Transitional e XHTML 1.0 Strict.To creare spazio intorno le colonne, è necessario ridurre la larghezza di ogni colonna. Ad esempio, se si desidera un margine destro e sinistro di 10 pixel per ogni colonna, impostare la larghezza di ciascuna delle colonne a 380 px. Quindi, impostare i margini destro e sinistro a 10 px in stili a cascata. Altrimenti, la colonna di destra apparirà in basso sulla pagina di sinistra.