Tento článok vysvetľuje, ako vytvoriť rozloženie v 3 stĺpcoch v CSS. Pokyny platia pre CSS3 a staršie.

Nakreslite svoje rozloženie

Svoje rozloženie môžete nakresliť na papier alebo do a grafický program. Ak už máte na mysli drôtený rám alebo ešte rozsiahlejší dizajn, zjednodušte ho na základné škatule, ktoré tvoria web. Tento dizajn, ktorý je priložený k tomuto článku, má v hlavnej oblasti obsahu tri stĺpce, ako aj hlavičku a pätu. Ak sa pozriete pozorne, uvidíte, že tri stĺpce nie sú rovnaké v šírke.

Po vytiahnutí rozloženia môžete začať uvažovať o rozmeroch. Tento príklad návrhu bude mať nasledujúce základné rozmery:

• Nie viac ako 900 pixelov široké
• Odkvap 20 px vľavo
• 10 px medzi stĺpcami a riadkami
• Stĺpce so šírkou 250px, 300px a 300px
• Horný rad je vysoký 150 pixelov
• Spodný riadok je vysoký 100 pixelov

Napíšte základné HTML / CSS a vytvorte prvok kontajnera

Pretože táto stránka bude platná HTML dokument, začnite prázdnym kontajnerom HTML.

Pridajte do CSS základné štýly vynulujte okraje, orámovanie a odsadenie stránky. Zatiaľ čo existujú aj iné štandardné štýly CSS pre nové dokumenty sú tieto štýly minimom, ktoré potrebujete na získanie čistého rozloženia. Pridajte ich do záhlavia dokumentu.

Ak chcete začať stavať rozloženie, vložte prvok kontajnera. Niekedy sa stane, že sa kontajneru môžete neskôr zbaviť, ale pre väčšinu rozložení s pevnou šírkou má prvok kontajnera ľahšiu správu na rôznych webových stránkach prehľadávače.

Upravte štýl kontajnera

Kontajner definuje, aký široký bude obsah webovej stránky, ako aj akékoľvek okraje okolo vonkajšej strany a výplň vo vnútri. V prípade tohto dokumentu je kontajner široký 870 pixelov a vľavo má odkvap 20 pixelov. Odkvap je nastavený štýlom okraja, ale polstrovanie na kontajneri je vynulované, aby sa zabránilo tomu, aby všetky prvky boli také široké ako kontajner.

Ak dokument teraz uložíte, bude ťažké kontajner vidieť, pretože v ňom nie je nič. Ak pridáte zástupný text, budete môcť prvok kontajnera vidieť zreteľnejšie.

Pre hlavičku použite značku nadpisu

To, ako sa rozhodnete pre štýl hlavičkového riadku, veľa závisí od toho, čo v ňom je. Ak riadok hlavičky bude mať iba logo a nadpis loga, potom pomocou značky nadpisu (

) má väčší zmysel ako použitie a

. Nadpis môžete upraviť rovnakým spôsobom ako v prípade divu a vyhnete sa zbytočným značkám.

HTML pre riadok hlavičky sa nachádza v hornej časti kontajnera a vyzerá takto:

Potom, aby ste na ňom nastavili štýly, bol do dolnej časti pridaný červený okraj, aby ste videli, kde to končí, okraje a polstrovanie boli vynulované, šírka nastavená na 100% a výška na 150 pixelov.

Nezabudnite tento prvok vznášať plavákom: left; nehnuteľnosť. Kľúčom k písaniu rozložení CSS je plaviť všetko, dokonca aj veci, ktoré majú rovnakú šírku ako kontajner. Takto budete vždy vedieť, kde budú na stránke ležať prvky.

A Selektor potomkov CSS použité štýly iba na prvky H1, ktoré sú vo vnútri prvku #container.

Ak chcete získať tri stĺpce, začnite budovaním dvoch stĺpcov

Keď vytvárate rozloženie s tromi stĺpcami pomocou CSS, musíte rozloženie rozdeliť do dvoch skupín. Takže pre toto rozloženie s tromi stĺpcami je stredný a pravý stĺpec zoskupený a umiestnený vedľa ľavého stĺpca v rozložení s dvoma stĺpcami. kde ľavý stĺpec je široký 250 pixelov a pravý stĺpec je široký 610 pixelov (každý 300 pre dva stĺpce plus 10px pre odkvap medzi ich).

Stĺpec vľavo je plávaný vľavo, zatiaľ čo druhý je plávaný vpravo. Pretože celková šírka oboch stĺpcov je 860px, je medzi nimi 10px žľab.

Pridajte dva stĺpce do širokého druhého stĺpca

Ak chcete vytvoriť tri stĺpce, pridajte do širšieho druhého stĺpca dva divy, rovnako ako ste v poslednom kroku pridali 2 divy do stĺpca kontajnera.

Pretože tieto dva boxy so šírkou 300px sú vo vnútri boxu so šírkou 610px, bude medzi nimi opäť žľab s veľkosťou 10px.

Pridajte do päty

Teraz, keď je zvyšok stránky v štýle, môžete pridať do päty. Použite posledný div s ID päty a pridajte obsah tak, aby ste ho videli. Hore môžete tiež pridať orámovanie, aby ste vedeli, kde to začína.

Pridajte svoje osobné štýly a obsah

Teraz, keď máte rozloženie hotové, môžete začať pridávať svoje osobné štýly a obsah. Pamätajte, že okraje v záhlaví a päte boli pridané, aby sa zobrazili časti rozloženia, nie konkrétne pre návrh.