Pozioma linia
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"]
[/code]PrzykĹad dziaĹania/wyglÄ
d moĹźesz zobaczyÄ powyĹźej – pod tytuĹem kaĹźdego z artykuĹĂłw. W przygotowanej w w/w sposĂłb warstwie moĹźna wstawiÄ jakÄ
kolwiek grafikÄ (chociaĹźby Ĺadny ornament), nadaÄ kolor tĹa lub wstawiÄ "transparent" itd …
* * *