eMaupie figle z szablonami
Blog > Komentarze do wpisu

Podstawy layoutu CSS - część III

Trzy to dobra liczba, jeśli chodzi o ilość notek w blogowym cyklu. Nie za dużo, nie za mało, lecz w sam raz by nakreślić "zarys wstępu do podstaw" tematu. Wytrwałych zapraszam więc do lektury ostatniej części z serii Podstawy layoutu CSS.

Tym razem przyjrzymy się właściwości display, odpowiedzialnej za sposób wyświetlania elementów na stronie. Zmieniając jej domyślne ustawienia możemy sprawić, by element zachowywał się jak tekst, element blokowy czy tabelka, a nawet -  by wcale się nie pokazał na stronie.

block vs. inline

Wszystkie elementy wyświetlane na stronie html możemy podzielić na dwa typy: block oraz inline. Pierwszy typ - elementy blokowe charakteryzują się tym, że layoutowane są od nowego wiersza. Elementy drugiego typu, są layoutowane w miejscu ich wystąpienia, czyli zaraz za poprzednim elementem. Przykładami elementów typu block <div>, <p>, <h1> itd. natomiast elementy takie jak <a>, <b>, <i> itp. są reprezentantami kategorii inline .

Przyjrzyjmy się następującemu fragmentowi html, którym postaram się zobrazować, to co właśnie napisałem.

<p>Pierwszy element blokowy. Elementy: <b>pogrubienie</b> i <i>kursywa</i> wyrenderowane obok siebie.</p><p>Drugi element blokowy rozpoczął się od nowego wiersza.</p>

Powyższy kod html, przeglądarka wyświetli w następujący sposób:

Pierwszy element blokowy. Elementy: pogrubienie i kursywa wyrenderowane obok siebie.

Drugi element blokowy rozpoczął się od nowego wiersza.

display: none

Jak można się łatwo domyślić, właściwość display może przyjmować wartośći block  oraz inline , dzięki czemu można modyfikować domyślne zachowanie elementów . Może ona jednak przyjmować jeszcze wiele innych wartości (m. in. list-item , table itd. - zainteresowanych odsyłam do www.w3schools.com ), wśród których bardzo przydatną dla tworzących szablony bloxowe jest display: none .

Wartość none pozwala na ukrycie, a właściwie usunięcie elementu z layoutu strony. Dzięki niej można np. ukryć linka do kanału rss czy bannerek "pisz bloga" i zastąpić je czymś własnym. Element z właściwością display ustawioną na none, oraz wszystkie jego elementy potomne nie są  renderowane. Przeglądarka traktuje je tak, jakby w ogóle nie było ich w kodzie html.

Przykład

Do kodu z poprzedniego przykładu wprowadziłem kilka modyfikacji (wytłuszczony tekst), które mają pokazać jak można zmieniać domyślny sposób wyświetlania elementów.

<p class="inline" >Pierwszy element blokowy. Elementy:
<b class="none" >pogrubienie</b> i <i class="block" >kursywa</i> wyrenderowane obok siebie.</p><p class="inline" >Drugi element blokowy rozpoczął się od nowego wiersza.</p>

Użyte w kodzie definicje stylów CSS wyglądają następująco:

.inline {
    display: inline;
}

.block {
    display: block;
}

.none {
    display: none;
}

A taki jest uzyskany z ich pomocą efekt:

Pierwszy element blokowy. Elementy: i
kursywa
wyrenderowane obok siebie. Drugi element blokowy rozpoczął się od nowego wiersza.

Zauważmy, że element <b> zniknął, element <i> został umieszczony w nowym wierszu, natomiast elementy <p> wylayoutowane zostały jeden za drugim (a nie jeden pod drugim, jak poprzednio).

Po co zmieniać display?

Jeden powód podałem opisując własność display:none. W notce Zakładki dla kategorii  opisałem wykorzystanie własności display:block w celu zamiany elementu < a> w prostokątną zakładkę. Jestem pewien, że sami znajdziecie jeszcze mnóstwo innych zastosowań dla tej własności. Zwłaszcza, że tworząc szablony tu - na bloxie, mamy bardzo ograniczony wpływ na kod html naszego bloga. Manipulując własnością display możemy jednak wpływać na sposób, w jaki przeglądarka będzie interpretować ten kod. To już daje duże pole do popisu :)

niedziela, 24 lutego 2008, e-maupa

Polecane wpisy

  • Podstawy layoutu CSS - część I

    Dziś, zgodnie z obietnicą, rozpocznę mały kurs podstaw layoutowania za pomocą CSS. Jeśli próbowałeś kiedyś zmienić układ swojego bloxa a nie bardzo wiesz jak si

  • Darmowe grafiki do szablonów

    Przygotowując szablon na bloga, najczęściej zaczynam od znalezienia jakiejś grafiki do nagłówka, która zdefiniuje charakter bloga oraz kolorystykę pozostałych e

  • Zakładki dla kategorii

    Jak za pomocą CSS przerobić linki do kategorii bloxa na zakładki? To proste, jeśli zastosujesz się do kilku poniższych wskazówek i zastosujesz prosty trick.

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: Klaudyna, *.ssp.dialog.net.pl
2008/03/28 16:28:17
zgłoś sie do konkursu na naj bloga na klaudyna.xx.pl
-
rainboweyed
2008/04/11 19:16:59
Pytanie zasadniczo do cz.I. W jaki sposób pozycjonowanie absolutne "usztywnia" layout?
-
2008/04/11 20:15:01
No wiesz, szukalam czegos w stylu, ''Jak wstawic swoj obrazek do gotowego szablonu'' Bo ja sobie pobralam na bloxa taki pewien szablon, ale chce zmienic obrazek na swoj. Jak?
-
brejbram
2008/04/12 15:44:32
witam, mam pytanie trochę z innej beki: czy mogę dodać do mojego bloga na bloxie jakieś metatagi? Nie mogę znaleźć żadnego wglądu w kod HTML szablonu, a jedynie w CSS:/ trochę to irytujące, chciałbym wrzucić tam na przykład informacje weryfikacyjne dla Narzędzi dla webmastera z google... Bardzo proszę o odpowiedź
-
2008/04/14 11:46:17
czekam na www.odlotoweagentkiblog.blox.pl
-
2008/04/20 09:32:00
@rainboweyed:
"usztywnia" w sensie: "przykleja do wskazanego w css miejsca", niezależnie od pozycji jaka wynikałaby ze swobodnego layoutu treści zawartych w blokach div.

@cheerleaderkagrudnia2007:
polecam css.blox.pl oraz szablonykatemac.blox.pl, są tam przystępnie opisane instrukcje dla podstawowych zmian w szablonach.

@brejbram:
Kodu html bloxa nie da się edytować - można jedynie dodać coś swojego w polu na dodatkowy html. Niektóre tagi, takie jak np. link do favikonki, działają wpisane do tego pola (mimo, iż powinny znaleźć się w sekcji head strony).
-
wortes
2008/04/29 16:27:23
a czy następna notka moiże być o zmianie tła i koloru liter oraz koloru kalendarza, a także tła archiwum i tej belki, gdzie one się znajdują?
-
2008/04/29 20:36:49
Jasne że może. Problem w tym, że akurat ostatnio mam baaardzo mało czasu i nowe notki na razie się nie pojawiają. Mam nadzieję, że to się wkrótce zmieni.
-
adrijah
2010/08/30 21:03:22
Hej :) zapraszam Cię do wzięcia udziału w małym konkursie na szablon dla mojego bloga :) pozdrawiam serdecznie!
-
Gość: siedlisko.jableczniki, 212.180.230.*
2018/10/07 20:53:37
Sprzedam działki Siedlisko Jabłeczniki