Reklama

reklama

Dvojstĺpcový layout s pätou vždy dole

Niekedy z rôznych dôvodov (obsahu je príliš málo, a nevyzerá to dobre) obyčajný dvojstĺpcový layout nestačí. Je preto na mieste zabezpečiť, aby minimálna výška obsahovej časti bola vždy aspoň 100 percent veľká. Ako na to, si ukážeme a popíšeme v nasledujúcom príklade:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Meno našej stránky</title>
	</head>
	<body>
		<div id="obal">
			<div id="stlpec">
				<p>iné informácie</p>
			</div>
			<div id="obsah">
				<h1>Webová stránka</h1>
				<p>Obsah webovej stránky</p>
			</div>
			<div class="clear"></div>
			<div id="pata">
				<p>&copy; naše meno</p>
			</div>
		</div>
	</body>
</html>
					

CSS bude vyzerať takto:

html, body {
    height: 100%;    /*zapezpečí, že dokument bude vždy vysoký na celú výšku monitora*/
}
body {
    margin: 0; /*vynuluje predvolený vonkajší okraj 8px*/
}
#obal {
    width: 960px;    /*určí šírku obaľovacieho prvku*/
    margin: 0 auto;    /*vycentruje*/
    min-height: 100%;    /*ak by ste použili height, obsah by pri stránke vyššej ako 100% vytiekol*/
    padding-bottom: 8em;    /*vytvorí miesto pre pätu*/
    position: relative;    /*zapezbečí možnosť poziciovať pätu vzhľadom na obaľovací prvok,
 namiesto <body>*/
    background-color: #CCC;    /*slúži na viditeľnosť pri kontrole správnosti*/
}
#stlpec {
    float: right;    /*vlastnsoť float dovolí prvkom byť zoabrazené vedľa seba*/
    width: 240px;    /* určenie rozmerov*/
    min-height: 700px;    /*min-height kvôli neprečeteniu obsahu pri jeho väčšom množstve;
 hodnota musí byť v pixeloch*/
    padding: 5px;
    background-color: rebeccapurple;    /*opäť kvôli viditaľnosti*/
}
#obsah {
    padding: 10px;
    margin-right: 250px;    /*vytvorí miesto pre stĺpec; v prípade,
 že by bol zobrazený naľavo, použijeme vlastnsoť margin-left*/
}
.clear {
    clear: both;
}
#pata {
    width: 100%;    /*nastaví päte rozmery, ktoré deaktivovalo použitie absolútneho poziciovania*/
    position: absolute;    
    left: 0;
    bottom: 0;    /*zariadime, aby bola päta vždy dole vzhľadom na obaľovací prvok
 (ktorý je vždy vysoký aspoň 100%) a nastavíme umiestnenie zľava a zdola*/
    text-align: center;
    border-top: 1px dotted #000;    /*viditeľnosť*/
}
					

Živá ukážka

Princípom jednostĺpcového layoutu je nastaviť obalu minimálnu výšku (min-height) 100% a pätu absolútne napoziciovať (position: absolute;) na dno stránky. Ak obalu neudáme vlastnosť position: relative päta sa bude poziciovať, ale vzhľadom na prvok <body>, nie obal.

Pri dvojstĺpcovom layoute ide o rovnaký princíp, ale obsahovú časť musíme rozdeliť. Požadovaný efekt by sa nám podarilo dosiahnuť, aj v prípade, že by sme nechali obtekať (pomocou float) obidva stĺpce... Nebolo by však možné vytvoriť aspoň sčasti responzívny dizajn (ak nie je float, môžeme použiť min-width a max-width).