Třísloupcový responsivní layout - Layout stránky

vydáno: 10.08.2016, seriál: Layout stránky

Toto je 5. díl seriálu Layout stránky, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

V tomto díle seriálu si ukážeme na názorném příkladu, jak vytvořit trojsloupcový responsivní layout. Základem je opět navrhnout strukturu webu a osobně doporučuji použít srukturální HTML5 tagy pro přehlednost. V ukázce budou použity tyto tagy: <header>, <aside> a <footer>. V našem příkladu využijeme opět zápis @media pro zápis konkrétního chování do určitého rozlišení. Třísloupcový layout je náročnější v tom, že je potřeba si rozmyslet které sloupce se mají jak floatovat na mobilních zařízení. Doporučuji jako první mít hlavičku, sloupec s navigací nebo nejdůležitějšími údaji a pak obsahovou část a nakonec až třetí sloupec a patu. Nyní tedy přejdeme k napsání samotné ukázky. Ukázka je v kódu komentovaná pro lepší popis struktury.

Zobrazit ukázku

Ukázka:

CSS

/* Obecné css pro body a nadpisy */

body {
    overflow-x: hidden;
    font-family: Arial,sans-serif;
    color: #000;
    margin: 0 auto;
}

p {
    font-size: 14px;
    text-align: justify;
}

h1 {
  font-size: 26px;
}

h2 {
  font-size: 23px;
}

h3 {
  font-size: 18px;
}

/* Struktura */

#container {
  max-width: 1000px;
  padding: 10px;
  margin:  auto;
}

header {
  width: 100%;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
}

#content {
  width: calc(50% - 20px);
  float: left;
  box-sizing: border-box;
  border: 1px solid #000;
  padding: 10px;
  margin-top: 30px;
  margin-left: 10px;
  margin-right: 10px;
}

aside {
  width: 25%;
  padding: 10px;
  border: 1px solid #000;
  margin-top: 30px;
  box-sizing: border-box;
}

aside#left {
  float: left;
}

aside#right {
  float: right;
}

/* Menu v levém sloupci */

ul#navigation{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

ul#navigation li a{
  font-size: 14px;
  color: #000;
  font-style: italic;
  text-decoration: none;
  width: 100%;
  line-height: 19px;
  margin-bottom: 5px;
  float: left;
}

ul#navigation li a:hover{
  text-decoration: underline;
}

/* Pata */

footer {
  width: 100%;
  padding: 10px;
  border: 1px solid #000;
  clear: both;
  float: left;
  margin-top: 30px;
  box-sizing: border-box;
}

img {
   margin-top: 20px;
   margin-bottom: 20px;
}

/* Nadefinování chování prvků dle rozlišení */

/* Tablet */

@media (max-width: 1020px) {

#content {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

aside {
 float: left;
 width: 100%;
}

footer {
  width: 100%;
}

}

/* Mobil */

@media (max-width: 320px) {

img {
   max-width: 100%;
}

}

Použité vlastnosti: font-family, color, margin, font-size, text-align, max-width, padding, width, border, box-sizing, float, margin-top, margin-left, margin-right, list-style, padding-left, font-style, text-decoration, line-height, margin-bottom, clear

HTML

<!DOCTYPE html>
<html lang="cs-CZ">
<head>

    <meta charset="utf-8"><!-- Definice kódování webu -->
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Tento zápis řekne prohlížeči aby nezmenšoval obsah webu -->
    <title>Třísloupcový layout</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" /><!-- CSS styly -->
</head>

<body>
<div id="container">

  <header>
   <p>Obsah hlavičky</p>
  </header>

  <aside id="left"><!-- levý sloupec - tento sloupec se zalomí u mobilního telefonu hned za hlavičkou -->

    <h2>Menu levého sloupce</h2>

    <ul id="navigation"><!-- Menu -->
    <li><a href="#" title="Položka 1">Položka 1</a></li>
    <li><a href="#" title="Položka 2">Položka 2</a></li>
    <li><a href="#" title="Položka 3">Položka 3</a></li>
    <li><a href="#" title="Položka 4">Položka 4</a></li>
    </ul>

  </aside>

  <div id="content"><!-- prostřední sloupec -->
    <h1>Nadpis prostředního sloupce</h1>
    <p>Obsah prostředního sloupce</p>
  </div>

  <aside id="right"><!-- Pravý sloupec -->

    <h2>Nadpis pravého sloupce</h2>
    <p>obsah druhého sloupce nebo menu</p>

  </aside>

  <footer><!-- Patička webu -->
    <p>Obsah patičky jako copyright či jiné informace k webu</p>
  </footer>

</div>

</body><!-- Konec těla webové stránky -->

</html><!-- Konec HTML dokumentu -->

Použité tagy: <html>, <head>, <meta>, <title>, <link>, <body>, <div>, <header>, <p>, <aside>, <h2>, <ul>, <li>, <a>, <h1>, <footer>

Po spuštění ukázky můžete vidět chování v jednotlivých rozlišení. Záleží jen na Vás, zda pro tablet na "ležato" dopíšete pravidlo, že se mají sloupce jen zmenšit nebo roztáhnout na plnou velikost. Popřípadně u mobilních telefonů je dobré zmenšit písmo tak, aby nadpisy nebyly na několik řádků. Stačí pro dané rozlišení zapsat novou velikost h nadpisu.

Témata

Seriály

Třísloupcový responsivní layout - Layout stránky

Seriál Layout stránky

Seznam všech článků seriálu: