Tři sloupce
v deklaracích CSS

Přijdou chvíle, kdy potřebujete rozdělit stránku na několik sloupců a přitom nehcete k tomuto účelu požít tabulku. Já jsem se do této situace dostal v době, kdy jsem ještě na webu používal modul YOOtoppanel a do něj jsem potřeboval článek rozdělený na několik oblastí, ve kterých by byly různě zobrazeny texty či moduly - tenkrát jsem k tomuto účelu použil různě stylované bloky a jelikož se domnívám, že tato technika by mohla zajímat i jiné uživatele, zejména ty méně zběhlé v HTML a CSS, rozhodl jsem zde zveřejnit postup, jak tímto způsobem rozdělit stránku do tří sloupců.
Musím vás ovšem upozornit, že pokud chcete docílit podobného efektu, jaký jsem dosáhl v toppanelu já, budete muset pracovat v HTML editoru, a krom toho, neškodila by alespoň základní znalost HTML a CSS. Ale nebudu vás strašit, pár vysvětlivek najdete na konci textu a teď jdeme na to...
V první řadě je potřeba vytvořit dva samostatné oddíly o určené šířce, řazené vedle sebe - k tomu použijeme blokové HTML tagy <div> a CSS atributy width a float, a abyste mohli výsledek kontrolovat, přidáme jednotlivým oddílům, použitím CSS atributu background-color, různou barvu pozadí. HTML zápis tedy bude vypadat takto:
<div style="width: 200px;"> <div style="width: 100px; float: left; background-color: #ffff00; margin-bottom: 15px;">AAA</div> <div style="width: 100px; float: right; background-color: #ff0000; margin-bottom: 15px;">BBB</div> </div>
A výsledek na stránce pak takto...
Dalším krokem bude přidání třetího sloupce (tímto způsobem můžete postupně přidávat další a další sloupce), zápis doplníme pomocí stejných tagů a atributů jako v předešlém bodě tímto způsobem:
<div style="width: 300px;"> <div style="width: 200px; float: left;"> <div style="width: 100px; float: left; background-color: #ffff00; margin-bottom: 15px;">AAA</div> <div style="width: 100px; float: right; background-color: #ff0000; margin-bottom: 15px;">BBB</div> </div> <div style="width: 100px; float: right; background-color: #00ff00; margin-bottom: 15px;">CCC</div> </div>
...a s tímto výsledkem...
Máme tu tři sloupce, teď jim pomocí atributu border přidáme ohraničení - určíme mu šířku (10px), styl (solid) a barvu (#999999), zároveň ovšem musíme upravit šířky rámcových oddílů - k šířce bloků je potřeba připočítat šířku ohraničení:
<div style="width: 360px;"> <div style="width: 240px; float: left;"> <div style="border: 10px solid #999999; width: 100px; float: left; background-color: #ffff00; margin-bottom: 15px;">AAA</div> <div style="border: 10px solid #999999; width: 100px; float: right; background-color: #ff0000; margin-bottom: 15px;">BBB</div> </div> <div style="border: 10px solid #999999; width: 100px; float: right; background-color: #00ff00; margin-bottom: 15px;">CCC</div> </div>
a zde je výsledek...
Pro zajímavost, takto by to vypadalo bez změny šířky rámcových oddílů... :-)
Jdeme dál, oddíly jsou na sebe moc nalepené, takže atributem margin přidáme vnější odstupy (atribut doplníme do všech tří bloků, hodnoty ovšem definujeme zatím pouze pro prostřední, a to hodnoty pro levou a pravou stranu bloku) a opět upravíme šířky bloků - původní šířka bloků se nám zvětšila o přidané odstupy. A když už se v tom budeme hrabat, doplníme atributem height hodnoty pro výšku bloku:
<div style="width: 370px;"> <div style="width: 250px; float: left;"> <div style="border: 10px solid #999999; margin: 0px; width: 100px; float: left; height: 150px; background-color: #ffff00; margin-bottom: 15px;">AAA</div> <div style="border: 10px solid #999999; margin: 0px 5px; width: 100px; float: right; height: 150px; background-color: #ff0000; margin-bottom: 15px;">BBB</div> </div> <div style="border: 10px solid #999999; margin: 0px; width: 100px; float: right; height: 150px; background-color: #00ff00; margin-bottom: 15px;">CCC</div> </div>
To už by docelo šlo, ne? Teď si ještě atributem padding přidáme vnitřní odstup, aby text nebyl tak nalepen na rámečku - pro všechny strany použijeme stejný odstup a opět upravíme celkové šířky, zvětšíme je o hodnotu vnitřního odstupu.
<div style="width: 430px;"> <div style="width: 290px; float: left;"> <div style="border: 10px solid #999999; margin: 0px; padding: 10px; width: 100px; float: left; height: 150px; background-color: #ffff00; margin-bottom: 15px;">AAA</div> <div style="border: 10px solid #999999; margin: 0px 5px; padding: 10px; width: 100px; float: right; height: 150px; background-color: #ff0000; margin-bottom: 15px;">BBB</div> </div> <div style="border: 10px solid #999999; margin: 0px; padding: 10px; width: 100px; float: right; height: 150px; background-color: #00ff00; margin-bottom: 15px;">CCC</div> </div>
Posledním krokem před tím, než začneme bloky plnit, bude změna barvy pozadí bloků, kde jsme používaly různé barvy jen proto, abychom měly chování jednotlivých bloků pod kontrolou a vyrovnání celé sestavy do osy stránky - použijeme fintu s obalem o šíři 100% a automatickým nastavením odstupu u následujícího bloku.
<div style="width: 100%;"> <div style="margin: auto; width: 430px;"> <div style="width: 290px; float: left;"> <div style="border: 10px solid #999999; margin: 0px; padding: 10px; width: 100px; float: left; height: 150px; background-color: #ffffff; margin-bottom: 15px;">AAA</div> <div style="border: 10px solid #999999; margin: 0px 5px; padding: 10px; width: 100px; float: right; height: 150px; background-color: #ffffff; margin-bottom: 15px;">BBB</div> </div> <div style="border: 10px solid #999999; margin: 0px; padding: 10px; width: 100px; float: right; height: 150px; background-color: #ffffff; margin-bottom: 15px;">CCC</div> </div> </div>
Kostru článku máme hotovou, pustíme se do jejího vyplnění - do bloků můžete napsat text, který lze samozřejmě běžně formátovat v editoru, vložit libovolný obrázek, stejně tak je možné do oddílu pomocí funkce loadposition vložit jakýkoliv modul. Nevíte, oč se jedná? Jde o to, že zápisem řetězce "loadposition content1" do složených závorek vložíte do článku modul, umístěný ve správci modulů do pozice "content1". V případě mého toppanelu jsou takto do článku vloženy celkem tři moduly, do každého bloku jeden a zároveň jsou do bloků vloženy i další texty a obrázky.
<div style="width: 100%;"> <div style="margin: auto; width: 430px;"> <div style="width: 290px; float: left;"> <div style="border: 10px solid #999999; margin: 0px; padding: 10px; float: left; width: 100px; height: 150px; background-color: #ffffff;"> <h6>Nadpis h6</h6> <span style="color: blue;"> <strong>Tučný modrý text</strong> </span><br /> výchozí text</div> <div style="border: 10px solid #999999; margin: 0px 5px; padding: 10px; float: right; width: 100px; height: 150px; background-color: #ffffff;"><br /> modul, zveřejněný v pozici "content1", syntaxe není samozřejmě v článku vidět :-)</div> </div> <div style="border: 10px solid #999999; margin: 0px; padding: 10px; float: right; width: 100px; height: 150px; background-color: #ffffff;"><img src="/images/yootheme/reklama.png" alt="reklama" style="float: right; margin: 0px 0px 5px 5px;" height="11" width="50" /> obrázek, umístěný vpravo, s určeným dolním a levým vnějším odstupem</div> </div> </div>
Nadpis h6
Tučný modrý textvýchozí text
modul, zveřejněný v pozici "content1", syntaxe není samozřejmě v článku vidět :-)

A to je v podstatě celé, teď už nezbývá, než si pohrát s barvami, odstupy a hodnotami šířky či výšky, abyste dostali výsledek, který bude odpovídat Vašim potřebám....
<span> - HTML tag, definující logicky vymezený úsek textu. Umožňuje přiřadit vymezenému textu údaje o stylu.
width - CSS vlastnost, určující šířku, použít lze různé hodnoty - px, em, %...
height - CSS vlastnost, určující výšku, použít lze různé hodnoty - px, em, %...
float - CSS vlastnost, určující pozici elementu v rámci plovoucího umístění.
background-color - CSS vlastnost, určující barvu pozadí.
border - CSS vlastnost, umožňující definovat všechny vlastnosti ohraničení v jediném zápisu - v našem případě tedy šířku, barvu a styl.
margin - CSS vlastnost, určující šířku vnějšího okraje elementu, použít lze různé hodnoty - px, em, % a různé způsoby zápisu - například zapsáním jediné hodnoty(5px) bude určen odstup pro všechny čtyři strany, při zapsání dvou hodnot (5px 10px) budou ureny odstupy pro dvojice stran v pořadí "horní/dolní" a "levá/pravá" při zapsání čtyř hodnot (2px 4px 6px 8px) budou definovány odstupy pro každou stranu zvlášť v pořadí "horní-pravá-dolní-levá".
padding - CSS vlastnost, určující šířku vnitřního okraje elementu, pro zápis platí stejná pravidla jako pro margin.
Komentáře (0)