Szablon:BrClear/opis
Szablonów {{BrClear}} i {{SpanClear}} oraz {{HrClear}} używa się po to, żeby prawidłowo umieścić tekst pod tabelką/obrazkiem (zamiast wstawiać 10 enterów). Szablon {{SpanClear}} różni się od szablonu {{BrClear}} tym, że szablon {{BrClear}} wstawiamy pomiędzy akapitami, a ten następny w akapicie, a ostatni wstawiamy, gdy chcemy mieć odstęp pomiędzy opływanymi elementami, a tekstem.
Użycie
[edytuj]- Podstawowe wywołanie {{BrClear}}
{{BrClear}}
- Podstawowe wywołanie {{SpanClear}}
{{SpanClear}}
- Podstawowe wywołanie {{HrClear}}
{{HrClear}}
Użycie: {{BrClear}} - szablonu wstawionego pomiędzy akapitami dla obiektów opływające opływane obiekty zarówno po prawej i lewej stronie lub tylko po prawej lub po lewej.
Jest zbudowany w oparciu o element: <br />.
Możliwe jest też użycie szablonu z parametrem left lub right:
- {{BrClear|left}} daje: <p class="br-clear br-clear-left" style="font-size:0;line-height:0;margin:0;padding:0;" ><br style="clear:left" /></p> - tekst jest pod obiektem opływanym po lewej stronie.
- {{BrClear|right}} daje: <p class="br-clear br-clear-right" style="font-size:0;line-height:0;margin:0;padding:0;" ><br style="clear:right" /></p> - tekst jest pod obiektem opływanym po prawej stronie.
lub bez parametrów:
- {{BrClear}} daje: <p class="br-clear br-clear-both" style="font-size:0;line-height:0;margin:0;padding:0;" ><br style="clear:both" /></p> - tekst jest pod najbliższymi obiektami opływanymi po lewej i prawej stronie.
Użycie: {{SpanClear}} - szablonu wstawionego w akapicie dla obiektów opływające obiekty zarówno po prawej i lewej stronie lub tylko po prawej lub po lewej.
Jest zbudowany w oparciu o element liniowy: <span>...</span>- szablonu wstawionego w akapicie dla obiektów opływające opływane obiekty zarówno po prawej i lewej stronie lub tylko po prawej lub po lewej.
Możliwe jest też użycie szablonu z parametrem left lub right:
- {{SpanClear|left}} daje: <span class="span-clear span-clear-left" style="clear:left;height:0px;font-size:0;line-height:0;display:block" > </span> - tekst jest pod obiektem opływanym po lewej stronie.
- {{SpanClear|right}} daje: <span class="span-clear span-clear-right" style="clear:right;height:0px;font-size:0;line-height:0;display:block" > </span> - tekst jest pod obiektem opływanym po prawej stronie.
lub bez parametrów:
- {{SpanClear}} daje: <span class="span-clear span-clear-both" style="clear:both;height:0px;font-size:0;line-height:0;display:block" > </span> - tekst jest pod obiektami opływanymi po lewej i prawej stronie.
Użycie: {{HrClear}} - szablonu wstawionego jako pogrubiona kreska przezroczysta pod obiektami opływanymi dla obiektów opływające obiekty zarówno po prawej i lewej stronie lub tylko po prawej lub po lewej.
Jest zbudowany w oparciu o element liniowy: <hr />.
Możliwe jest też użycie szablonu z parametrem left lub right:
- {{HrClear|left}} daje: <hr class="hr-clear hr-clear-left" style="clear:left;background-color:transparent;height:1em" /> - tekst jest pod obiektem opływanym po lewej stronie.
- {{HrClear|right}} daje: <hr class="hr-clear hr-clear-right" style="clear:right;background-color:transparent;height:1em" /> - tekst jest pod obiektem opływanym po prawej stronie.
lub bez parametrów:
- {{HrClear}} daje: <hr class="hr-clear hr-clear-both" style="clear:both;background-color:transparent;height:1em" /> - tekst jest pod najbliższymi obiektami opływanymi po lewej i prawej stronie.
Wikikod szablonów: {{BrClear}} i {{SpanClear}} oraz {{HrClear}}, zbudowanych za pomocą szablonu znaczników (kombajnu)
[edytuj]Szablon {{Znacznik}} można wykorzystać do budowy podanych szablonów znaczników, oto przykłady:
- Szablon {{BrClear}}
{{Znacznik|tag=p|klasa=br-clear br-clear-{{{1|both}}} {{{klasa|}}}|styl=font-size:0;line-height:0;margin:0;padding:0;{{{styl|}}}|{{Znacznik|tag=br|samozamykający=tak|styl=clear:{{{1|both}}}}}}}
- Szablon {{SpanClear}}
{{Znacznik|tag=span|klasa=span-clear span-clear-{{{1|both}}}|styl=clear:{{{1|both}}};height:0px;font-size:0;line-height:0;display:block| }}
- Szablon {{HrClear}}
{{Znacznik|tag=hr|klasa=hr-clear hr-clear-{{{1|both}}}|styl=clear:{{{1|both}}};background-color:transparent;height:1em|samozamykający=tak}}
Przykłady
[edytuj]Bez szablonu
[edytuj]{{Plik|plik=Mokra Jama.jpg|rozmiar=200px|pozycja=lewo}}
{{Plik|plik=Dwoiśniak.jpg|rozmiar=200px|pozycja=prawo}}
{{Lorem ipsum}} dolor sit amet...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
{{Plik|plik=Mokra Jama.jpg|rozmiar=200px|pozycja=lewo}}
{{Plik|plik=Dwoiśniak.jpg|rozmiar=200px|pozycja=prawo}}
{{BrClear}}
{{Lorem ipsum}} dolor sit amet...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
{{Plik|plik=Mokra Jama.jpg|rozmiar=200px|pozycja=lewo}}
{{Plik|plik=Dwoiśniak.jpg|rozmiar=200px|pozycja=prawo}}
{{SpanClear}}
{{Lorem ipsum}} dolor sit amet...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
{{Plik|plik=Mokra Jama.jpg|rozmiar=200px|pozycja=lewo}}
{{Plik|plik=Dwoiśniak.jpg|rozmiar=200px|pozycja=prawo}}
{{HrClear}}
{{Lorem ipsum}} dolor sit amet...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
{{Plik|plik=Mokra Jama.jpg|rozmiar=100px|pozycja=lewo}}
{{Plik|plik=Dwoiśniak.jpg|rozmiar=200px|pozycja=prawo}}
{{BrClear|left}}
{{Lorem ipsum}} dolor sit amet...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
{{Plik|plik=Mokra Jama.jpg|rozmiar=200px|pozycja=lewo}}
{{Plik|plik=Dwoiśniak.jpg|rozmiar=100px|pozycja=prawo}}
{{BrClear|right}}
{{Lorem ipsum}} dolor sit amet...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
{{Plik|plik=Mokra Jama.jpg|rozmiar=100px|pozycja=lewo}}
{{Plik|plik=Dwoiśniak.jpg|rozmiar=200px|pozycja=prawo}}
{{SpanClear|left}}
{{Lorem ipsum}} dolor sit amet...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
{{Plik|plik=Mokra Jama.jpg|rozmiar=200px|pozycja=lewo}}
{{Plik|plik=Dwoiśniak.jpg|rozmiar=100px|pozycja=prawo}}
{{SpanClear|right}}
{{Lorem ipsum}} dolor sit amet...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
{{Plik|plik=Mokra Jama.jpg|rozmiar=100px|pozycja=lewo}}
{{Plik|plik=Dwoiśniak.jpg|rozmiar=200px|pozycja=prawo}}
{{HrClear|left}}
{{Lorem ipsum}} dolor sit amet...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
{{Plik|plik=Mokra Jama.jpg|rozmiar=200px|pozycja=lewo}}
{{Plik|plik=Dwoiśniak.jpg|rozmiar=100px|pozycja=prawo}}
{{HrClear|right}}
{{Lorem ipsum}} dolor sit amet...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
Parametry szablonu (strukturyzacja Wizualnego Edytora)
[edytuj]Szablony: {{BrClear}}, {{SpanClear}} i {{HrClear}} - szablony opływania elementów HTML, używa się po to, żeby prawidłowo umieścić tekst pod tabelką/obrazkiem (zamiast wstawiać 10 enterów). Szablon {{BrClear}} dodajemy, wstawiając pomiędzy akapitami, a {{SpanClear}} w akapicie, dalej szablon {{HrClear}} wstawiamy, gdy chcemy mieć dodatkowy bezwzględny odstęp.
| Parametr | Opis | Typ | Status | |
|---|---|---|---|---|
| Wyrównanie | 1 | "left" lub "right" | Ciąg znaków | opcjonalny |
Zobacz też
[edytuj]- {{BrClear}}, {{-}} (przekierowanie do {{BrClear}}) i {{Koniec grafiki}} (przekierowanie do {{BrClear}}) - szablon opływania, zbudowany w oparciu o znacznik:
<br />, elementów pływających wsadzany pomiędzy akapitami, - {{SpanClear}} - szablon opływania, zbudowany w oparciu o znacznik:
<span>...</span>- elementu liniowego, elementów pływających wsadzany wewnątrz akapitu, - {{HrClear}} - szablon opływania, zbudowany w oparciu o znacznik:
<hr />- elementu blokowego, z dodatkowym bezwzględnym odstępem, - {{DivClear}} - szablon rozpychający rodzica, by on zastosował się do rozmiarów swoich dzieci, zbudowany w oparciu o znacznik:
<div>...</div>- elementu blokowego.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||