Helaas voor webdesigners, computerschermen nog komen in allerlei vormen en maten, waardoor het moeilijk om te maken een lay-out voor een webpagina die consequent ziet er goed uit voor iedereen die bekijken. Dit is waar de "relatieve grootte" in komt. Door in te stellen pagina en sectie breedte in percentages in plaats van een bepaald aantal pixels, zal u helpen om ervoor te zorgen dat uw web-pagina lay-out elk schermformaat of elke resolutie past.

Wat die u nodig hebt

• Kennis van HTML/CSS

• HTML of platte tekst Editor

• In een HTML- of teksteditor zoals Kladblok, maak een nieuw bestand en voeg de volgende:

  Sla dit bestand op als "filename.html".

• Zoek deenTags in uw HTML-bestand. Tussen deze tags, voeg de volgende CSS-code:

  Dit vertelt de browser dat terwijl het lichaam van de webpagina het hele scherm neemt, de container in het lichaam de inhoud beperkt tot de 80% in het midden van het scherm blijft. Omdat de .header en .main-inhoud secties in de container worden zal, zijn ze ingesteld op 100% van de container ruimte innemen. Het maakt ook een witte inhoud container op de achtergrond van een zwarte bladzijde om u de container dimensies beter te helpen.

• Zoek deenTags. Tussen deze tags, moet u de volgende HTML invoegen:

  De titel van de pagina van de web

  Pagina-inhoud

  Dit vertelt de browser de volgorde bepalen waarin de geneste pagina-elementen gedefinieerd door de CSS-code weergeven.

• Sla het HTML-bestand en geef deze in uw webbrowser. Wijzig het formaat van het browservenster van uw om te zien hoe de webpagina zich gedraagt. De breedte van de pagina-indeling wordt zodanig aangepast dat deze de browser de verschillende maten passen.