CSS Website Layout

Website layout

Websites are usually divided into header, menu, content, and footer:

There are many different layout designs to choose from. However, the structure above is one of the most common structures, and we will study it in detail in this tutorial.

Header

The header (header) is usually located at the top of the website (or just below the top navigation menu). It usually contains a logo or the name of the website:

Voorbeeld

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Resultaat:

Header

Probeer het zelf

Navigation bar

The navigation bar contains a list of links to help visitors browse your website:

Voorbeeld

/* Navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar link */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Link - changes color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Resultaat:

Probeer het zelf

Content

Which layout to use usually depends on your target users. The most common layouts are one of the following (or combine them together):

  • 1-kolommenLay-out (meestal gebruikt voor mobiele browsers)
  • 2-kolommenLay-out (meestal gebruikt voor tablets en laptops)
  • 3-kolommenLay-out (alleen voor desktops)

1-kolommen:

2-kolommen:

3-kolommen:

We zullen een 3-kolomlay-out maken en deze op kleinere schermen wijzigen naar een 1-kolomlay-out:

Voorbeeld

/* Maak drie gelijke kolommen die naast elkaar drijven */
.column {
  float: left;
  width: 33.33%;
}
/* Wis de float achter de kolommen */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsieve lay-out - maak drie kolommen stapelen in plaats van naast elkaar op kleinere schermen (breedte van 600 pixels of kleiner) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Resultaat:

Volledige website technologie referentiemanual

Onze referentiemanuals dekken alle aspecten van website technologieën.

Dit omvat W3C-standaarden technologieën zoals HTML, CSS, XML. En andere technologieën zoals JavaScript, PHP, SQL enz.

Online voorbeeldtesttool

Bij CodeW3C.com bieden we duizenden voorbeelden.

Door gebruik te maken van onze online editor, kunt u deze voorbeelden bewerken en experimenten uitvoeren met de code.

Snelle en begrijpelijke leerstijl

Een minuut tijd is waardevoller dan goud, dus bieden we u korte en begrijpelijke leerinhoud.

Hier kunt u op een begrijpelijke en handige manier de kennis verkrijgen die u nodig heeft.

Probeer het zelf

Tip:Voor het maken van een 2-kolomlay-out, wijzig de breedte in 50%. Voor een 4-kolomlay-out, gebruik 25%.

Tip:Wilt u weten hoe @media-regels werken? Lees onze CSS Media Queries Leer meer over relevante kennis in dit hoofdstuk.

Tip:Een modernere manier om een kolomlay-out te maken is door CSS Flexbox te gebruiken. Maar Internet Explorer 10 en oudere versies ondersteunen het niet. Als u IE6-10 ondersteuning nodig heeft, gebruik dan float (zoals hierboven getoond).

Voor meer informatie over het Flexbox lay-outmodule, lees onze CSS Flexbox Handleiding.

Ongelijke kolommen

Hoofdinhoud (main content) is het grootste en belangrijkste deel van uw website.

Het is heel gebruikelijk dat de breedte van de kolommen niet gelijk is, omdat de meeste ruimte voor de hoofdinhoud is gereserveerd. Bijlagen (indien aanwezig) worden meestal gebruikt als alternatieve navigatie of om specifieke informatie in verband te brengen met de hoofdinhoud. U kunt de breedte wijzigen, maar onthoud dat de som 100% moet zijn:

Voorbeeld

.column {
  float: left;
}
/* Linker en rechter kolommen */
.column.side {
  width: 25%;
}
/* Midden kolom */
.column.middle {
  width: 50%;
}
/* Responsieve lay-out - maak drie kolommen stapelen in plaats van naast elkaar */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Resultaat:

Volledige website technologie referentiemanual

Onze referentiemanuals dekken alle aspecten van website technologieën.

Dit omvat W3C-standaarden technologieën zoals HTML, CSS, XML. En andere technologieën zoals JavaScript, PHP, SQL enz.

Online voorbeeldtesttool

Bij CodeW3C.com bieden we duizenden voorbeelden.

Door gebruik te maken van onze online editor, kunt u deze voorbeelden bewerken en experimenten uitvoeren met de code.

Snelle en begrijpelijke leerstijl

Een minuut tijd is waardevoller dan goud, dus bieden we u korte en begrijpelijke leerinhoud.

Hier kunt u op een begrijpelijke en handige manier de kennis verkrijgen die u nodig heeft.

Probeer het zelf

Voettekst

De voettekst bevindt zich aan de onderkant van de pagina. Het bevat meestal informatie zoals copyright en contactgegevens:

Voorbeeld

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Resultaat:

Voettekst

Probeer het zelf

Responsive Website Indeling

Door gebruik te maken van bovenstaande CSS-code, hebben we een responsive website-indeling gecreëerd die overgaat van twee kolommen naar een volledige breedte kolom op basis van het schermbreedte:

Probeer het zelf