CSS en HTML (7)

Soms is het wel eens handig om bepaalde zaken af te grendelen. En daar zijn blok elementen handig voor. Stel je voor je hebt een pagina waar iedereen van alles opgooit, inclusief jezelf uiteraard. Teksten, plaatjes etc. Kijk maar eens naar het volgende voorbeeld:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
<title>bVision webdesign</title>
<style type="text/css">
p {max-width: 300px}
img {max-width: 300px}
</style>
</head>
<body>
<p>Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. </p>
</body>
</html>

Als je dit knipt en plakt in een teksteditor en opslaat als html zul je zien dat het resultaat er als hieronder uit zal zien:

Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst.

Het wordt niet over de volle breedte van de beschikbare ruimte uitgeschreven maar netje Maximaal 300 px breed. Let wel op het correcte !DOCTYPE, anders doet ie het niet! de browser valt dan terug naar CSS1, en daar werd dat nog niet ondersteund. En wat is nu het nut… Heel eenvoudig als je hetzelfde met een plaatje <img /> doet wordt het nooit breder dan je aangeeft. En kleinere plaatjes worden gewoon in hun orginele grote neergezet. dat het nog een ongewenst neveneffect heeft zien we in het uiteindelijke resultaat ook de kopfoto krijgt deze maximale waarde. Dit lossen we in het volgende deel elegant op…. (klik hier voor de html pagina).




13 Comments

Geef een reactie

This site uses Akismet to reduce spam. Learn how your comment data is processed.