Szablon:SpanClear

Z Wikibooks, biblioteki wolnych podręczników.
Przejdź do nawigacji Przejdź do wyszukiwania
Template-info.png Dokumentacja szablonu [zobacz] [edytuj] [historia] [odśwież]

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}}, następna linia będzie zarówno pod obiektem z prawej, jak i z lewej strony, co odpowiada tekstowi: <p style="font-size:0;line-height:0"><br style="clear:both"/></p>.

Jest zbudowany w oparciu o element: <br />.

Możliwe jest też użycie szablonu z parametrem left lub right:

  • {{BrClear|left}} daje: <p style="font-size:0;line-height:0"><br style="clear:left"/></p>
  • {{BrClear|right}} daje: <p style="font-size:0;line-height:0"><br style="clear:right"/></p>

Użycie: {{SpanClear}}, następna linia będzie zarówno pod obiektem z prawej, jak i z lewej strony, co odpowiada tekstowi: <span style="clear:both;height:0px;font-size:0;line-height:0;display:block">&nbsp;</span>.

Jest zbudowany w oparciu o element liniowy: <span>...</span>.

Możliwe jest też użycie szablonu z parametrem left lub right:

  • {{SpanClear|left}} daje: <span style="clear:left;height:0px;font-size:0;line-height:0;display:block">&nbsp;</span>
  • {{SpanClear|right}} daje: <span style="clear:right;height:0px;font-size:0;line-height:0;display:block">&nbsp;</span>

Użycie: {{HrClear}}, następna linia będzie zarówno pod obiektem z prawej, jak i z lewej strony, co odpowiada tekstowi: <hr style="clear:both;background-color:transparent;height:1em"/>.

Jest zbudowany w oparciu o element liniowy: <hr />.

Możliwe jest też użycie szablonu z parametrem left lub right:

  • {{HrClear|left}} daje: <hr style="clear:left;background-color:transparent;height:1em"/>
  • {{HrClear|right}} daje: <hr style="clear:right;background-color:transparent;height:1em"/>

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|styl=font-size:0;line-height:0|{{Znacznik|tag=br|styl=clear:{{{1|both}}}|samozamykający=tak}}}}
Szablon {{SpanClear}}
{{Znacznik|tag=span|styl=clear:{{{1|both}}};height:0px;font-size:0;line-height:0;display:block|&nbsp;}}
Szablon {{HrClear}}
{{Znacznik|tag=hr|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...
Mokra Jama.jpg
Dwoiśniak.jpg
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: ฟหกดึ้.

 

Z szablonem {{BrClear}}[edytuj]

{{Plik|plik=Mokra Jama.jpg|rozmiar=200px|pozycja=lewo}}
{{Plik|plik=Dwoiśniak.jpg|rozmiar=200px|pozycja=prawo}}
{{BrClear}}
{{Lorem ipsum}} dolor sit amet...
Mokra Jama.jpg
Dwoiśniak.jpg


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: ฟหกดึ้.

 

Z szablonem {{SpanClear}}[edytuj]

{{Plik|plik=Mokra Jama.jpg|rozmiar=200px|pozycja=lewo}}
{{Plik|plik=Dwoiśniak.jpg|rozmiar=200px|pozycja=prawo}}
{{SpanClear}}
{{Lorem ipsum}} dolor sit amet...
Mokra Jama.jpg
Dwoiśniak.jpg
  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: ฟหกดึ้.

 

Z szablonem {{HrClear}}[edytuj]

{{Plik|plik=Mokra Jama.jpg|rozmiar=200px|pozycja=lewo}}
{{Plik|plik=Dwoiśniak.jpg|rozmiar=200px|pozycja=prawo}}
{{HrClear}}
{{Lorem ipsum}} dolor sit amet...
Mokra Jama.jpg
Dwoiśniak.jpg

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: ฟหกดึ้.

 

Z szablonem {{BrClear}} i parametrem left[edytuj]

{{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...
Mokra Jama.jpg
Dwoiśniak.jpg


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: ฟหกดึ้.

Z szablonem {{BrClear}} i parametrem right[edytuj]

{{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...
Mokra Jama.jpg
Dwoiśniak.jpg


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: ฟหกดึ้.

 

Z szablonem {{SpanClear}} i parametrem left[edytuj]

{{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...
Mokra Jama.jpg
Dwoiśniak.jpg
  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: ฟหกดึ้.

Z szablonem {{SpanClear}} i parametrem right[edytuj]

{{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...
Mokra Jama.jpg
Dwoiśniak.jpg
  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: ฟหกดึ้.

Z szablonem {{HrClear}} i parametrem left[edytuj]

{{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...
Mokra Jama.jpg
Dwoiśniak.jpg

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: ฟหกดึ้.

Z szablonem {{HrClear}} i parametrem right[edytuj]

{{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...
Mokra Jama.jpg
Dwoiśniak.jpg

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}} dodaje wstawiamy pomiędzy akapitami, a {{SpanClear}} w akapicie, dalej szablon {{HrClear}} wstawiamy, gdy chcemy mieć dodatkowy bezwzględny odstęp.

Parametry szablonu

ParametrOpisTypStatus
Wyrównanie1

"left" lub "right"

Ciąg znakówopcjonalny

Zobacz też[edytuj]

  • {{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.