0 Kč s DPH

Zrušení postranního sloupce a roztažení obsahu

V případě, že postranní sloupec nijak nevyužíváte, vás určitě napadlo, zda není možné obsahovou část roztáhnout na plnou šířku stránky. inPage takové změny umožňuje a to právě úpravou vlastního CSS stylu. Je třeba se napřed podívat na strukturu HTML kódu a následně na zápis jednotlivých bloků v CSS. Dalším krokem je již zápis vlastního CSS stylu, který doplní případně upraví již použitá pravidla.

Jak na to?

Řešení je poměrně jednoduché a ukážeme si ho v praxi u šablony ATLAS. Nejprve je nutné se přihlásit do administrace vašeho webu a následně v menu zvolit Vzhled -> Vlastní CSS styl.

V obsahové části administrace zaškrkněte volbu Nastavit aktivní a do textového pole vepište následující CSS pravidla:

Šablona ATLAS

#lcolumn { display: none; }
#rcolumn { float: none; width: 100%; }
#content { width: 750px; padding: 15px; }

Šablona MEDIA - horizontální menu

#lcolumn { display: none; }
#rcolumn { float: none; width: 100%; }
#content { width: 790px; padding: 15px; }

Šablona VEGA

#rcolumn { display: none; }
#lcolumn { float: none; width: 100%; }
#content { width: 810px; padding: 15px; }

Šablona ZETA

#rcolumn { display: none; }
#lcolumn { float: none; width: 100%; }

Šablona ELECTRA

#rcolumn { display: none; }
#lcolumn { float: none; width: 100%; }

Šablona NAVI

#content {width: 770px; float: none;}
#sidebar {display:none;}

Šablona SIRIUS

#main-column {float: none; width: 945px;}
#side-column {display:none;}

Šablona ERIS

#content-wrap {width: 100%; float: none;}
#lcolumn {display:none;}
#content {width:97%; padding0 1% 20px 1%; float: none;}
#rcolumn {display:none;}

Zápisem #lcolumn { display: none; } skryjete celý postranní sloupec, to ale nestačí, je potřeba obsahovou část roztáhnout. K tomu slouží další dva zápisy, v prvním #rcolumn { float: none; width: 100%; } rušíte původní pravidlo o obtékání bloku a šířku z absolutně nadefinovaných px měníte na relativní hodnotu 100%. V posledním zápise #content { width: 750px; padding: 15px; } definujete již vlastní obsahovou část, protože používáme padding, aby byl text lehce odlepen od stran, je vhodné šířku definovat právě v absolutních jednotkách, tj. pixelech.

A výsledek?

Úpravou se nám roztáhla obsahová část po celé šíři stránky, jak můžete vidět na obrázku níže:


Obr. Šablona ATLAS před a po úpravě.

Přidat komentář

Přehled komentářů

  • Re: Zrušenie postranného stľpca a roztiahnutie obsahu.

    27. 10. 2011 12:23:46 | Vojtěch Štursa

    Elektra - skryje pravý sloupec, roztáhne levý.
    #lcolumn { width: 960px; }
    #rcolumn { display: none; }

    Odpovědět

  • Zrušenie postranného stľpca a roztiahnutie obsahu.

    26. 10. 2011 22:49:07 | Dušan

    Zdravím Vás, chcem Vás požiadať o CCS pravidlo pre rozšírenie obsahovej časti na plnú šírku stránky pre šablónu ELECTRA.

    Odpovědět

  • RE: vlozeni obrazku pod kontakty

    17. 1. 2011 16:12:02 | Hana Medková

    Dobrý den pane Honzo, v první řadě si můžete zkusit vytvořit stránku s vlastním obsahem, do které např. vložíte QR kód. Následně přes sekci Nastavení -> Prvky stránek -> zvolíte tuto stránku jako tzv. Vlastní box. Váš QR kód se následně zobrazí v postranním boxu. Může se stát, že nebude umístěn pod kontaktem jak požadujete, protazím v inPage není možné jednoduše přehazovat prvky (boxy) v postranním menu, ale i toto se dá s trochou šikovnosti obejít. Budete-li chtít poradit jak na to, kontaktujte nás prosím emailem na admin@zoner.cz. Pokud na Vás uvedete telefonní kontakt, budeme Vás přímo kontaktovat.

    Odpovědět

  • vlozeni obrazku pod kontakty

    16. 1. 2011 18:16:14 | Honza

    Nechci postranni sloupec odstranit, ale chtel bzch ho doplnit o dalsi polozky. Chtel bych pod kontakty vlozit svuj obrazek s qr kodem. Prosim muzete poradit jak na to?

    Odpovědět

  • RE: problém

    12. 8. 2010 16:43:31 | admin

    pro šablonu č. 4 je nutné použít jinou definici. Použijte definici, kterou jsem nyní doplnila do návodu, u šablon č. 2-5 lze obsah roztáhnout, u šablon č. 1 a 6 je proces složitější, proto jej zde neuvádíme.

    Váš admin

    Odpovědět

  • problém

    29. 7. 2010 7:42:14 | Šilháčková

    www.fotosilhackova.cz
    Vaší radu jsem zkusila použít u čablony číslo 4 a z prostředního sloupce se ztratil všechne text i zobrazení fotek z galeriií. Vzhledem k tomu, že pravý sloupec nebudu používat, docela by mi pomohlo se ho zbavit. Děkuji

    Odpovědět

  • tady se neodepisuje

    29. 4. 2010 15:10:24 | franta

    taky bych potreboval postrani panel ostřelit do pryč u šablony č.6. Je to ppořád dost rozházený

    Odpovědět

  • Zrušení postranního sloupce (

    8. 1. 2010 11:38:26 |

    Pěkný den, také potřebuji zrušit postranní sloupec u šablony č. 6. Poradíte?

    Odpovědět

  • Zrušení postranního sloupce

    21. 11. 2009 7:01:32 | Ludvík Nešpor

    Dobrý den,
    jak se dá zrušit postranní sloupec u šablony č. 6.
    Výše uvedený postup u této šblony nefunguje správně.
    Děkuji za odpověď

    Odpovědět