CSS- websitelay-out
Website-indeling
Een website is vaak onderverdeeld in headers, menu's, content en een footer:
Er zijn talloze verschillende lay-outontwerpen om uit te kiezen. De bovenstaande structuur is echter een van de meest voorkomende en we zullen deze in deze zelfstudie nader bekijken.
koptekst
Een koptekst bevindt zich meestal bovenaan de website (of rechts onder een navigatiemenu bovenaan). Het bevat vaak een logo of de naam van de website:
Voorbeeld
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Resultaat
Header
Navigatiebalk
Een navigatiebalk bevat een lijst met links waarmee bezoekers door uw website kunnen navigeren:
Voorbeeld
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Resultaat
Inhoud
De lay-out in deze sectie hangt vaak af van de beoogde gebruikers. De meest voorkomende lay-out is een (of een combinatie ervan) van de volgende:
- 1-kolom (vaak gebruikt voor mobiele browsers)
- 2-koloms (vaak gebruikt voor tablets en laptops)
- Lay-out met 3 kolommen (alleen gebruikt voor desktops)
1-kolom:
2-koloms:
3-kolom:
We zullen een lay-out met 3 kolommen maken en deze op kleinere schermen wijzigen in een lay-out met 1 kolom:
Voorbeeld
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
Resultaat
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Tip: Als u een lay-out met 2 kolommen wilt maken, wijzigt u de breedte in 50%. Gebruik 25%, enz. om een lay-out met 4 kolommen te maken.
Tip: Vraag je je af hoe de @media-regel werkt? Lees er meer over in ons hoofdstuk CSS Media Queries .
Tip: Een modernere manier om kolomlay-outs te maken, is door CSS Flexbox te gebruiken. Het wordt echter niet ondersteund in Internet Explorer 10 en eerdere versies. Als je IE6-10-ondersteuning nodig hebt, gebruik dan floats (zoals hierboven weergegeven).
Lees ons CSS Flexbox-hoofdstuk
voor meer informatie over de Flexible Box Layout Module .
Ongelijke kolommen
De hoofdinhoud is het grootste en belangrijkste onderdeel van uw site.
Het komt vaak voor bij ongelijke kolombreedtes, zodat de meeste ruimte wordt gereserveerd voor de hoofdinhoud. De neveninhoud (indien aanwezig) wordt vaak gebruikt als alternatieve navigatie of om informatie te specificeren die relevant is voor de hoofdinhoud. Verander de breedtes zoals je wilt, onthoud alleen dat het in totaal 100% moet zijn:
Voorbeeld
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Resultaat
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
voettekst
De footer wordt onderaan je pagina geplaatst. Het bevat vaak informatie zoals copyright en contactgegevens:
Voorbeeld
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Resultaat
Responsieve website-indeling
Door een deel van de bovenstaande CSS-code te gebruiken, hebben we een responsieve websitelay-out gemaakt, die varieert tussen twee kolommen en kolommen over de volledige breedte, afhankelijk van de schermbreedte:
Ooit gehoord van W3Schools Spaces ? Hier kunt u uw website helemaal opnieuw maken of een sjabloon gebruiken en deze gratis hosten.
Ga gratis aan de slag* geen kredietkaart nodig