Vediamo come allineare gli elementi XHTML con i Fogli di Stile, ma prima chiariamo la differenza tra allineamento del testo ed allineamento dei blocchi.
Blocchi e testo
Dreamweaver, FrontPage e gli altri editor WYSIWYG, possono portare a pensare (sono ottimista ;) che un paragrafo, per fare un esempio, sia composto da del testo. In realtÃ? non è proprio cosÃ?¬!
Un paragrafo è un blocco delimitato dai tag <p> e </p>. Il suo allineamento è diverso ed indipendente dall’allineamento del testo che racchiude.
Allineamento del testo
Per allineare il testo si usa text-align: left | center | right.
Esempio:
p{text-align: left;}
p{text-align: center;}
p{text-align: right;}
Come potete vedere dall’esempio, al cambiare del text-align, è il testo contenuto nel paragrafo a spostarsi, mentre il bordo (che delimita il paragrafo) non si muove.
Stesso discorso per le immagini che in questo caso si comportano come il testo. Il seguente esempio centra un’immagine al centro di un div contenitore:
<div style="text-align: center”><img src=”img.png” alt=”Loading… ” /></div>Per allineare i blocchi la cosa si complica un po’ (non troppo perÃ?² :).
Allineamento dei blocchi
Allineamento centrale
Il codice CSS per centrare un blocco è:
p{
width: 5em;
margin: auto;
}Purtroppo non è supportato dalle versioni di IE 5.x e precedenti, oltre che da IE 6 se fatto funzionare in modalitÃ? retrocompatibile [nota 1]. Per questo browser è necessario impostare un text-align: center all’elemento contenitore.
Quindi, prendendo come esempio questo codice:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<p>Il paragrafo è centrato ed il testo a
sinistra.</p>
</body>
</html>Il codice CSS per allineare al centro il blocco del paragrafo è:
/* elemento contenitore del </p> */
body{text-align: center;}
p{width: 5em; margin: auto; text-align: left;}Da notare il text-align: left dato al paragrafo. Infatti, se il text-align: center dato al body allinea al centro il blocco con Internet Explorer, allo stesso tempo allinea al centro tutto il testo racchiuso nel body. Per eliminare questo basta dare un diverso text-align all’elemento specifico, in questo caso p.
Allineare a destra un blocco
Per allineare a destra un blocco si pu�² usare float: right.
Quindi prendendo come esempio questo codice:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="contenitore">
<!-- Codice del documento-->
</div>
</body>
</html>Il codice CSS per allineare il blocco contenitore a destra è, semplicemente:
#contenitore{float: right;}Note
1 IE 6 funziona in modalitÃ? retrocompatibile - o quirk mode - a seconda del doctype dichiarato. Per maggiori chiarimenti vedi l’articolo Il doctype switch.
tag: allineamento, CSS, doctype switch, internet explorer.
post correlati:
- Il box model
- Il doctype switch
- Effetti di attivazione per i link costituiti da immagini
- Selezionare i link di un documento navigato con la tastiera
- Firefox 2, IE7 ed i moduli di ricerca
- Filtri CSS per Opera browser
- Forzare l'aggiornamento della cache per file esterni
16 January 2008 alle 09:39
guida molto chiara. Bravo.