J0hn R.

Zopakování z minulého dílu (http://j0hn.hys.cz/zaciname-s-tvorbou-webovych-stranek-2-zaklady-css-trisloupcovy-layout):

• Nebudu zde podrobně rozepisovat co která značka, znak či výraz v html nebo css kódu znamená. Hlavním důvodem je, že html ani css neumím! Takže pokud se v textu vyskytne nějaký „odborný“ výraz například identifikátor napíšu ho takto kurzívou a Vy můžete postupovat jako já, tj. do vyhledávače zadejte daný výraz a doplňte ho o slova html a css.
• Mnou „poslepovaný“ kód jsem opatřil podrobnými poznámkami, které ve výsledné stránce nejsou vidět a slouží jen k zorientování se v kódu. Poznámky v css kódu jsou umisťovány mezi /* na začátku a */ na konci poznámky. V html kódu jede o znaky <!– na začátku a –> na konci.
• Znám vzhled jakého chci dosáhnout (Vzhled o pevně dané šířce obsahující hlavičku, 3 sloupce a patičku.).
• Mám připravenu strukturu html dokumentu.
• Mám v css nastavený třísloupcový layout, ale potřebuji zarovnat délku všech tří sloupců

Zarovnání délky všech tří sloupců se ukázalo jako ještě těžší oříšek než samotný třísloupcový layout. Dá se říci, že poctivé řešení neexistuje. Nicméně existuje řada „špinavých“ triků, pomocí kterých dosáhneme požadovaného výsledku. Tím trikem je, že založíme třídu „sloupec“ a to způsobem, aby platila jen pokud je součástí identifikátoru „obal“ (zatím by mohla být založena jen tak volně, ale v budoucnu se to může hodit). Tuto třídu nadefinujeme tak, aby nám vyplnila prostor pod textem a to tak moc abychom ji nikdy při psaní textu nepřesáhly. Já dávám 1000 řádků. Samozřejmě, že nechceme všechny tyto prázdné řádky vidět, takže identifikátoru „obal“ přidáme vlastnost overflow: hidden, která prázdné řádky skryje.

#obal .sloupec {
	padding-bottom: 1001em;     /* Spodní výplň (mezi obsahem a okrajem) prvku - nastavíme X + padding-bottom */
	margin-bottom: -1000em;     /* Nastavuje velikost okraje dole v počtu řádků - nastavíme X (tolik aby jsme to délkou textu v některém ze sloupců někdy nepřesáhly).*/
	}
#obal {
	overflow: hidden; /*Skryje přebytečné prázdné řádky, které jsme přidali přechozím trikem. */
	}

V těle dokumentu musíme u „prostredni“, „levy“ a „pravy“ doplnit třídu sloupec kterou jsme si nadefinovali

id="prostredni" class="sloupec"

id="levy" class="sloupec"

id="pravy" class="sloupec"

Po přidání do dokumentu co jsme vytvořili minule dostaneme takovýto výsledek: http://j0hn.hys.cz/wp-content/uploads/tutorial-web-3.htm.
Jak je vidět sloupce se nám roztáhly přes patičku a ta teď není vidět.

Jak upravit patičku, aby byla vždy na konci stránky
To provedeme tím, že patičce určíme absolutní pozici a to natvrdo na spodní okraj okna, bohužel pokud je text delší než se zobrazí v okně, patička se nehne a zůstane tam viset, takže to pořešíme vložením patičky do dalšího obalu – „obal-paticka“. Tomu, ale nastavíme relativní pozici, takže se drží spodního okraje okna i když scrollujme níže

#paticka {
	bottom: 0; /*Nastaví nulovou vzdálenost od spodního okraje - aby jsme neviděli, že nám za ní stále pokračují ty prodloužené 3 sloupce */
	position: absolute; /*Vloží patičku natvrdo na spodní okraj okna, bohužel pokud je text delší než se zobrazí v okně, patička se nehne a zůstane tam viset, takže to pořešíme vložením patičky do dalšího obalu */
	}
 
#obal-paticka {
	position: relative; /*Obal patičky tentokrát ale v relativní pozici, takže se drží spodního okraje okna i když scrollujme níže */
	min-height: 100px /*Mimimální výška - dáme stjnou jako výšku patičky */

V těle dokumentu už jenom doplníme přidaný identifikátor a to tak, aby „paticka“ kterou jsme již měli vytvořenou byla jeho součástí.

	<div id="obal-paticka"> <!-- Začátek obalu patičky -->
		<div id="paticka"> <!-- Začátek patičky -->
			Nějaký text
		</div> <!-- Konec patičky -->
	</div>  <!-- Konec obalu patičky -->

Po přidání do předchozího dokumentu dostaneme kýžený výsledek: http://j0hn.hys.cz/wp-content/uploads/tutorial-web-3.1.htm.

Pozor: poskytovatel webhostingu na kterém provozuji tento web si automaticky na konec dokumentu přidá reklamu, tu si samozřejmě do Vašeho dokumentu nedávejte

<!-- Konec obaloveho divu -->
sem je přidaná reklama kterou si odmyslete (smažte)
<!-- Konec těla stránky -->