CSS sulle horizontal rules
Mercoledì 26 Aprile 2006 - 09:00
di Cesare Lamanna
È possibile modificare con i CSS l’aspetto di una horizontal rule (<hr />)? Certo che è possibile ma i risultati relativemente al supporto cross-browser non sono garantiti.
Su questo nuovo blog, Bite Size Standards, Nathan Pitman propone questo approccio: inserire la hr in un div, impostare la sua proprietà display su none e lavorare con gli stili sul div. Il codice potrebbe essere questo:
div.horRule {
height: 1px;
border-top: 1px solid #E5E5E5;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 10px;
margin-right: 10px;
}
div.horRule hr {
display: none;
}
Prendo lo snippet di codice dal blog di Nathan Smith, che rispondendo a Pitman, propone questa soluzione che non fa uso di div aggiuntivi e che funziona bene sulle versioni più recenti dei principali browser:
hr
{
background: #ccc;
color: #ccc;
height: 1px;
margin: 0 0 10px;
}
Nei commenti al post di Smith, Dustin Diaz rimanda ad un terzo possibile approccio, quello proposto in questo esempio su Sitepoint.
Commenti
1
azz, tutto quì?
a volte ho rinunciato ad usarlo proprio per questo, per il comportamento diverso sui diversi browser
ma non credevo che fosse così semplice agirare l’ostacolo…
buono a sapersi
2
La soluzione col DIV, oltre che vecchia di qualche anno, è molto discutibile dal punto di vista semantico.
# - postato da gianluca - 26 Aprile 2006 - 10:14
3
Io sono per usare il tag hr esclusivamente per separare contenuti diversi nel codice della pagina se visualizzata senza css.
Ad esempio per separare header, contenuto e footer.Con i css abilitati preferisco non visualizzare niente ed usare altro per scopi puramente decorativi.
4
concordo con gianluca
# - postato da Salvatore PECORARO - 26 Aprile 2006 - 10:54
5
Concordo con Tom, anche perché dal punto di vista semantico - come diceva Gianluca - non è che sia correttissimo!
6
Anche secondo me usare un div è scorretto semanticamente. E in linea di massima sarebbe sufficiente dare uno stile al border di un div precedente o successivo per ottenere l’effetto filetto( o background-image per effetti più complessi).
Io utilizzo spesso l’hr per gestire i float e riallineare i div successivi. Col semplice claer:both; visibility:hidden.
Tra l’altro ritengo che questo metodo aiuti a dividere in sezioni rendere maggiormanete leggibile la pagina anche a CSS disabilitati
7
Il codice può essere perfezionato, sostituendo:
height:1px;
con:
max-height:1px;Quasi tutti i browser non mostrano cambiamenti. In Seamonkey, invece, la resa diventa giusta.
# - postato da Mirko Pagliai - 16 Ottobre 2008 - 23:29
8
yeeees!!!!
funziona!!
Per fare una hr a pallini:
hr {color: #ccc;
height: 1px;
margin: 0 0 10px;
border-top:1px dotted #aaa8a8;}buon uso!
# - postato da simona - 04 Maggio 2011 - 17:39