unslug pl: move

1 files changed, 0 insertions, 275 deletions

diff --git a/files/pl/web/css/na_początek/układ/index.html b/files/pl/web/css/na_początek/układ/index.html
deleted file mode 100644
index d532771ddc..0000000000
--- a/files/pl/web/css/na_początek/układ/index.html
+++ /dev/null
@@ -1,275 +0,0 @@
----
-title: Układ
-slug: Web/CSS/Na_początek/Układ
-tags:
-  - 'CSS:Na_początek'
-translation_of: Learn/CSS/CSS_layout
-translation_of_original: Web/Guide/CSS/Getting_started/Layout
----
-<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" } ) }}