Tři sloupce

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ý text
výchozí text

modul, zveřejněný v pozici "content1", syntaxe není samozřejmě v článku vidět :-)

obrázek, umístěný vpravo, s určeným dolním a levým vnějším odstupem

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