Pozioma linia

Index » Kategoria: CSS » Tagi: , .

Bardzo cz?sto, gdy chcemy wydzieli? cz???? strony, oddzieli? rzeczy wa??ne od mniej wa??nych u??ywamy poziomej linii czyli:

  1. <hr />
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: 

  1. .hr {
  2. width: 100%;
  3. background: url(moja_kreska.gif) 50% 50% no-repeat;
  4. height: 3px;
  5. font-size: 0;
  6. }

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?:

  1. <div class="hr" />

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 …


* * *

  • Napisał: ldiotka — 25/09/2010 @ 20:05

    Divy si? zamyka, a URL'ki daje w cudzys??owy.

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

    Dzi?ki w??a??nie czego?? takiego szuka??em. Pozdrawiam.

* 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=""> <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.



 

tanie serwery www: timnet.pl

Webmark został zbudowany na silniku Wordpress
wpisy (rss)komentarze (rss)
design by zama 2008
Stat24

  • Tani hosting

    Szukasz sprawdzonego hostingu www? B?dziesz m??g?? prowadzi? sw??j w??asny serwis lub reklamowa? swoje us??ugi. A do tego zaoszcz?dzi? p??ac?c niewielkie pieniadze za du??? przestrze?? dyskow?. Zapraszamy do zapoznania si? ofert? firmy hostingowej TimNet. Dzi?ki naszej wsp????pracy z firm? mamy do zaoferowania 25% bonifikat? na tani hosting w tej firmie. Wystarczy w polu kupon zni??kowy wpisa?: webmark.shost.pl. Kupon jest do wykorzystania przy aktywacji konta www Serwer Home Hosting PL lub Serwer Web Hosting PL.
  • Saizenmedia

  • Vladstudio

  • Spectab

    Spectab
  • Reset

    Poni??ej zamieszczam link przyk??adowego zapisu css resetuj?cego domy??lne parametry (dope??nienia, marginesy, wielko??? czcionki itp) poszczeg??lnych element??w wykorzystywanych do zbudowania strony. Autorem opracowania jest Eric Mayer
  • Mo??e co?? uaktualni??

    Ju?? ponad p???? roku min???o od ostatniego wpisu… Ale jestem ponownie z nowym (jak zwykle po d??ugiej przerwie) wygl?dem strony i zamiarem uaktualniania jej od czasu do czasu. Ju?? nied??ugo do pobrania udost?pni? poprzedni theme pod wordpressa i zupe??nie nowy projekt.
  • 'Go??y dzie??'

    Go??y dzie?? na mojej stronie trwa?? do??? kr??tko. Jako?? nie jestem przekonany do “obdzierania” strony ze sk??ry tylko po to, aby zobaczy? czy narz?dy i tkank? ma zdrow?. Wydaje mi si?, ??e zupe??nie inaczej mo??na popularyzowa? standardy sieciowe.
  • Wordpress 2.5

    A new version of Wordpress is available. Taki komunikat wita mnie w panelu administracyjnym ju?? od kilkudziesi?ciu godzin. Czas na zmiany. Nowy skrypt jest podobno warty dokonaniu apgrajdu. Zobaczymy. Wi?cej na oficjalnej stronie Wordpressa.
  • Wielkanoc

    Pogodnych, spokojnych, pe??nych nadziei i mi??o??ci ??wi?t Wielkanocnych ??yczy: admin

Ostatnie komentarze

admin
TOP