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).
Voor dit soort tips houd ik me altijd aanbevolen, want de werking van CSS blijft af en toe nogal duister voor me. Kortom: ik kom zeker nog eens terug.
thanks!!
Ik zal het wel gemist hebben… Maar ik wil ook zo’n mooie grote foto op het scherm als je er op klikt. Hoe lang gaat dat nog duren denk je? (Even voor de duidelijkheid: Ik ben blonT)
weer knap geschreven ven je
🙂
Heel interessant maar ik sna het echt niet waar je het over hebt. Ik ben niet zo handig, gelukkig is mijn wederhelft dat wel. 😉
een elegante oplossing…dat wil ik wel zien 🙂
Soms zou ik wel willen dat ik hier meer van snapte, maar ja, ieder zijn kennisgebied…
Ik maak mijn foto’s altijd in een vaste grootte en als ik ze groter wil plaatsen gebruik ik thickbox (of zoiets) 😉 Blijft handig deze CSS tips!
Alle moderne browsers ondersteunen dit, je moet wel het correcte doctype aangeven, anders gaat dit terug naar standaard CSS1 en wordt het niet ondersteund
Ik vraag onze pc dokter wel als er zulke problemen zijn
CSS vindt ik vaak een hoop gepuzzel, zeker wat betreft positionering van elementen.
max-width heb ik nog nooit gebruikt. Wordt dit door alle browsers ondersteund?
Dit is allemaal abracadabra voor mij. Als er iets op te lossen valt, roep ik de hulp in van mijn steun en toeverlaat op computergebied.
Ben benieuwd hoe we dat verder gaan oplossen. 🙂