lunedì 7 aprile 2008

Incolonnare i link con i CSS

La sezione link partner nella home page di Mytom aveva bisogno di un deciso restyling, visto che era organizzata in un insieme di link confuso e senza nessuna formattazione.
Per ovviare a tale lacuna, Mytom ha deciso di rimettere tutto apposto ricorrendo ai CSS, d' altra parte tutto il sito è costruito con Cascade Syle Sheet.
Il primo passo è stato richiudere i link in un nuovo contenitore (i valori, d'ora in avanti, sono indicativi):

#link_partner {height: 120px}

Abbiamo dato così un' altezza fissa al contenitore. Successivamente abbiamo impostato un formato al tag "a" da inserire allinterno del contenitore.

#link_partner a {float: left; width: 290px; display: block; text-decoration:none; color: #396594; font-size: 12px; text-align: center;}

Dei valori sopra indicati è bene soffermasi sui seguenti:

- float: left; fa in modo che ogni link si disponga alla destra di quello precedente (left vuol dire che è mobile a sinistra)
- display: block; indica che il link deve avere la larghezza fissa dichiarata con width e deve comparire per intero come, appunto, un blocco.
- text-decoration: none; infine non fa comparire la linea sotto il link

Il risultato lo potete vedere voi stessi in home page, e tutto questo senza ricorrere alla solita tabella fatta di righe, colonne, allineamenti, dimensioni fisse ecc. ecc.

Nessun commento: