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:

AAA
BBB

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:

AAA
BBB

CCC

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

AAA
BBB

CCC

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:

AAA
BBB

CCC

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.

AAA
BBB

CCC

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.

AAA
BBB

CCC

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.

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

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