Od provozovatele projektu Rychlost.CZ
WebDev.wiki > Návody pro webmastery a vývojáře > Třísloupcový responsivní layout

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

vydáno: 10.08.2016, seriál: Layout stránky | komentářů: 0

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%;
}
}
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 -->

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.

Seriál Layout stránky

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