Jednoduché jednosloupcové layouty webových stránek v CSS

V této lekci si budeme procvičovat vytváření jednoduchých jednosloupcových layoutů webových stránek. Pojďme například vytvořit takovýto layout:

Pojďme k realizaci. Každý layout obvykle začíná obecným divem s názvem wrapper, který obsahuje celý zbytek webu:

<div id="wrapper">
	
</div>

V našem případě bude wrapper zarovnán na střed obrazovky:

#wrapper {
	width: 800px;
	margin: 50px auto;
}

Bude mít také ohraničení:

#wrapper {
	width: 800px;
	margin: 50px auto;
	border: 1px solid black;
}

Nyní vytvořme hlavní strukturu stránky. Bude se skládat z menu a hlavního obsahu - contentu:

<div id="wrapper">
	<div id="menu">
		
	</div>
	<div id="content">
		
	</div>
</div>

Přidejme obsah našich bloků:

<div id="wrapper">
	<div id="menu">
		<a href="#">link text 1</a>
		<a href="#" class="active">link text 2</a>
		<a href="#">link text 3</a>
		<a href="#">link text 4</a>
		<a href="#">link text 5</a>
	</div>
	<div id="content">
		<h1>Proin tristique lorem</h1>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

Nyní můžeme přidat styl našim blokům. Pojďme přidat styl menu:

#menu {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	background-color: #484848;
}
#menu a {
	margin: 0 5px;
	padding: 15px 25px;
	text-decoration: none;
	color: #fff;
	font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
	color: #484848;
	background-color: #fff;
}

A nyní přidejme styly prvkům obsahu:

#content {
	padding: 0 30px 20px;
}
#content h1 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 10px;
}
#content p {
	padding: 0 10px;
	margin-bottom: 5px;
	font: 18px/1.3 Arial;
	text-align: justify;
}

Nyní můžeme spojit celý kód dohromady:

<div id="wrapper">
	<div id="menu">
		<a href="#">link text 1</a>
		<a href="#" class="active">link text 2</a>
		<a href="#">link text 3</a>
		<a href="#">link text 4</a>
		<a href="#">link text 5</a>
	</div>
	<div id="content">
		<h1>Proin tristique lorem</h1>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

#wrapper {
	width: 800px;
	margin: 50px auto;
	border: 1px solid black;
}

#menu {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	background-color: #484848;
}
#menu a {
	margin: 0 5px;
	padding: 15px 25px;
	text-decoration: none;
	color: #fff;
	font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
	color: #484848;
	background-color: #fff;
}

#content {
	padding: 0 30px 20px;
}
#content h1 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 10px;
}
#content p {
	padding: 0 10px;
	margin-bottom: 5px;
	font: 18px/1.3 Arial;
	text-align: justify;
}

Rada 1

Nejpohodlnější je zadávat odsazení shora dolů. Například máme menu a obsah, a mezi nimi - prázdný prostor. Je zřejmé, že tento prostor může být vytvořen spodním odsazením menu, horním odsazením obsahu, nebo jejich současným působením. V tomto případě je lepší nastavit spodní odsazení menu, a obsahu odebrat výchozí padding a margin pro h1.

Rada 2

Potomci by neměli vytvářet odsazení mezi rodiči. Například máme menu. Spodní odsazení tohoto menu může být vytvořeno buď margin divu s menu, nebo margin odkazů. Je lepší zvolit první variantu, protože odkazy by neměly působit přes hlavu rodiče.

Rada 3

Nechť mezi dvěma prvky je odsazení a v tomto případě vizuálně není rozdíl, co zvolit pro odsazení - margin nebo padding. V tomto případě zvolte margin, protože právě ten by měl vytvářet odsazení mezi prvky.

Jednoduché jednosloupcové layouty webových stránek v CSS

Rada 1

Rada 2

Rada 3

Praktické úkoly