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

27. 11. 2013

Postranní sloupec je boční část internetové stránky, do které můžete umístit vlastní obsah nebo např. top produkty z e-shopu. Pokud postranní sloupec nijak nevyužíváte, je v systému inPage možné obsahovou část roztáhnout na plnou šířku stránky. 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.

Základní pravidla a princip

Nejprve je třeba vyhledat příslušné HTML prvky, které tvoří levý a pravý postranní panel (sloupec chcete-li) a obsah stránky. V šabloně ERIS to jsou čtyři prvky div, které mají id #lcolumn (levý sloupec), #rcolumn (pravý sloupec), #content (hlavní sloupec), #content-wrap (obal hlavního sloupce).

Takto vypadá schématicky znázorněná struktura šablony ERIS:

Jak vypadá výchozí CSS zápis?

#lcolumn {
  padding: 0 1% 20px;
  width: 21%;
}
#content-wrap {
  width: 77%;
}
#content {
  padding: 0 2% 20px;
  width: 70%;
}
#rcolumn {
  padding: 0 1% 20px;
  width: 23%;
}

Toto jsou důležité výchozí hodnoty šablony ERIS, které jsou nastaveny dokud je nepřepíšete v editoru vlastního CSS stylu. Pokud nevíte co znamenají, doporučujeme si přečíst nejprve článek s CSS základy.

Zrušení levého panelu a roztažení hlavního obsahu

Pro dosažení tohoto cíle je třeba přidat do vlastního stylu zápis, který vypne levý postranní pannel (display: none;) a obsah hlavního sloupce roztáhne na šířku celé stránky. Přidejte tedy do editoru vlastního stylu tento zápis:

#lcolumn {
  display: none;
}
#content-wrap {
  width: 100%; /*výchozí hodnota 77%*/
}
#content {
  border-left: 0; /*vypne levé ohraničení*/
}

Tuto úpravu využijete zejména pokud používáte e-shop. Potom mohou vaše stránky vypadat například takto:

Zrušení pravého panelu a roztažení hlavního obsahu

Obdobně jako levý postranní panel je možné vypnout panel pravý (display: none;). Následně je třeba obal obsahu roztáhnout na zbytek stránky a vnitřní obsah roztáhnout na na šířku celé stránky. Přidejte tedy do editoru vlastního stylu tento zápis:

#rcolumn {
  display: none;
}
#content-wrap {
  width: 77%; /*21% je šířka levého sloupce + 1% padding zprava i zleva, celkem tedy 100 - 23 = 77%, obsah by nám jinak přetékal*/
}
#content {
  width: 100%;
  border-right: 0; /*vypne pravé ohraničení*/
}

Tato úprava je vhodná zejména pokud nevyužíváte e-shop, vaše stránky pak mohou vypadat třeba takto:

Slovo závěrem

Obdobným způsobem můžete změnit šířky jednotlivých elementů, celkový součet včetně paddingu (vnitřního odsazení) musí vždy dát 100 %. Nebojte se tedy experimentovat a upravte si šablonu dle vašich potřeb. Další návody najdete v rubrice úprav šablony ERIS nebo si vyberte ze souvisejících článků.