Come fare il mio DIV e CSS elementi apparire come una funzione di tabella

November 4

Come fare il mio DIV e CSS elementi apparire come una funzione di tabella


L'elemento "Tabella HTML" è progettato per presentare dati in righe e colonne. Alcuni web designer usano anche per il layout di pagina, ma è poco adatto a questa funzione. Utilizzando elementi DIV e CSS per formattare loro è un modo più flessibile più semplice per creare un layout di pagina che avrebbe richiesto funzione di tabella nei primi giorni di HTML. Un layout DIV-based mostrerà non appena inizia a scaricare, mentre un layout di tabella non verrà visualizzato fino a quando il download è completato.

istruzione

1 Fare un blocco schizzo del layout di pagina che si desidera. Ad esempio, si potrebbe desiderare di testa barra orizzontale, una più stretta barra di navigazione orizzontale, e una barra laterale verticale oltre ad un area di contenuto principale. Decidere esattamente come si desidera queste sezioni disposte. Ogni blocco rappresenta un DIV; è possibile utilizzare invisibili DIV "contenitore" per mantenere le cose organizzate correttamente.

2 Dare ad ogni sezione un nome univoco, che diventerà il suo attributo "id". Se due o più sezioni condivideranno lo stesso formato, creare un altro nome univoco per loro; questo diventerà il loro attributo "class".

3 Creare un nuovo file di layout. A seconda delle esigenze, questo può utilizzare codice statico (HTML o XHTML) o codice dinamico (PHP o ASP). Aggiungere tag DIV per il corpo, utilizzando i nomi id e di classe dal punto 1, al fine dall'alto verso il basso. DIV nido all'interno div contenitore se del caso.

4 Creare un foglio di stile con il .CSS estensione e link ad esso dal file di layout. Creare una sezione per ogni DIV layout. Utilizzare i nomi id e classi, insieme sia il selettore id (#) o il selettore di classe (.) Di fronte a ciascuna.

5 Aggiungere gli attributi di layout per ogni sezione id e class. Questi possono includere imbottitura, la spaziatura, il bordo, la posizione, galleggiante, il margine, altezza e larghezza.

6 Controllare il layout in diversi browser e modificare, se necessario.

Consigli e avvertenze

  • Se si dispone già di un file di layout utilizzando la funzione di tabella per il layout, è meglio iniziare un nuovo file di layout da zero, piuttosto che cercare di modificare il file esistente. Utilizzare il vecchio file di riferimento e la copia e incollare il contenuto, se necessario. Di solito è possibile riciclare il vecchio foglio di stile.
  • Utilizzare i commenti liberamente in modo da non dimenticare quello che una sezione è a favore o perdersi cercando di navigare il codice come si sviluppa. Rientranze e interruzioni di riga nel codice anche contribuire a mantenere il codice più facile da usare.
  • L'attributo "float" non funziona esattamente allo stesso modo di destra e sinistra allineamento in una tabella. Se il layout è rotto, rivedere il vostro riferimento CSS per vedere se è necessario cambiare il modo di usare "galleggiare".
  • Diversi browser possono visualizzare il layout in modo diverso. Un layout che è bello in Firefox può essere rotto in Internet Explorer (o viceversa). Controllare il layout in più browser.