Webmark

Pozioma linia

Index » Kategoria: CSS » Tagi: css , tutorial.

Bardzo często, gdy chcemy wydzielić część strony, oddzielić rzeczy ważne od mniej ważnych używamy poziomej linii czyli: [code lang="html"]

---

[/code] Cóş po kilku zabiegach, w IE i Mozilli, uzyskujemy zakładany wcześniej wygląd ale Opera nadal wyświetla badziewną, wklęsłą krechę. Pewnym rozwiązaniem jest np. rozciągnięcie obrazka o 1 pikselowej wysokości na całą szerokość tabeli lub warstwy ale jest teĹź lepszy, nieco bardziej złoĹźony sposĂłb…
Do wykonania linii wykorzystamy element pływający czyli warstwę oraz wykonany np. własnoręcznie obrazek: 

[code lang="css"].hr {
width: 100%;
background: url(moja_kreska.gif) 50% 50% no-repeat;
height: 3px;
font-size: 0;
}[/code]

No i po kolei. Szerokość kreski 100%, tło kreski/warstwy w połoĹźeniu center/center czyli wyśrodkowane w pionie i poziomie, wysokość "kreski" 3 piksele, wysokość czcionki… 0px. Tutaj pojawia się pytanie po co ta czcionka i co to za wysokość? Ano IE zakłada, Ĺźe coś w tej warstwie napiszemy więc zostawia w warstwie miejsce na czcionkę. Bez ustalenia wysokości fonta na 0, nie byłoby moĹźliwym uzyskanie wyświetlenia w IE warstwy o wysokości chociaĹźby 1 piksela.
Aby wstawić wykonaną przed chwilą kreskę wystarczy w odpowiednim miejscu wpisać:

[code lang="html"]

• Napisał: Stal — 23/04/2011 @ 18:04

  Dzięki właśnie czegoś takiego szukałem. Pozdrawiam.

Imię/Nick *

e-mail (nie będzie widoczny) *

Strona WWW

* pola wymagane

Linie i paragrafy automatyczne, adres e-mail nigdy nie widoczny.
Dozwolony HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> [code lang="css"][/code], [code lang="html"][/code]

Komentarze są moderowane. Spamowanie (reklamowanie innych stron, wpisy nie na temat itp.) komentarzy może spowodować zablokowanie IP komentującego.

admin