Websiteontwerpen voor bedrijven en andere organisaties bevatten vaak duidelijk gedefinieerde merk- en marketingelementen. Als uw website een webpagina heeft die u gecentreerd wilt hebben, kunt u dit zelf doen met behulp van een combinatie van HTML- en CSS-code (Cascading Style Sheet). Veel ontwikkelaars gebruiken scroll-eigenschappen voor webpagina-elementen om centrerende eigenschappen te dicteren, maar dit is niet altijd betrouwbaar. Om een ​​gecentreerde website-opmaak te definiëren en een pagina die zonder schuifbalken verschijnt, zijn enkele CSS-verklaringen vereist.

1.

Maak uw HTML-pagina. Als u een pagina heeft waarmee u al werkt, opent u deze. Maak anders een nieuw bestand in een teksteditor en sla het op met de extensie ".html". Gebruik de volgende schets:

Merk op dat de pagina een sectie voor CSS-code in de kop en een element in de hoofdtekst heeft. De inhoud van de pagina moet in dit element worden geplaatst. Als u met een bestaande pagina werkt, zoekt u de CSS-code hiervoor, die kan worden opgeslagen in een afzonderlijk CSS-bestand waarnaar wordt gelinkt vanuit uw paginakop.

2.

Identificeer de paginacontainer in CSS. Als u het bevattende element wilt stijlen, moet u het eerst identificeren in CSS-code. Gebruik de volgende selector en omtrek in de stijlsectie in uw paginakop of een afzonderlijk bestand als dat is waarmee u werkt.

container {

}

Dit identificeert het element met "container" als ID-kenmerk. De stijldeclaraties voor het element verschijnen tussen de openings- en sluitingshaken. Als alternatief kunt u het element met behulp van een klasse-attribuutwaarde als volgt identificeren:

.container {

}

Dit zou het volgende element identificeren:

3.

Pas een vaste breedte toe op het element om de inhoud te centreren. Als u de elementen op uw pagina wilt centreren, moet het bevattende element een vaste breedte hebben. Voeg een toe als volgt tussen de CSS-haakjes voor het element "container":

Breedte: 800 pixels;

Verander de hoogtewaarde naargelang uw ontwerp. Nu kunt u een marge-eigenschap toepassen, waardoor het element binnen de pagina wordt gecentreerd:

margin: auto;

4.

Voorkom dat het element scrolt. Als u niet wilt dat de pagina scrolt, moet u als volgt een eigenschap height toepassen op het container-element:

Hoogte: 90%;

Verander de waarde die bij uw ontwerp past. Als de elementen in de container meer ruimte innemen en u wilt voorkomen dat er wordt geschoven, dan moet u de overloop van het element als volgt verbergen:

overloop verborgen;

Hiermee stopt de schuifbalk, zelfs als uw pagina-inhoud meer in beslag neemt dan de toegewezen hoogte binnen de browser van de gebruiker.

5.

Sla uw pagina op en bekijk deze. Open het in een browser of upload het naar uw site om het resultaat te bekijken. Mogelijk moet u aanpassingen aanbrengen om te komen tot het gewenste ontwerp. Zorg ervoor dat je de pagina test zodra je de voltooide inhoud erin hebt, aangezien het uiterlijk aanzienlijk kan verschillen.

Tip

• Verschillende webbrowsers implementeren CSS-regels op verschillende manieren, dus zorg ervoor dat u uw pagina's in meer dan één test.

Waarschuwing

• Als u de overloop van een webpagina-element verbergt, kan het zijn dat sommige van uw gebruikers niet alle pagina-inhoud te zien krijgen.