CSS Layout
Bij het maken van een layout kun je je website onderverdelen in een header, navigatie menu, inhoud en een footer. Op deze manier kun je je website overzichtelijk houden voor je bezoekers.
Header
Inhoud
Inhoud
Inhoud
Er zijn talloze verschillende website layout ontwerpen om uit te kiezen. De bovenstaande structuur is echter één van de meest voorkomende en we zullen deze in deze tutorial nader bekijken.
CSS header
Een koptekst (header) bevindt zich meestal bovenaan de website of gelijk onder een navigatiemenu. Het bevat vaak een logo of de naam van de website.
Header
Voorbeeld:
/* Stijlen van de header */
.header {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
CSS navigatie menu
Een navigatiebalk bevat een lijst met links om bezoekers te helpen bij het navigeren door je website.
Voorbeeld:
/* Stijlen van de navigatie menu */
.topnav {
overflow: hidden;
background-color: #4682B4;
}
/* Stijlen van de links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-right: 1px solid #ffffff;
}
/* Verander links van kleur bij muis over */
.topnav a:hover {
background-color: #3D76A5;
color: #f2f2f2;
}
CSS inhoud
Je kunt de inhoud van je webpagina in de middelste kolom houden en kan je de linkerkolom gebruiken voor een menu. De rechter kolom kan worden gebruikt om reclame of andere spullen in te zetten. Deze layout is vergelijkbaar met wat we hebben gebruikt op onze website codecenter.nlDe layout hangt vaak af van de gebruikers met welk soort apparaat zij je website bezoeken.
| Kolom 1 | - | (gebruikt door mobiele browsers) |
| Kolom 2 | - | (gebruikt door tablets en laptops) |
| Kolom 3 | - | (gebruikt door laptops en desktops) |
Laten we een layout gaan maken met 3-kolommen en deze wijzigen in een layout met 1-kolom op kleinere schermen of zodra de breedte van het scherm wordt aangepast door de gebruiker.
Voorbeeld:
.column {
float: left;
padding: 10px;
}
/* Linker en rechter kolom */
.column.side {
width: 25%;
}
/* Midden kolom */
.column.middle {
width: 50%;
}
/* Responsive layout - stapel de drie kolommen op elkaar */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
CSS footer
De footer is het deel van de webpagina dat onderaan staat. Een footer bevat meestal informatie dit kan zijn contactgegevens, informatie over auteursrechten enz.
