10. díl - Plovoucí obsah v HTML

HTML a CSS Statický web Plovoucí obsah v HTML American English version English version

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Layout a pozadí v HTML, jsme započali tvorbu layoutu. V ní budeme nyní v HTML/CSS tutoriálu pokračovat.

Skončili jsme vložením tagu article, ve kterém se nacházela hlavička (header) a sekce s článkem (section). Náše stránka vypadá zjednodušeně asi takto:

Article s header a section v HTML

Elementy header a section jsou blokové (jako třeba odstavce). Jejich výchozí chování je, že se roztahnou přes celou šířku elementu, ve kterém jsou vložené (tedy přes celý article) a poskládají se pod sebe.

My ale nyní budeme chtít následující rozložení kvůli hezčímu a nápaditějšímu designu:

Article s header a section v HTML s float

Header a section budeme chtít vedle sebe, nikoli pod sebou. Docílíme toho tím, že je označíme jako plovoucí. Plovoucí elementy se řadí vedle sebe za předpokladu, že jim nastavíme rozměry.

Přesuňme se do styl.css a nastavme headeru v článku šířku a že je plovoucí. Dosud bychom to uměli jen tak, že bychom dali headeru v HTML nějakou třídu a použili třídní selektor. My ale můžeme použít tento selektor:

article header {
}

Selektor vybere všechny hlavičky všech článků na stránce (tedy elementy header, vložené v elementu article). Jelikož na stránce budeme mít vždy jen jeden článek a v něm jednu hlavičku, bude to fungovat správně. Ono by vlastně stačilo vybrat jen header, ale v budoucnu jich na stránce budeme mít více, proto ta podmínka s article.

Daný zápis funguje i v případě, že by byl header vložen v článku třeba ještě takto v tagu div (k čemu je si vysvětlíme později):

<article>
        <div>
                <header>
                ...
                </header>
        </div>
        ...
</article>

Selektoru stačí, že bude někde uvnitř article. Kdybychom chtěli, aby selektor vybral jen přímo vnořený element (hovoříme o dítěti = child), použijeme >:

article > header {
}

Nyní by se header v příkladu výše nevybral, jelikož není přímo v article.

To bylo jen malé odbočení, abychom si rozšířili zásobu selektorů. Jaký použijete je na vás.

Plovoucí obsah

CSS nám umožňuje určité elementy na stránce označit jako plovoucí. Plovoucí elementy se řadí vedle sebe a jsou neplovoucím obsahem obtékány.

Přejděme k vlastnostem, headeru nastavíme šířku na 250 pixelů a vlastnost float na left. To znamená, že element je plovoucí a bude se mezi další plovoucí elementy na stránce řadit zleva.

article header {
        width: 250px;
        float: left;
}

Stejně vybereme i section, které opět nastavíme šířku a že má být plovoucí zleva. Dále ji nastavíme bílé pozadí (je to přeci jen pro text čitelnější, při návrhu webů se vyhněte textu na jimém pozadí, než je bílá).

article section {
        width: 710px;
        float: left;
        background: white;
}

Webové stránky se většinou dělají široké 960px, aby se vešly na většinu monitorů (i když v dnešní době se nemusíte bát i lehce překročit tisícovku). Když se podíváte na rozměry, tak součet šířky obou sloupců dává přesně 960 pixelů.

Když se podíváme nyní na naší stránku, čeká nás nepříjemné překvapení:

Float left v HTML a CSS

Elementy s nadpisem a obsahem článku (header a section) jsou sice vedle sebe, ale zmizelo nám pozadí elementu article. Jak je to možné?

Pokud vedle sebe skládáme plovoucí elementy, musíme za posledním elementem v řadě ukončit plovoucí obsah. To se dělá CSS vlastností clear (jako vyčistit), do CSS si vložme nový třídní selektor:

.cistic {
        clear: both;
}

Hodnota both znamená, že chceme zastavit obtékání z obou stran, můžeme zadat i jen left nebo right.

Nyní přejděme do HTML a za </section> vložme element div se třídou cistic. Tento element obtékání ukončí:

</section>
<div class="cistic"></div>

Výsledek je poté již dle našeho očekávání:

Float left v HTML a CSS

Jen pro zopakování: V article jsou elementy header a section, oba mají nastavenou šířku a float na left, řadí se tedy vedle sebe. Za posledním je div s clear, který obtékání zastaví.

Tag div nemá z hlediska HTML vůbec žádný význam a používá se jen ke stylování. Je to element blokový. Ve starém HTML se divy používaly k definici hlavičky, patičky, článku a podobně, když ještě neexistovaly HTML 5 tagy. Existuje ještě element span, který je také bez významu a je řádkový. Často se využívá ke stylování textu, např. takto:

<p>Mám rád <span class="fialovy">fialovou</span> barvu.</p>

Pokud bychom v CSS k ukázce výše nastavili do třídního selektoru fialovy fialovou barvu, bylo by slovo "fialovou" v textu výše fialové. I když je to asi jasné, pro jistotu zopakuji, že span je naprosto nevhodný k označování např. tučného textu, jelikož mu nedodává žádný význam a jen ho ostyluje. Proto se divy a spany používají co nejméně je to možné.

Obtékání

Zůstaňme dnes ještě chvíli u vlastnosti float, kterou jsem nakousl a která toho označuje ještě trochu více, ať to máme pohromadě v jednom článku.

Pokud máme okolo plovoucích elementů nějaký neplovoucí obsah, třeba text okolo plovoucího obrázku, bude text obrázek obtékat. Tento termín opět jistě znáte z MS Wordu.

Na naší stránce takový obrázek máme a máme ho v samostatném odstavci. Budeme chtít, aby byl vložen do textu, vložme ho tedy do odstavce s textem:

<p><img src="obrazky/avatar.png" alt="Programátor HoBi" />Jmenuji se Honza Bittner a je mi 16 let...

Výsledkem bude, že se obrázek vloží do řádku:

Float left v HTML a CSS

Definujme si nyní v CSS třídní selektor vlevo, který nastaví elementu float na left:

.vlevo {
        float: left;
}

A našemu obrázku přidejme třídu vlevo:

<img src="obrazky/avatar.png" alt="Programátor HoBi" class="vlevo" />

Výsledek:

Float left v HTML a CSS

Vidíme, že neplovoucí obsah (text) obtéká náš plovoucí obrázek, který je zarovnán vlevo. Zkusme si obtékání opět ukončit divem s třídou cistic, udělejme to někde mezi odstavci:

...sportuju.</p>
<div class="cistic"></div>
<p>Mým hlavním koníčkem...

Obtékání se ukončí před posledním odstavcem a ten již bude na samostatném řádku:

Float left v HTML a CSS

Již tedy umíme obtékat obrázky a další obsah a také skládat elementy vedle sebe. Můžete si obrázek vrátit do samostatného odstavce, vypadalo to v tomto případě asi lépe, nicméně někdy obtékání určitě využijete. Web je jako vždy níže ke stažení. V příští lekci, Rámeček, stín a boxmodel v CSS, si vysvětlíme tzv. boxmodel a dokončíme oblast s článkem.


 

Stáhnout

Staženo 3167x (75.2 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
52 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Layout a pozadí v HTML
Miniatura
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Rámeček, stín a boxmodel v CSS
Aktivity (3)

 

 

Komentáře
Zobrazit starší komentáře (86)

Avatar
Neuroxerus
Člen
Avatar
Neuroxerus:21.10.2016 11:22

Ahoj, pro všechny co mají problém se zobrazením (není stejné jako na obrázku). Máte prohlížeč otevřený přes celou obrazovku? Já třeba na 1/2 mám pspad a na druhé Firefox, díky čemuž jsem poté svou i vzorovou stránku viděl chybně, jako kdyby selektory article header a article section vůbec nefungovaly.

 
Odpovědět 21.10.2016 11:22
Avatar
RollAnd Schullz:26.10.2016 19:23

Kdž se podívám a zkopíruju celý obsah souboru rozlozeni.html do svého vlastního tak vše funguje, ale jakmile provedu nejmenší změnu, nebo snad jen přepíši <div> class... tak to najednou nefunguje :-/ nevím kde je problém, kromě textu a obrázku bych měl mít stránku úplně identickou ale nefunguje to...kdyžtak přiložív i zdroják.

 
Odpovědět 26.10.2016 19:23
Avatar
Majki Rak
Člen
Avatar
Majki Rak:9.11.2016 15:37

Ahoj,mám problem,header se mi vůbec nezobrazuje,,mohl by někdo prosím pomoci ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
        <title>Obchod GamePlay.mr</title>
</head>
<body>
<div id="flexbox">
  <div id="obsah">
                                <h2>Vyhledávání</h2>
                                <p>

                                </p>
                        </div>
                                                <div id="panel">
                                <h3>-----</h3>
                                <p></a>.</p>
                        </div>
</div>
<article>
<header>
 <div id="cistic">
<div class="cistic"></div>


          <nav class="menu">
    <ul>
        <li><a href="#1">Auta</a></li>
        <li><a href="#2">Munice</a></li>
        <li><a href="#3">Nářadí</a></li>
        <li><a href="#4">---</a></li>
        <li><a href="#5">---</a></li>
    </ul>
</nav>


          </header>
    </div>
             <section>
     <p>

        Banka je top nej na celym svete ahoj jak se amamsa ja se mam dovre a co ty hmm , jde to ne ?
     </p>





            </section>
<div class="cistic"></div>






</article>



</body>
</html>
/*flexbox*/
#flexbox {
    display: flex;
    max-width: 1900px; /*delka boxu*/
    margin: auto;
   line-height: 4em;
    box-shadow: 2px 2px 15px #1c2228;
}
#flexbox div {
    background-color: #E3E7EB;
}

#menu, #panel {
    flex: 2;
}

#obsah {
    flex: 3;
}
/*flexbox*/

/*třidy*/
.centr{
        float: center;
}
/*třidy*/
body{
        background: url("a.png");
}
/*tělo*/
article section{
                width: 510px;
        background: white;
        border: 2px solid #000000;
        padding: 20px 20px 20px 20px;
                float: left;


 }
article header {
            width: 550px;
        float: left;

}
/*Navigace*/
nav.menu {
  display: block;
  width: 10%;
  background: #69ABEA;  /*cela tabulka*/
}
nav.menu ul {
  list-style-type: none;
  margin: 20; /*když dam vyšši čislo,tabulka pujde to dolu*/
  padding: 0; /*čim vyšši čislo,pismena pujdou do prava*/
}
nav.menu ul li {
  width: 100%; /*radius klikače se zmenši*/
}
nav.menu a {    /*pismo*/
  display: block;
  color: white;
  text-decoration: none;
  font-family: sans-serif;
}
nav.menu a {
  line-height: 5em; /*timto se to uděla tlustší*/
  padding: 0 15px; /*pismo jde do prava*/
}

nav.menu a:hover {
  background: rgba(0, 0, 0, 0.3); /*barva klikače*/
}
/*navigace*/
.cistic {
        clear: both;
}
.stred{
        float: center;
}
 
Odpovědět 9.11.2016 15:37
Avatar
Lazar Slavković-Raco:8.3.2017 21:44

Zdravim

mam dotaz ohledne tohoto clanku v casti plouci obsah.
Me nedela vubec celou obrazovku bilou a pouzivam PhpStorm studentska verze.

Nevite kde bude problem?

 
Odpovědět 8.3.2017 21:44
Avatar
Odpovídá na Lazar Slavković-Raco
Michal Martinec:1.5.2017 23:06

Ja to tiez nemam biele. Respektive nemusim pouzivat clear na to, aby to bolo spravne. Skusal som to aj v roznych prehliadacoch a vysledok, bol vsade rovnaky. Pouzivam SublimeText 3. Clanok je starsieho data a mozno sa odvtedy zmenil nejaky HTML 5 standard a uz nie je potrebne ukoncovat obtekanie. Tazko povedat.

Odpovědět 1.5.2017 23:06
Neporovnavaj sa s ostatnymi. Porovnavaj sa sam so sebou.
Avatar
Fíla N.
Člen
Avatar
Fíla N.:22.7.2017 23:05

Ahoj,
dotaz k <div class="cistic"></div> .
Není nic proti ničemu psát <div class="cistic" /> , nebo by se tam měl nacpat i ten druhý tag?
Je to sice párový tag, ale když tam nic není, tak jestli je to nutné tam psát z nějakého důvodu (protože je prostě párový, nebo něco...)
Díky

Editováno 22.7.2017 23:07
 
Odpovědět 22.7.2017 23:05
Avatar
Martin Hudec
Člen
Avatar
Martin Hudec:11.11.2017 20:05

Kde mám chybu ?
<!DOCTYPE html>
<html lang="cs-cz">

<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styl.css" type="text/css" />
<title>Hasiči osečná</title>

</head>

<body>
<article>
<header>
<h1> Hasiči osečná<h1>
<div id="logo">znak</di­v>
<nav>
<ul>
<li class="aktivni">ak­ce</li>
<li>není</li>
<li>není</li>
<li>není</li>
<li>není</li>
</ul>
</nav>
</header>

<section>
<p class="logo">
<img src="obrazky/lo­go.jpg" alt="Hasiči Osečná">
</p>
<div class="cistic"></div>
</section>
<div class="cistic"></div>
</article>

</body>
</html>

h1 {
text-align: center;
color: green;
}
.logo {
text-align: center;
}
.znak {
text-aling: left;
}

article > header {
}
article header {
width: 250px;
float: left;
}
article section {
width: 666px;
float: left;
background: white;
border: 2px solid #006797;
box-shadow: 2px 2px 7px #1c2228;
padding: 20px;
}
.cistic {
clear: both;
.vlevo {
float: left;
}
}
body {
background: url('obrazky/po­zadi_sede.png') #1c2228;
margin: 0px;
font: 14px Verdana;
min-width: 960px;
}

 
Odpovědět 11.11.2017 20:05
Avatar
Odpovídá na Martin Hudec
Štěpán Halíř:11.11.2017 23:45

Ahoj,
bylo by dobré pro příště alespoň trochu víc uvést, kde je problém, případně dodat screen obrazovky. Nezapomeň už příště vložit tvůj kód do patřičného kódu, který to tu naformátuje. Je to lépe čitelné.
Když takhle koukám, tak vidím, že styl "logo" máš použito pro class i id. ID je jedinečný prvek na stránce.
V CSS vidím dvě složené závorky za sebou (po třídě "cistic" nebyla ukončena).

Editováno 11.11.2017 23:47
Odpovědět 11.11.2017 23:45
Per aspera ad astras
Avatar
Igor
Člen
Avatar
Igor:19.11.2017 22:23

čaute, vedeli by ste mi poradiť prečo sa mi tretí riadok zarovnáva akoby na stred? prikladám zdrojový kód:

<!DOCTYPE html>

<html lang="cs-cz">
          <head>
                 <link rel="stylesheet" href="style.css" type="text/css" />
                 <meta charset="utf-8" />
                 <title>Opakovanie</title>
          </head>
  <body>
         <article>
                  <header>
                           <h1>O mne</h1>
                  </header>

                  <section>
                           <p>Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.</p>
                           <p class="centrovany"><img src="avatar.png" alt="Programátor HoBi" class="vlavo" />Jmenuji se Honza Bittner a je mi 16 let.
                           Chodím na Střední průmyslovou školu v České Lípě na obor IT. Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce</a>.</p>
                           <p>Rád čtu a někdy (hlavně v létě) i sportuju.</p>
                           <div class="cistic"></div>
                           <p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p>
                  </section>
            <div class="cistic"></div>
  </body>
</html>
/* CSS Document */
h1 {
  text-align: center;
  text-shadow: 3px 3px 5px #FF100A;
  color: white;
  font-weight: normal;
  font-size: 2em;
}

.centrovany {
  text-align:center;
}

article {
  background: url('pozadi.png') #009aca;
}

article header {
  float: left;
  width: 250px;
}

article section {
  float: left;
  width: 710px;
  background: white;
}

.cistic {
  clear: both;
}

.vlavo {
  float: left;
}
 
Odpovědět 19.11.2017 22:23
Avatar
Igor
Člen
Avatar
Igor:20.11.2017 10:26

už som na to prišiel, mal som ho v classe s obrázkom ktorý som mal nastavený na stred.

 
Odpovědět 20.11.2017 10:26
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 96. Zobrazit vše