nl.internet.www.ontwerp

[home] [nieuws] [download] [contact] [colofon]

Praktijk: marges instellen

Vind je dat andere marges dan de standaardmarges essentieel zijn voor je layout? Een nette manier om marges van je document of delen ervan in te stellen is het gebruiken van stylesheets. Een andere en veelgebruikte oplossing is het 'creatief' gebruik van tabellen. Beide manieren zullen hier worden uitgelegd. In de laatste twee paragrafen worden marges in frames toegelicht.

Stylesheets

Met stylesheets zijn marges in te stellen door de margin eigenschap te gebruiken. Deze eigenschap wordt ondersteund door o.a. Internet Explorer 3 en later, Navigator 4 en later en Opera 3.5 en later. Ook de NIWO FAQ maakt gebruik van stylesheets.

Voorbeeld:

<style type="text/css">
<!--
body { margin-left: 20px; margin-right: 30px;
       margin-top: 40px; margin-bottom: 50px; }
-->
</style>

Door deze code op te nemen tussen <head> en </head> worden de linker, rechter, boven en ondermarge van je complete document ingesteld op respectievelijk 20, 30, 40 en 50 pixels.

LET OP! Netscape Navigator 4 telt ten onrechte de in stylesheets opgegeven marge voor het document op bij de standaardmarge. Eventueel is dit op te lossen door marginheight="0" marginwidth="0" op te nemen in <body>, zodat Navigator bij 0 begint met tellen.

Voorbeeld: <body marginheight="0" marginwidth="0">

Een kleiner stuk tekst, bijvoorbeeld een paragraaf, kun je zo laten inspringen:

Voorbeeld:

<style type="text/css">
<!--
.inspringen { margin-left: 20%; }
-->
</style>

De code van dit voorbeeld moet worden toegevoegd tussen <head> en </head>. Om nu een bepaalde paragraaf in te laten springen voeg je class="inspringen" toe:

<p class="inspringen">Deze tekst springt in.</p>

Met CSS is veel meer mogelijk. Een uitgebreide uitleg over marges en CSS is te vinden in de HTML Handleiding van Hans de Jong.

Tabellen

Hoewel je in tabellen misschien getalletjes zou verwachten, worden ze op internet vooral gebruikt om een paginaindeling te maken. Tekst en afbeeldingen worden dan in cellen van een tabel gezet. Een voordeel van het gebruik van tabellen in plaats van stylesheets is dat ze door de steeds minder gebruikte oudere browsers worden ondersteund. En soms is een bepaalde opmaak alleen te realiseren in tabellen, bijvoorbeeld vanwege een onvolledige ondersteuning van stylesheets in bepaalde browsers.

Gebruik je toch al tabellen dan kun je de marge van je document instellen door een afbeelding met een bepaalde breedte of hoogte in een cel te zetten.

Voorbeeld: 

In de linkercel van deze tabel staat een doorzichtige afbeelding met een breedte van 50 pixels. Het lijkt nu of de tekst 50 pixels is ingesprongen.

 En zonder randen:

In de linkercel van deze tabel staat een doorzichtige afbeelding met een breedte van 50 pixels. Het lijkt nu of de tekst 50 pixels is ingesprongen.

Hetzelfde principe geldt voor boven- en ondermarges.

Preformatted text

Soms biedt <pre> uitkomst. Wat tussen <pre> en </pre> staat wordt precies zo weergegeven als in de bron van het HTML document staat. Zo is door spaties en returns te gebruiken een marge in te stellen. Voor grote stukken tekst is dit natuurlijk niet wenselijk, want preformatted tekst kan niet verder in HTML gestructureerd worden.

Voorbeeld:

     Door iedere regel te beginnen
     met vijf spaties lijkt het of
     deze tekst is ingesprongen.

Blockquote,  UL

De elementen <blockquote> en <ul> worden ook wel gebruikt om tekst te laten inspringen. Microsoft Frontpage en Netscape Composer gebruiken bijvoorbeeld standaard <blockquote> als via de knoppenbalk wordt ingesprongen. Inspringen door middel van deze elementen is niet verstandig, omdat ze eigenlijk ergens anders voor bedoeld zijn. Met <blockquote> geef je aan dat een stuk tekst geciteerd is, en met <ul> dat er een ongeordende opsomming volgt. Hoewel de huidige browsers van Netscape en Microsoft de tekst standaard laten inspringen, kan het per browser verschillen hoe tekst tussen deze elementen wordt weergegeven.

Een uitleg over blockquote en UL is te vinden in de HTML Handleiding van Hans de Jong.

Frames en marges

De HTML specificaties van het W3C bieden voor frames nog een mogelijkheid om marges in te stellen. Bij frames kun je gebruik maken van de attributen marginheight="x" en marginwidth="y". Deze moeten worden toegevoegd aan het element <frame> in de frame bron.

Voorbeeld: <frame src="inhoud.htm" name="inhoud" marginheight="5" marginwidth="10">

Met dit voorbeeld worden vanaf Netscape Navigator 2 en Microsoft Internet Explorer 3 de marges ingesteld op een hoogte van 5 en een breedte van 10 pixels. Gebruik voor andere waardes dan pixels stylesheets in de afzonderlijke documenten.

Een uitgebreide uitleg over frames is te vinden in de Frames Handleiding van John Westera.

Frames naadloos laten aansluiten

Hieronder wordt in drie stappen uitgelegd hoe je het min of meer voor elkaar krijgt dat de inhoud van verschillende frames naadloos op elkaar aansluit.

  1. Een marge van 0 pixels instellen

    De marges kunnen worden ingesteld op 0 pixels door in alle <frame> elementen de attributen marginheight="0" en marginwidth="0" op te nemen.

    Voorbeeld: <frame src="inhoud.htm" name="inhoud" marginheight="0" marginwidth="0">

  2. De randen tussen de frames verwijderen

    De randen, of borders, tussen de frames moeten een dikte van 0 pixels krijgen. Dit kan door de attributen framespacing="0", border="0" en frameborder="0" toe te voegen aan het element <frameset>.

    Voorbeeld: <frameset cols="100,*" framespacing="0" border="0" frameborder="0">

    Vanaf Navigator 3 en Internet Explorer 3 is er nu geen rand meer zichtbaar tussen de frames.

  3. De marges in Netscape Navigator ook écht op elkaar laten aansluiten

    Nadat je een marge van 0 pixels hebt ingesteld zou je verwachten dat de inhoud van de frames naadloos op elkaar aansluit. Helaas is dit in Netscape Navigator niet het geval. Er treden namelijk twee problemen op. Navigator houdt een marge aan van minimaal 1 pixel, en is bovendien erg onnauwkeurig met het pixelprecies in frames indelen van het scherm.

    Die vervelende lijn van 1 pixel is voor Netscape Navigator 4+ weg te halen door marginheight="0" marginwidth="0" toe te voegen aan het <body> element van de pagina's die in de frameset geladen worden.

    Voorbeeld: <body marginheight="0" marginwidth="0">

    Achtergrondafbeeldingen lopen overigens wel door en hebben geen last van 1 pixel tussenruimte. Om in Netscape Navigator 3 de lijn van 1 pixel te verdoezelen kan hiervan soms handig gebruik gemaakt worden.

    Het tweede probleem waar Navigator je mee opzadelt is dat de browser niet erg nauwkeurig is met het verdelen van het scherm in frames. Wanneer je in een frame van 100 pixels breed met een marge van 0 pixels een afbeelding zet die precies 100 pixels breed is, dan zal een deel daarvan niet in het frame passen. De ervaring leert: hoe groter het formaat van het browserscherm, des te groter de afwijking van het formaat van het frame.

    Bekijk deze pagina bijvoorbeeld eens met Netscape Navigator en maak je browservenster wat groter of kleiner. Je zult zien dat de afmetingen van het linker frame veranderen, terwijl hij een vaste breedte van 100 pixels heeft.

    Voor dit tweede probleem zijn geen echte oplossingen te geven. Beperkt toepasbaar zijn:

    • Vermijd het gebruik van frames. Stylesheets en tabellen vormen een alternatief.
    • Houd in je ontwerp rekening met de verschillen en zorg dat kleurvlakken of afbeeldingen niet nauwkeurig hoeven aan te sluiten.
    • Door een nieuw venster met opgegeven vaste afmetingen te openen kun je vooraf berekenen wat de afmetingen van een frame in Netscape worden. Nieuwe vensters openen heeft weer andere nadelen, maar dat terzijde.

      Hoe Netscape frame afmetingen berekent:

      • Netscape verdeelt de beschikbare ruimte in 100 gelijke stukken.
      • Vervolgens wordt er gekeken hoeveel van deze hele stukken in de opgegeven afmeting passen.
      • Dit aantal is het percentage dat het frame toebedeeld krijgt en wordt weer omgerekend naar een absoluut aantal pixels. Dit dient een geheel getal te zijn.
      • Netscape zorgt hiervoor door van het absolute aantal de getallen achter de komma weg te strepen. Er wordt dus niet afgerond naar het dichtstbijzijnde hele getal.

      Voorbeeld: Een frame van 145 pixels breed in een scherm met een *interne* breedte van 640 pixels wordt in Netscape 140 pixels breed.

      • Netscape verdeelt 640px in 100 gelijke stukken. 1 stuk is dus 6,4 pixels breed.
      • Er passen 22 hele stukken van 6,4 pixels in het frame van 145 pixels, want 22 keer 6,4 is 140,8.
      • Van het getal 140,8 streept Netscape de getallen achter de komma weg. Het frame zal dus 140 pixels breed worden.

    Een echte oplossing is hiervoor niet te geven. Belangrijk is dat je je ervan bewust bent en dat je er in je ontwerp rekening mee houdt.

Bijdrage van Karst Lohman

Laatste wijziging: 25 maart 2001

[home] [nieuws] [download] [contact] [colofon]

© 2001 Het NIWO-FAQ Team