CSS  »  Articoli  »  Effetti con CSS 

Header con testo posizionato assolutamente

Chiudiamo questa carrellata sugli header e le proprietà css con un esempio di posizionamento assoluto. Vogliamo realizzare un box centrato di 200x200 pixel e nel suo angolo in alto a sinistra scrivere 'html', mentre in basso a destra scrivere '.it'. Ecco il codice html che useremo:

<div id="headerpos">
    <h2>
        <span>Html</span><em>.it</em>
    </h2>
</div>

Ed ecco il relativo css:

div#headerpos{text-align: center}

div#headerpos h2{position: relative;
    width: 200px;height: 200px;margin: 0px auto;
    background-color: #4078FF;color: #fff;
    font: 30px arial,serif
    }

div#headerpos h2 span{
    position:absolute; top: 0; left: 0}

div#headerpos h2 em{
    position:absolute; bottom: 0; right: 0;color: #FF0}

Ecco il risultato:

Due parole sulla scelta delle proprietà. Il nostro header è grande 200x200px. Questa volta però lo vogliamo centrato. La centratura orizzontale di un qualsiasi elemento in Internet Explorer si ottiene contenendolo in un elemento che abbia allineamento del testo centrato ossia text-align: center. A livello concettuale è un errore di interpretazione del box model di Internet Explorer, dato che il text-align dovrebbe servire in teoria solo per centrare testo ed elementi inline all' interno di elementi block-level. Negli altri browser infatti la centratura di un elemento block-level si ottiene dichiarando i suoi margini orizzontali pari al valore speciale auto.
Dichiarare un elemento posizionato relativamente ha un duplice effetto in questo caso:

1. consentire di posizionare assolutamente elementi al suo interno
2. preservare il flusso degli elementi successivi

Per quanto riguarda il primo punto, quando si parla di posizionamento assoluto di un elemento bisogna tenere ben presente che le sue coordinate si riferiscono al suo primo 'antenato' posizionato, sia esso assolutamente o relativamente. Se non c'è un contenitore posizionato all' esterno dell' elemento posizionato assolutamente, le coordinate si riferirarranno al blocco contenitore principale, cioè la finestra del browser.

Per quanto riguarda il secondo punto, il browser non sa come sistemare in certi casi gli elementi successivi (in ordine di codice html) a quelli posizionati assolutamente, dato che gli elementi posizionati assolutamente vengono rimossi dal flusso normale in una pagina per essere, appunto, posizionati. In questo caso il nostro header è posizionato relativamente senza specificare uno dei quattro offset, e quindi verrà mostrato nella sua posizione naturale, consentendo però il posizionamento assoluto al suo interno.

Conclusioni

Gli esempi di questo articolo sono stati testati sui principali browsers: Internet Explorer, Opera e Mozilla e hanno la stessa resa su tutti e tre. Una trattazione esauriente di tutte le proprietà utilizzate in questo articolo è al di fuori del suo scopo, sebbene spero di aver potuto dare al lettore esempi di uso creativo e ragionato dei css e una spiegazione quantomeno minima delle scelte implementative.

Altri articoli

Altre guide

Altre newsletter