gru
4

Styl CSS dla hr

CSS // 6 Komentarzy

Jeśli chcesz nadać styl dla znacznika hr, żeby wyglądał niestandardowo (np. przerywane kreski itp), może się okazać, że nie jest to takie łatwe. Można kombinować z obrazkiem, ale najłatwiej jest to załatwić w następujący sposób. Wystarczy nadal kolor znacznika na identyczny kolor jaki ma tło. A następnie nadać border dla hr (dolny albo górny), zaś pozostałe wyłączyć:

hr {
 color:#82b4cd;
 border-top: 1px dashed #c0d9e6;
 border-bottom:none;
 border-left:none;
 border-right:none;
}

Tagi: CSS, hr, styl

Autor: Tomasz Ignatiuk

6 Komentarzy to “Styl CSS dla hr”

Sławek Linek 2010-01-10, niedziela o 20:20

A jak nadać odstępy między kropkami :) jeśli dałem hr

hr{
width: 85%;
color: #ffffff;
border-top: dotted 1px #fff;
border-bottom:none;
border-left:none;
border-right:none;
}
Tomasz Ignatiuk 2010-01-10, niedziela o 21:21

Są różne rodzaje ramki, kropki, kreski itp, ale nie da się ustawić odstępu między nimi.
Bartek 2011-04-08, piątek o 17:17

Aby ustawić odległość pomiędzy kropkami, możesz użyć pliku tła, na którym umieścisz kropki w odpowiedniej dla Ciebie odległości. W kodzie będzie to funkcja background.

Pozdrawiam,
Bartek
Michał 2011-05-23, poniedziałek o 22:22

A nie lepiej tak?

border: none;
border-top: dotted 1px #fff;
Tomasz Ignatiuk 2011-05-23, poniedziałek o 22:22

Tak też można :)
Mateusz 2011-08-06, sobota o 13:13

Miał ktoś z was problem z paddingiem lub marginem (?) w IE? Odpalam stronę pod FF i hr nie ma „otoczki” marginesów / paddingów nastomiast w IE8 coś takiego go otacza.