Webové stránky často zobrazují svůj obsah v několika sloupcích podobně jako v časopisech.

Prvky sloužící k rozvržení stránky

Jazyk HTML má několik sémantických prvků, které definují rozdílné části webové stránky.

|img sem elements

  • <header> definuje hlavičku dokumentu nebo jeho část

  • <nav> definuje množinu navigačních odkazů

  • <section> definuje část dokumentu

  • <article> definuje nezávislý samostatný obsah

  • <aside> definuje obsah vedle obsahu (jako svislý panel)

  • <footer> definuje zápatí dokumentu nebo jeho části

  • <details> definuje pomocné detaily (podrobnosti), které může uživatel na požádání zobrazit

  • <summary> definuje hlavičku pro prvek <details>

Podrobnosti a další sémantické prvky lze nalézt v kapitole HTML sémantika

Příklad 1 — plovoucí rozvržení (float layout)
<!DOCTYPE html>
<html lang="cs">
<head>
<title>Šablona pro responsivní rozvržení</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Styl pro hlavičku */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Uděláme 2 sloupce, které budou plavat jeden vedle druhého */
nav {
  float: left;
  width: 30%;
  height: 300px; /* jenom pro ukázku, později ubereme */
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; /* jenom pro ukázku, později ubereme */
}

/* Odstranění plavání po ukončení sloupců */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Styl pro patičku */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsivní rozložení nám udělá dva sloupce jeden nad druhým místo vedle sebe na malých obrazovkách. */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<h2>CSS plovoucí rozvržení (float layout)</h2>
<p>V tomto příkladě si uděláme hlavičku, dva sloupce a patičku.
Na malých obrazovkách se sloupce postaví jeden na druhého.</p>
<p>Zkuste si změnit velikost prohlížeče a uvidíte jak se rozvržení webu mění.
V další lekci si o tom řekneme podrobněji.
</p>

<header>
  <h2>Města</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">Praha</a></li>
      <li><a href="#">Bratislava</a></li>
      <li><a href="#">Vídeň</a></li>
    </ul>
  </nav>

  <article>
    <h1>Praha</h1>
    <p>Praha je hlavním městem České republiky, má více než 1 milion obyvatel.</p>
    <p>Do dnešní podoby se Praha vyvíjela jedenáct století.
    Coby historická metropole byla hlavním městem Českého knížectví,
    Českého království a sídelním městem císařů Svaté říše římské.
    Město hrálo významnou roli v české a protestantské reformaci,
    ve třicetileté válce a v dějinách 20. století jako hlavní město Československa,
    a to jak během obou světových válek, tak v poválečné komunistické éře.</p>
  </article>
</section>

<footer>
  <p>Patička (pro Bratislavu a Vídeň zatím nic psát nebudeme, pro ukázku to není důležité).</p>
</footer>

</body>
</html>

výsledek plovoucího rozvržení

Techniky rozvržení

Jsou čtyři různé techniky, jak udělat stránku s několika sloupci. Každá z těchto technik má svoje výhody a nevýhody:

  1. CSS framework — hotové šablony

  2. CSS vlastnost float — plovoucí rozvržení

  3. CSS flexbox — pružné rozvržení

  4. CSS grid — mřížkové rozvržení

CSS frameworky (hotové šablony)

Tato technika spočívá v tom, že použijeme již hotový tzv. CSS framework jako je třeba W3.CSS nebo Bootstrap.

CSS framework je hotová odladěná šablona webové stránky, kterou po úpravách můžeme použít na svém webu.

CSS vlastnost float (plovoucí rozvržení)

Je běžné dělat rozvržení celého webu pomocí vlastnosti float CSS. Float se snadno učí – stačí si zapamatovat, jak vlastnosti float a clear fungují.

Nevýhody: Plovoucí prvky jsou svázány s tokem dokumentů, což může narušit flexibilitu. Více se o floatingu dozvíte na webu W3Schools v kapitole CSS Float and Clear.

Příklad plovoucího rozvržení je uveden výše.

CSS flexbox layout (pružné rozvržení)

Použití flexboxu zajišťuje, že se prvky chovají předvídatelně, když se rozvržení stránky musí přizpůsobit různým velikostem obrazovky a různým zobrazovacím zařízením.

Příklad 2 pružné rozvržení (flexbox layout)
<!DOCTYPE html>
<html lang="cs">
<head>
<title>Příklad pružného rozvržení</title>
<meta charset="utf-8">
<style>
.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Pružný kontejner</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<p>Flexibilní (pružné) rozvržení musí mít rodičovský prvek, který má vlastnost <em>display</em> nastavenu na  <em>flex</em>.</p>

<p>Přímí potomkové (děti), tj. div 1, div 2 a div 3, se potom automaticky stávají pružnými prvky.</p>

</body>
</html>

výsledek pružného rozvržení

CSS grid (mřížkové rozvržení)

CSS Grid Layout Module nabízí systém rozvržení založený na mřížce s řádky a sloupci, což usnadňuje navrhování webových stránek bez nutnosti použití plovoucích prvků a umístění.

Podrobnosti lze najít na W3Schools Grid layout module

Tato technika vyžaduje mnohem více znalostí a patří k pokročilým. Tady se jí nebudeme podrobně zabývat.