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

Dvousloupcový responsivní layout - Layout stránky

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

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

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

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