Formátování obsahu pomocí blok vzniklo pro lodě (Hotely) - https://www.okruzni-plavby.cz/lode/costa/costa-fascinosa-547646/
Používá se i u lodních společností - https://www.okruzni-plavby.cz/lode/costa/
V detailu plavby - https://www.okruzni-plavby.cz/plavby/italie-spanelsko-francie-544355/
formátování lze použít v článku - https://www.okruzni-plavby.cz/destinace/stredomori/
Způsob zápisu v redakci
≺div class="blok">
≺div> ≺h3> 1 - obsah menšího bločku ≺/h3> ≺/div≻
≺div> 2 - obsah většího bločku ≺/div≻
≺/div≻
první vnořený div se buze zobrazovat s pozadím a odsazením od okrajů
druhý vnořený div je bez odsazeni, vložený obrázek, mapa, video bude vyplňovat celou plochu divu
pro použití textrového obshahu má nadpis h2, h3, h4 , ul a text v druhé buňce má nastaveno odsazení od barevného políčka buňky 1
Bločky se skládají pod sebe - první a druhý div mění umístění podle pozice v obsahu , sudý <- > lichý element,
jako element v obsahu se počítají ale i nadpisy, text ohraničený (p) a hr - tímto způsobem lze pak ovlivnit pozici obrázku a popisku
zjednodušeně - pozici bločků změním přidáním nebo ubráním elementu nad ním , nadpis, odstavec textu
Příklad použítí div BLOK
Nadpis H3
Nadpis H4
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nullam sed lorem iaculis, dapibus dui volutpat, laoreet felis.
- Sed id diam vel mi pulvinar volutpat eget eget ligula.
- Integer vitae enim non ante eleifend molestie.
- Proin ultricies ante et sapien sodales dictum.
Nadpis H3
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Nadpis H3
- Suspendisse ac nunc venenatis, sagittis augue a, viverra velit.
- Nunc sodales massa non augue tristique fermentum.
- Integer nec sapien at massa faucibus scelerisque.
- Etiam ornare diam eget massa tincidunt dignissim.
Nadpis H3
Proin non condimentum erat, nec egestas est. Sed finibus mauris id elit feugiat imperdiet. Pellentesque ornare nunc eu ante rhoncus aliquet. Nunc cursus massa in nisl congue, ut placerat sem blandit. Vestibulum volutpat, est ac porta hendrerit, dui nisi ullamcorper ex, at pulvinar leo ante eu massa. Vestibulum eleifend quam dui. Vivamus at hendrerit felis. Nam justo quam, tincidunt dignissim metus ut, malesuada feugiat dui. Donec molestie velit eu tellus ultricies porttitor.
Nadpis H3
- Integer vel risus quis lacus placerat consequat.
- Aliquam vel augue at lectus fermentum rhoncus sit amet quis felis.
- Phasellus nec magna in orci blandit suscipit eu nec eros.
Nadpis H3
- Integer vel risus quis lacus placerat consequat.
- Aliquam vel augue at lectus fermentum rhoncus sit amet quis felis.
- Phasellus nec magna in orci blandit suscipit eu nec eros.
Nullam faucibus mi quis velit nadpis H3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi scelerisque luctus velit. Mauris elementum mauris vitae tortor. In dapibus augue non sapien. Fusce tellus. Pellentesque sapien. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer imperdiet lectus quis justo.
- Etiam in dolor ut leo placerat finibus et non justo.
- Nullam iaculis lacus at diam facilisis, ultricies molestie neque vestibulum.
- Ut non ligula iaculis, mattis nulla id, ullamcorper turpis.
- Sed sollicitudin urna in tortor euismod, quis cursus nibh venenatis.
- Maecenas eu sapien sit amet nulla lobortis accumsan a pharetra neque.
- Sed eu lorem pharetra eros pharetra porta maximus id sem.
Nunc auctor. Nullam faucibus mi quis velit. Etiam neque. Etiam dictum tincidunt diam. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Etiam commodo dui eget wisi. Duis pulvinar. Nam quis nulla.
Střídání zarovnání elementů
Element 1 Element text
Element 2 Nadpis H3
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nullam sed lorem iaculis, dapibus dui volutpat, laoreet felis.
- Sed id diam vel mi pulvinar volutpat eget eget ligula.
- Integer vitae enim non ante eleifend molestie.
- Proin ultricies ante et sapien sodales dictum.
Element 1 Element nadpis h3
Element 2 Nadpis H3
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nullam sed lorem iaculis, dapibus dui volutpat, laoreet felis.
- Sed id diam vel mi pulvinar volutpat eget eget ligula.
- Integer vitae enim non ante eleifend molestie.
- Proin ultricies ante et sapien sodales dictum.
Element 1 Element nadpis h3
Element 2 Nadpis H3
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nullam sed lorem iaculis, dapibus dui volutpat, laoreet felis.
- Sed id diam vel mi pulvinar volutpat eget eget ligula.
- Integer vitae enim non ante eleifend molestie.
- Proin ultricies ante et sapien sodales dictum.
Element 1 Element nadpis h3
Element 2 Element text
Element 1 Nadpis H3
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nullam sed lorem iaculis, dapibus dui volutpat, laoreet felis.
- Sed id diam vel mi pulvinar volutpat eget eget ligula.
- Integer vitae enim non ante eleifend molestie.
- Proin ultricies ante et sapien sodales dictum.
Element 2 Element nadpis h3
Element 1 Element text
Element 2 Nadpis H3
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nullam sed lorem iaculis, dapibus dui volutpat, laoreet felis.
- Sed id diam vel mi pulvinar volutpat eget eget ligula.
- Integer vitae enim non ante eleifend molestie.
- Proin ultricies ante et sapien sodales dictum.
Příklad použítí div BOX
Způsob zápisu v redakci
≺div class="box">
≺div> ≺h3> 1 - obsah menšího bločku ≺/h3> ≺/div≻
≺div> 2 - obsah většího bločku ≺/div≻
≺/div≻
první vnořený div se buze zobrazovat bez odsazeni a bez pozadí, vložený obrázek, mapa, video bude vyplňovat celou plochu divu
druhý vnořený div je bez odsazeni, vložený obrázek, mapa, video bude vyplňovat celou plochu divu
pro použití textrového obshahu má nadpis h2, h3, h4 , ul a text v má nastaveno odsazení od okraju divu
Bločky se skládají pod sebe - první a druhý div mění umístění podle pozice v obsahu , sudý <- > lichý element,
jako element v obsahu se počítají ale i nadpisy, text ohraničený (p) a hr - tímto způsobem lze pak ovlivnit pozici obrázku a popisku
zjednodušeně - pozici bločků změním přidáním nebo ubráním elementu nad ním , nadpis, odstavec textu
Nadpis H3
Nadpis H4
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nullam sed lorem iaculis, dapibus dui volutpat, laoreet felis.
- Sed id diam vel mi pulvinar volutpat eget eget ligula.
- Integer vitae enim non ante eleifend molestie.
- Proin ultricies ante et sapien sodales dictum.
Nadpis H3
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Nullam faucibus mi quis velit nadpis H3
- Etiam in dolor ut leo placerat finibus et non justo.
- Nullam iaculis lacus at diam facilisis, ultricies molestie neque vestibulum.
- Ut non ligula iaculis, mattis nulla id, ullamcorper turpis.
- Sed sollicitudin urna in tortor euismod, quis cursus nibh venenatis.
- Maecenas eu sapien sit amet nulla lobortis accumsan a pharetra neque.
- Sed eu lorem pharetra eros pharetra porta maximus id sem.
Nadpis H3
- Integer vel risus quis lacus placerat consequat.
- Aliquam vel augue at lectus fermentum rhoncus sit amet quis felis.
- Phasellus nec magna in orci blandit suscipit eu nec eros.
Nullam faucibus mi quis velit nadpis H3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi scelerisque luctus velit. Mauris elementum mauris vitae tortor. In dapibus augue non sapien. Fusce tellus. Pellentesque sapien. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer imperdiet lectus quis justo.
- Etiam in dolor ut leo placerat finibus et non justo.
- Nullam iaculis lacus at diam facilisis, ultricies molestie neque vestibulum.
- Ut non ligula iaculis, mattis nulla id, ullamcorper turpis.
- Sed sollicitudin urna in tortor euismod, quis cursus nibh venenatis.
- Maecenas eu sapien sit amet nulla lobortis accumsan a pharetra neque.
- Sed eu lorem pharetra eros pharetra porta maximus id sem.
Nunc auctor. Nullam faucibus mi quis velit. Etiam neque. Etiam dictum tincidunt diam. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Etiam commodo dui eget wisi. Duis pulvinar. Nam quis nulla.
Element 1 Střídání zarovnání elementů
Element 2 Nadpis H3
Nadpis H4
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nullam sed lorem iaculis, dapibus dui volutpat, laoreet felis.
- Sed id diam vel mi pulvinar volutpat eget eget ligula.
- Integer vitae enim non ante eleifend molestie.
- Proin ultricies ante et sapien sodales dictum.
Element 1 Element nadpis h3
Element 2 Nadpis H3
Nadpis H4
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nullam sed lorem iaculis, dapibus dui volutpat, laoreet felis.
- Sed id diam vel mi pulvinar volutpat eget eget ligula.
- Integer vitae enim non ante eleifend molestie.
- Proin ultricies ante et sapien sodales dictum.
Element 1 Element nadpis h3
Element 2 Nadpis H3
Nadpis H4
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nullam sed lorem iaculis, dapibus dui volutpat, laoreet felis.
- Sed id diam vel mi pulvinar volutpat eget eget ligula.
- Integer vitae enim non ante eleifend molestie.
- Proin ultricies ante et sapien sodales dictum.
Element 1 Element nadpis h3
Element 2 Element text
Element 1 Nadpis H3
Nadpis H4
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nullam sed lorem iaculis, dapibus dui volutpat, laoreet felis.
- Sed id diam vel mi pulvinar volutpat eget eget ligula.
- Integer vitae enim non ante eleifend molestie.
- Proin ultricies ante et sapien sodales dictum.
Element 2 Element nadpis h3
Element 1 Element text
Element 2 Nadpis H3
Nadpis H4
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nullam sed lorem iaculis, dapibus dui volutpat, laoreet felis.
- Sed id diam vel mi pulvinar volutpat eget eget ligula.
- Integer vitae enim non ante eleifend molestie.
- Proin ultricies ante et sapien sodales dictum.
