Praksa na maketih z HTML in CSS

Vadimo se v ustvarjanju maketov in jih polnimo z vsebino. Na primer, naredimo takšen maket:

Začnimo z osnovno strukturo maketa:

<div class="wrapper">
	<header>
		...
	</header>
	<div class="container">
		<aside class="left">
			levo
		</aside>
		<main>
			...
		</main>
		<aside class="right">
			desno
		</aside>
	</div>
	<footer>
		site.com
	</footer>
</div>

Zdaj pa poglejmo glavo. Kot je vidno na vzorcu, bo v glavi ime spletnega mesta in meni. Pri tem so ti bloki na enaki razdalji od levega roba. V tem primeru je logično, da jih združimo s skupnim staršem, tako da premikamo te bloke kot eno celoto:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename"></div>
			<nav></nav>
		</div>
	</header>
</div>

Dodajmo vsebino blokov glave:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">domov</a>
				<a href="#" class="active">blog</a>
				<a href="#">fotografije</a>
				<a href="#">o nas</a>
				<a href="#">kontakti</a>
			</nav>
		</div>
	</header>
</div>

Zdaj pa napišimo sloge blokov glave. Pri tem ne določajmo višine glave - naj se razteza s svojo vsebino:

header {
	border: 1px solid black;
}
.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}

Napišimo kodo, ki ustvari tri stolpce v vsebniku. Pri tem ne določajmo višine vsebine - naj se oblikuje z njeno vsebino:

.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}

Zdaj pa napišimo preostale sloge našega maketa in dobimo rešitev naše naloge:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">domov</a>
				<a href="#" class="active">blog</a>
				<a href="#">fotografije</a>
				<a href="#">o nas</a>
				<a href="#">kontakti</a>
			</nav>
		</div>
	</header>
	<div class="container">
		<aside class="left">
			levo
		</aside>
		<main>
			<h1>Naš blog</h1>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
		</main>
		<aside class="right">
			desno
		</aside>
	</div>
	<footer>
		site.com
	</footer>
</div>

* {
	box-sizing: border-box;
}

.wrapper {
	width: 1100px;
	margin: 30px auto;
	border: 1px solid black;
}
header {
	border: 1px solid black;
}
.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}
footer {
	padding: 30px 0;
	border: 1px solid black;
	text-align: center;
}

.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}
nav a {
	padding: 10px;
	color: blue;
	text-decoration: none;
	font: 15px Arial;
}
nav a:hover, nav a.active {
	color: red;
	text-decoration: underline;
}
main h1 {
	font: 20px "Times New Roman";
}
main p {
	margin: 10px 0;
	text-align: justify;
	font: 15px Arial;
}

Praktične naloge

Po naslednji povezavi 1.zip prenesite maket. Odprite ga v brskalniku in ponovite stran po tem vzorcu.

Po naslednji povezavi 2.zip prenesite maket. Odprite ga v brskalniku in ponovite stran po tem vzorcu.