path: root/files/pl/conflicting/learn/css/css_layout/index.html

---
title: Układ
slug: conflicting/Learn/CSS/CSS_layout
tags:
  - CSS:Na_początek
translation_of: Learn/CSS/CSS_layout
translation_of_original: Web/Guide/CSS/Getting_started/Layout
original_slug: Web/CSS/Na_początek/Układ
---
<p>
</p><p>Ta strona opisuje kilka sposobów na modyfikację układu dokumentu.
</p><p>Nauczysz się zmieniać układ przykładowego dokumentu...
</p>
<h3 id="Informacja:_Uk.C5.82ad" name="Informacja:_Uk.C5.82ad"> Informacja: Układ </h3>
<p>Możesz użyć CSS-u do określenia wielu efektów wizualnych, które zmieniają układ Twojego dokumentu.
Niektóre z technik tworzenia układu są bardziej zaawansowane, wykraczające poza zakres podstawowego kursu.
</p><p>Kiedy modelujesz układ strony, który ma wyglądać podobnie w wielu przeglądarkach, Twój arkusz stylów łączy się z domyślnym arkuszem stylów przeglądarki oraz silnikiem układu stron w sposób, który może być bardzo złożony.
To także wykracza poza zakres tego kursu.
</p><p>Ta strona opisuje proste techniki, których możesz spróbować.
</p>
<h4 id="Struktura_dokumentu" name="Struktura_dokumentu"> Struktura dokumentu </h4>
<p>Jeżeli chcesz kontrolować układ dokumentu, być może będziesz musiał(a) zmienić jego strukturę.
</p><p>Język składni Twojego dokumentu może posiadać znaczniki ogólnego przeznaczenia do tworzenia struktury.
Na przykład w HTML-u możesz użyć znacznika <code>DIV</code> do tworzenia struktury.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Przykład
</caption><tbody><tr>
<td> W Twoim przykładowym dokumencie ponumerowane paragrafy pod drugim nagłówkiem nie mają własnego kontenera.
<p>Twój arkusz stylów nie może narysować ramki wokół tych paragrafów, ponieważ nie istnieje element, dla którego można stworzyć selektor.
</p><p>Aby poprawić ten problem strukturalny, możesz dodać znacznik <code>DIV</code> wokół paragrafów.
Ten znacznik jest unikalny, zatem można go identyfikować przez atrybut <code>id</code>.
</p>
<div style="width: 40em; color: gray;">
<pre class="eval"> &lt;H3 class="numbered"&gt;Numbered paragraphs&lt;/H3&gt;
 <strong style="color: black;">&lt;DIV id="numbered"&gt;</strong>
 &lt;P class="numbered"&gt;Lorem ipsum&lt;/P&gt;
 &lt;P class="numbered"&gt;Dolor sit&lt;/P&gt;
 &lt;P class="numbered"&gt;Amet consectetuer&lt;/P&gt;
 &lt;P class="numbered"&gt;Magna aliquam&lt;/P&gt;
 &lt;P class="numbered"&gt;Autem veleum&lt;/P&gt;
 <strong style="color: black;">&lt;/DIV&gt;</strong>
</pre>
</div>
<p>Teraz Twój arkusz stylów może używać jednej reguły do określania ramek wokół obu list:
</p>
<div style="width: 30em;">
<pre class="eval"> ul, #numbered {
 border: 1em solid #69b;
 padding-left:1em;
 }
</pre>
</div>
<p>Wynik wygląda tak:
</p>
<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
<tbody><tr>
<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
<div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> <ul style=""> <li>Arctic</li> <li>Atlantic</li> <li>Pacific</li> <li>Indian</li> <li>Southern</li> </ul>
</div>
<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
<div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> <p><b>1: </b>Lorem ipsum</p> <p><b>2: </b>Dolor sit</p> <p><b>3: </b>Amet consectetuer</p> <p><b>4: </b>Magna aliquam</p> <p><b>5: </b>Autem veleum</p>
</div>
</td></tr></tbody></table>
</td></tr></tbody></table>
<h4 id="Jednostki_rozmiaru" name="Jednostki_rozmiaru"> Jednostki rozmiaru </h4>
<p>Dotychczas w tym kursie określałeś(aś) rozmiary w pikselach (<code>px</code>).
Jest to rozsądny wybór w pewnych przypadkach, dla wyświetlaczy takich jak monitor komputera.
Jednak jeżeli użytkownik zmieni rozmiar kroju, Twój układ może przestać wyglądać dobrze.
</p><p>W wielu wypadkach lepiej jest określać rozmiary w procentach lub jednostkach ems (<code>em</code>).
Em jest nominalnym rozmiarem aktualnego kroju (szerokość litery m).
Kiedy użytkownik zmienia rozmiar kroju, Twój układ dostosuje się automatycznie.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Przykład
</caption><tbody><tr>
<td> Ramka po lewej stronie tego tekstu ma rozmiary określony w pikselach.
<p>Ramka po prawej ma rozmiar określony w ems.
</p><p>Zmień teraz rozmiary kroju w swojej przeglądarce, aby zobaczyć, jak ramka po prawej dopasowuje się do rozmiaru, a jak zachowa się ramka po lewej:
</p>
<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
<tbody><tr>
<td><div style="">ZMIEŃ MÓJ ROZMIAR</div>
</td></tr></tbody></table>
</td></tr></tbody></table>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> Dla innych urządzeń najlepiej stosować inne jednostki miar.
<p>Więcej informacji na ten temat znajdziesz na dalszych stronach tego kursu.
</p><p>Aby dowiedzieć się więcej na temat wartości i jednostek, których możesz użyć, zobacz stronę <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Wartości</a> na stronach specyfikacji CSS.
</p>
</td></tr></tbody></table>
<h4 id="Uk.C5.82ad_tekstu" name="Uk.C5.82ad_tekstu"> Układ tekstu </h4>
<p>Układ treści dokumentu jest określany przez dwie własności.
Możesz ich użyć, aby wstępnie określić układ:
</p>
<ul><li><code>text-align</code>
</li></ul>
<dl><dd>Określa położenie treści. Wybierz jedną z wartości: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>
</dd></dl>
<ul><li><code>text-indent</code>
</li></ul>
<dl><dd>Tworzy odstęp dla treści o określoną wartość.
</dd></dl>
<p>Te własności dotyczą wszelkiej treści tekstowej w elemencie, nie tylko tekstu.
Pamiętaj też, że są one dziedziczone przez elementy dzieci, zatem będzie trzeba bezpośrednio wyłączyć je dla dzieci, aby uniknąć dziwnych rezultatów.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Przykład
</caption><tbody><tr>
<td> Aby wycentrować nagłówki:
<div style="width: 30em;">
<pre class="eval"> h3 {
 border-top: 1px solid gray;
 text-align: center;
 }
</pre>
</div>
<p>Wynik:
</p>
<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
<tbody><tr>
<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p>
</td></tr></tbody></table>
<p>W dokumencie HTML treść wyświetlana pod nagłówkiem nie jest strukturalnie przynależna do nagłówka.
Zatem kiedy określasz nagłówek w taki sposób, znaczniki poniżej nagłówka nie dziedziczą stylu.
</p>
</td></tr></tbody></table>
<h4 id="P.C5.82ywanie_.28Floats.29" name="P.C5.82ywanie_.28Floats.29"> Pływanie (Floats) </h4>
<p>Własność <code>float</code> wymusza umieszczenie elementu po lewej lub prawej.
Jest to prosty sposób, aby kontrolować jego położenie i rozmiar.
</p><p>Reszta dokumentu opływa wybrany element.
Możesz to kontrolować, używając własności <code>clear</code> na innych elementach, aby sprawić, by nie opływały elementów posiadających określony <code>float</code>.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Przykład
</caption><tbody><tr>
<td>W Twoim przykładowym dokumencie listy są rozciągnięte na szerokość okna. Możesz tego uniknąć, przyklejając je do lewej strony.
<p>Aby zachować nagłówki w jednym miejscu, musisz też określić, że mają ignorować opływanie po lewej:
</p>
<div style="width: 30em;">
<pre class="eval"> ul, #numbered {float: left;}
 h3 {clear: left;}
</pre>
</div>
<p>Rezultat wygląda tak:
</p>
<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
<tbody><tr>
<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> <ul style=""> <li>Arctic</li> <li>Atlantic</li> <li>Pacific</li> <li>Indian</li> <li>Southern</li> </ul>
</div>
<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
<div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> <p><b>1: </b>Lorem ipsum</p> <p><b>2: </b>Dolor sit</p> <p><b>3: </b>Amet consectetuer</p> <p><b>4: </b>Magna aliquam</p> <p><b>5: </b>Autem veleum</p>
</div>
</td></tr></tbody></table>
<p>(Mały margines wewnętrzny jest potrzebny po prawej stronie bloków, gdzie ramka jest za blisko tekstu.)
</p>
</td></tr></tbody></table>
<h4 id="Pozycjonowanie" name="Pozycjonowanie"> Pozycjonowanie </h4>
<p>Możesz określić pozycję elementu na cztery sposoby poprzez określenie własności <code>position</code> oraz podanie jednej z następujących wartości.
</p><p>Są to własności zaawansowane.
Można ich używać w prosty sposób — dlatego są tutaj wymienione.
Jednak korzystanie z nich w bardziej złożony sposób może być skomplikowane.
</p>
<ul><li><code>relative</code>
</li></ul>
<dl><dd>Pozycja elementu jest określona relatywnie do jego normalnej pozycji.
</dd><dd>Użyj tej wartości, aby przesunąć element o określoną wartość. Czasem możesz użyć marginesu zewnętrznego, aby osiągnąć ten sam efekt.
</dd></dl>
<ul><li><code>fixed</code>
</li></ul>
<dl><dd>Element będzie przyczepiony.
</dd><dd>Określa pozycję elementu relatywnie do okna dokumentu. Nawet kiedy reszta dokumentu jest przewijana, element pozostaje w tym samym miejscu.
</dd></dl>
<ul><li><code>absolute</code>
</li></ul>
<dl><dd>Pozycja elementu jest ustawiana relatywnie do elementu rodzica.
</dd><dd>Zadziała to tylko wobec elementów, które są pozycjonowane z użyciem <code>relative</code>, <code>fixed</code> lub <code>absolute</code>.
</dd></dl>
<dl><dd>Możesz też sprawić, by dowolny element-rodzic mógł zostać zastosowany poprzez określenie mu <code>position: relative;</code> bez podawania wartości przesunięcia.
</dd></dl>
<ul><li><code>static</code>
</li></ul>
<dl><dd>Domyślne. Użyj tej wartości, aby wyłączyć pozycjonowanie.
</dd></dl>
<p>Razem z tymi wartościami własności <code>position</code> (poza <code>static</code>) podaj jedną lub więcej własności: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code>, aby określić, gdzie chcesz, aby element się pojawił, oraz jego rozmiar.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Przykład
</caption><tbody><tr>
<td> Aby umieścić dwa elementy na górze, stwórz kontener rodzica w swoim dokumencie z dwoma elementami w środku:
<div style="width: 30em;">
<pre class="eval"> &lt;DIV id="parent-div"&gt;
 &lt;P id="forward"&gt;/&lt;/P&gt;
 &lt;P id="back"&gt;\&lt;/P&gt;
 &lt;/DIV&gt;
</pre>
</div>
<p>W swoim arkuszu stylów nadaj rodzicowi wartość <code>relative</code> własności <code>position</code>.
Nie musisz podawać żadnego przesunięcia.
Określ wartość własności <code>position</code> jego dzieci jako <code>absolute</code>:
</p>
<div style="width: 30em;"><pre>
  #parent-div {
  position: relative;
  font: bold 200% sans-serif;
  }

  #forward, #back {
  position: absolute;
  margin:0px;
  top: 0px;
  left: 0px;
  }

  #forward {
  color: blue;
  }

  #back {
  color: red;
  }
</pre></div>
<p>Rezultat wygląda tak, z odwrotnym ukośnikiem nad ukośnikiem:
</p>
<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p>
</div><table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;">

<tbody><tr><td></td></tr></tbody></table>
<p><br>
</p>
</td></tr></tbody></table>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> Cały temat pozycjonowania zajmuje dwa skomplikowane rozdziały w specyfikacji CSS: <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> oraz <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>.
<p>Jeżeli tworzysz arkusze stylów, które mają działać w wielu przeglądarkach, musisz także wziąć pod uwagę różnice w sposobie interpretacji standardów oraz prawdopodobne błędy w obsłudze standardów występujące w różnych przeglądarkach.
</p>
</td></tr></tbody></table>
<h3 id="Zadanie:_Definiowanie_uk.C5.82adu" name="Zadanie:_Definiowanie_uk.C5.82adu"> Zadanie: Definiowanie układu </h3>
<p>Zmień swój przykładowy dokument i arkusz stylów, korzystając z przykładów z sekcji <b>Struktura dokumentu</b> i <b>Pływanie</b>.
</p><p>W przykładzie z <b>Pływanie</b> dodaj margines wewnętrzny, aby oddzielić tekst od prawej ramki o 0.5 em.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Wyzwanie
</caption><tbody><tr>
<td> Zmień swój przykładowy dokument, dodając ten znacznik blisko końca, tuż przed
<p><code>&lt;/BODY&gt;</code>
</p>
<pre>
  &lt;IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
</pre>
<p>Jeżeli wcześniej nie pobrałeś(aś) pliku obrazka z tego kursu, zrób to teraz:
</p>
<table style="border: 2px solid #ccc;">
<tbody><tr>
<td><img alt="Image:Yellow-pin.png">
</td></tr></tbody></table>
<p>Spróbuj przewidzieć, gdzie ten obrazek pojawi się w dokumencie.
Potem odśwież okno przeglądarki i sprawdź czy miałeś(aś) rację.
</p><p>Dodaj regułę do arkusza stylów, która umieści obrazek na stałe w prawym górnym rogu dokumentu.
</p><p>Odśwież okno przeglądarki i zmniejsz rozmiar okna.
Sprawdź, czy obrazek nadal pozostaje w górnym prawym rogu, nawet kiedy przewijasz dokument.
</p>
<div style="position: relative; width: 29.5em; height: 18em;"> <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> <ul style=""> <li>Arctic</li> <li>Atlantic</li> <li>Pacific</li> <li>Indian</li> <li>Southern</li> </ul> </div> <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> <p><b>1: </b>Lorem ipsum</p> <p><b>2: </b>Dolor sit</p> <p><b>3: </b>Amet consectetuer</p> <p><b>4: </b>Magna aliquam</p> <p><b>5: </b>Autem veleum</p> </div> <p style=""> </p> <div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin"></div> </div>
</div>
</td></tr></tbody></table>
<p><br>
</p>
<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.
</p><p>Właśnie poznałeś(aś) wszystkie zagadnienia należące do podstawowego kursu CSS.
Następna strona dokładniej opisze zaawansowane selektory dla reguł CSS oraz trochę szczegółów dotyczących tabel: <b><a href="pl/CSS/Na_pocz%c4%85tek/Tabele">Tabele</a></b>
</p>{{ languages( { "en": "en/CSS/Getting_Started/Layout", "fr": "fr/CSS/Premiers_pas/Mise_en_page", "pt": "pt/CSS/Como_come\u00e7ar/Disposi\u00e7\u00e3o" } ) }}