Dvousloupcový responsivní layout - Layout stránky

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

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

V dnešním díle seriálu si ukážeme, jak vytvořit dvousloupcový responsivní layout. Responsivní layout lze napsat dvěma způsoby buď přes flexibilní velikost, kde jsou v css definovány velikosti prvků na stránce za pomocí procent a nebo přes media queries, které přiřazují daný styl k danému rozlišení. Styly se přepínají na základě bodu zlomu, kde se končí rozlišení jednoho zařízení a začíná rozlišení jiného.

Příkladem je: @media screen and (max-width: 768px) {

#container {

width: 760px;

}

Prvně si vytvoříme adresářovou strukturu pro web. Doporučuji toto:

/ - v hlavní složce html soubory

/img/ - složka pro obrázky webu

/css/ - složka pro CSS

Nyní se pustíme do psaní samotného html dokumentu a napojení bootstrapu. Základ dokumentu je <head>,<body>,<html> a využijeme pro přehlednost i strukturální html tagy <header>, <aside> a <footer>.

Ukázka:

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>Dvousloupcový 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>

  <div id="content"><!-- Levý sloupec -->
    <h1>Nadpis levého sloupce</h1>
    <p>Obsah levého sloupce</p>
  </div>

  <aside><!-- 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</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>, <h1>, <aside>, <h2>, <footer>

Tímto jsme si vytvořili základní html dokument. Nyní je potřeba vytvořit samotný css soubor, kde bude nadefinováno krom formátování prvků i jejich chování u daného rozlišení. Prvně si vytvoříme strukturu pro klasické zobrazení a poté nadefinujeme body zlomu.

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 {
  width: 1000px;
  margin: 0 auto;
}

header {
  width: 98%;
  border: 1px solid #000;
  padding: 1%;
}

#content {
  width: 72%;
  float: left;
  border: 1px solid #000;
  padding: 1%;
  margin-top: 30px;
}

aside {
  width: 22%;
  padding: 1%;
  float: right;
  border: 1px solid #000;
  margin-top: 30px;
}

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

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

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

/* Tablet */

@media (max-width: 1020px) {

#container {
   width: 98%;
   padding: 1%;
}

#content {
  width: 98%;
  float: left;
}

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

footer {
  width: 98%;
}

}

/* Mobil */

@media (max-width: 320px) {

img {
   max-width: 100%;
}
}

Použité vlastnosti: font-family, color, margin, font-size, text-align, width, border, padding, float, margin-top, clear, margin-bottom, max-width

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>Dvousloupcový 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>

  <div id="content"><!-- Levý sloupec -->
    <h1>Nadpis levého sloupce</h1>
    <p>Obsah levého sloupce</p>
  </div>

  <aside><!-- 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</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>, <h1>, <aside>, <h2>, <footer>

Dostylováním layoutu ve style.css je Váš dvousloupcový layout připraven k použití. Samozřejmě je nutné dopsat různé případy pro rozlišení. V příštím díle seriálu si ukážeme postup, jak vytvořit třísloupcový layout.

CSS: návody na kaskádovité styly

HTML: návody jak psát html tagy

Témata

Seriály

Dvousloupcový responsivní layout - Layout stránky

Seriál Layout stránky

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