Przejdź do treści

Pozycjonowanie

Wyświetlanie

selektor { display: sposób }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

Natomiast jako "sposób" należy podać:
  • block - element będzie wyświetlony w bloku (odstęp z góry i z dołu)
  • inline - element będzie wyświetlony w linii (sąsiadująco z innymi)
  • list-item - element wykazu: <li>...</li>
  • none - element nie będzie wyświetlany
  • inline-block - element zachowuje się podobnie jak element zastępowany (Firefox 3, Opera 7, Chrome, Konqueror)
  • run-in - jeśli po elemencie następuje brat będący blokiem, element zostanie sformatowany jako "inline" (w linii) w ramach treści brata. W przeciwnym razie element zostanie sformatowany jako "block" (Opera 6, Chrome)
  • table - tabela blokowa: <table>...</table>
  • inline-table - tabela "inline": <table>...</table>
  • table-row-group - grupa wierszy tabeli: <tbody>...</tbody>
  • table-header-group - nagłówek tabeli: <thead>...</thead>
  • table-footer-group - stopka tabeli: <tfoot>...</tfoot>
  • table-row - wiersz tabeli: <tr>...</tr>
  • table-column-group - grupa kolumn tabeli: <colgroup>...</colgroup>
  • table-column - kolumna tabeli: <col />
  • table-cell - komórka tabeli: <td>...</td>, <th>...</th>
  • table-caption - tytuł (podpis) tabeli: <caption>...</caption>
  • compact - analogicznie jak run-in (CSS 2, ale nie CSS 2.1)
  • marker - wyróżnik wykazu (CSS 2, ale nie CSS 2.1)

Polecenie to pozwala określić sposób, w jaki będzie wyświetlony na ekranie dany element. Jest to bardzo przydatna funkcja, jeśli chcemy zrezygnować z domyślnego sposobu wyświetlania. Na przykład: wszystkie tytuły (<Hn>...</Hn>) są wyświetlane domyślnie w bloku, tzn. automatycznie są dodawane linijki przerwy pomiędzy danym tytułem a sąsiadującymi z nim elementami. Lecz dzięki poleceniu "display: inline" możliwe jest ustawienie dwóch sąsiednich tytułów w jednej linii.

Natomiast użycie "display: list-item" okazuje się przydatne w stosunku do elementu wykazu (znacznik <li>...</li>), kiedy chcemy przywrócić normalny sposób jego wyświetlania (który został zmieniony np. w arkuszu stylów), nie zmieniając jednocześnie wyświetlania dla innych elementów <li>...</li>. Oczywiście można w ten sposób również tworzyć punkty wykazu z innych znaczników niż <li>...</li>.

Polecenie "display: none" okazuje się bardziej przydatne, niż początkowo można by sądzić. Przykładowe zastosowanie to usunięcie niektórych elementów strony podczas jej drukowania [zobacz: Media]. Nie ma raczej sensu drukować menu nawigacyjnego, które powtarza się na każdej stronie, ponieważ na papierze i tak będzie ono całkowicie bezużyteczne. Zastosowanie tego polecenia pozwoli zaoszczędzić trochę papieru, a jednocześnie sprawi, że wydruk będzie wyglądał bardziej spójnie.

Polecenie display: none jest zbliżone do visibility: hidden. Różnica polega na tym, że pierwsze z nich całkowicie usuwa element z ekranu, natomiast drugie tylko go ukrywa - w miejscu gdzie miał być wyświetlony, jest widoczne puste miejsce.

Działanie "display: run-in" jest bardziej skomplikowane, dlatego posłużę się przykładem:

<div style="display: run-in">
	Ten element zostanie wyświetlony w linii w ramach brata.
</div>
<div>
	Brat ("block")
</div>
<br />
<div style="display: run-in">
	Ten element zostanie wyświetlony jako blok.
</div>
<span>Brat ("inline")</span>
<br /><br />
<div style="display: run-in">
	Ten element zostanie wyświetlony jako blok.
</div>
Tekst

Na ekranie powinniśmy zobaczyć taki układ treści:

Ten element zostanie wyświetlony w linii w ramach brata. Brat ("block")

Ten element zostanie wyświetlony jako blok.
Brat ("inline")

Ten element zostanie wyświetlony jako blok.
Tekst
Ten element zostanie wyświetlony w linii w ramach brata.
Brat ("block")

Ten element zostanie wyświetlony jako blok.
Brat ("inline")

Ten element zostanie wyświetlony jako blok.
Tekst

UWAGA! MSIE 6.0 ani 7.0 nie obsługuje tabelarycznych wartości wyświetlania elementów, inline-block ani run-in. Natomiast MSIE 5 dodatkowo nie radzi sobie z list-item. Wszystkie z CSS 2.1 są obsługiwane przez przeglądarkę Opera i Chrome, a także w większej części Firefox 3 i Konqueror (oprócz run-in) - Firefox 2 nie obsługuje również inline-block. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład:

To jest zwykły tekst

To jest normalny akapit (wyświetlany w bloku).

To jest zwykły tekst

To jest akapit w linii.

To jest zwykły tekst



display: block display: blockdisplay: block


display: inline display: inlinedisplay: inline


display: none display: nonedisplay: none
(obrazek nie został wyświetlony, pomimo że polecenie odpowiedzialne za jego wstawienie zostało umieszczone na stronie)


<div style="display: list-item">...</div>
<div style="display: list-item">...</div>
<div style="display: list-item">...</div>



<div style="display: table; border-spacing: 1px; border: 1px solid black">
<div style="display: table-row">
	<div style="display: table-cell; border: 1px solid gray">komórka1</div>
	<div style="display: table-cell; border: 1px solid gray">komórka2</div>
</div>
<div style="display: table-row">
	<div style="display: table-cell; border: 1px solid gray">komórka3</div>
	<div style="display: table-cell; border: 1px solid gray">komórka4</div>
</div>
</div>
komórka1
komórka2
komórka3
komórka4

Jest to odpowiednik następującej tabeli:

<table style="border-spacing: 1px; border: 1px solid black">
<tr>
	<td style="border: 1px solid gray">komórka1</td>
	<td style="border: 1px solid gray">komórka2</td>
</tr>
<tr>
	<td style="border: 1px solid gray">komórka3</td>
	<td style="border: 1px solid gray">komórka4</td>
</tr>
</table>
komórka1komórka2
komórka3komórka4



To jest zwykły tekst
display: inline-block; width: 150px; height: 100px; background-color: silver
To jest zwykły tekst

Dla porównania zwykły blok:

To jest zwykły tekst
width: 150px; height: 100px; background-color: silver
To jest zwykły tekst

Zobacz także

Komentarze

Zobacz więcej komentarzy