Blog trasferito su
www.NoizExperience.com

08 giugno, 2008

5 trucchi Css fondamentali

CSS: Centrare in verticale un'immagine



Vediamo come risolvere alcuni problemi abbastanza frequenti per chi è alle prime armi con i fogli di stile Css.


1) Centrare un testo o un immagine verticalmente in un div

Questo è uno dei problemi più frequenti per chi incomincia a studiare i css. La soluzione è molto semplice, vediamo un esempio:
Esempio

La tecnica sta nel dare un line-height uguale all'altezza del div.



2) Centrare un div nel body

Questo è ancora più semplice del precedente, ma nonostante, c'è chi chiede aiuto sui forum su come fare:


Su Internet explorer basterebbe anche un text-align ma gli standard Css, che vengono rispettati su Firefox, Opera e Safari, impongono di dare il margin:auto.


3) Div affiancati

Per fare in modo che i nostri div siano ben allineati e affiancati, ci viene incontro l'attributo float che distribuisce, a seconda delle nostre neccessità, gli elementi a destra o sinistra.


esempio 1
esempio 2
esempio 3





4) Div non affiancati

Inizialmente chi si avvicina ai css tralascia questo problema, ma quando incominci a realizzare layout appena un pò più complicati, non puoi fare a meno di venir a contatto con questo problema. La soluzione è l'attributo clear, che seguito da both fa in modo che un div non si affianchi ad un altro, e che vada a capo da solo.
Un esempio:



5) Cambiare lo stile ai soli elementi di un div

Dopo aver impostato uno stile a tutti gli elementi di una pagina, capita di dover cambiarli in un determinato punto, come per esempio i valori dei link a in un div speciale.
Se per identificare gli attributi di un'intera pagina dei tag a si procede così:


Per cambiarli in un sola div procederemo così:


Nei prossimi post spiegheremo tecniche Css più particolari. Se volete chiarimenti o suggerire alcune tematiche, vedremo di approffondire nei prossimi post.


Articoli correlati per categorie



0 commenti!: