Brugere lige nu: 19
Siden er opdateret 23.1.2008
Skal en side gøres 'skalerbar', dvs. skal siden kunne ses i en hvilken som helst bredde browservindue, vil man kunne risikere meget lange sætninger. Sådanne lange sætninger er - især i store tekststykker med mange linjer- svære at læse.
Her kan det så være en fordel at sætte en begrænsning på, hvor lange sætninger vil kunne blive. Altså definere en maksimal bredde.
I Mozilla og Opera er det fuldt tilstrækkeligt, at indsætte attributten max-width og tildele en passende størrelse til denne. Dette kan gøres i et stylesheet eller med inline-css.
<div style="width: 60%; max-width: 400px;">Noget tekst</div>
Ved en vinduebredde på 800 px er den øverste boks herover smallere end den nederste. Øges bredden på vinduet til ca. 875 px, er boksene lige brede og den øverste bliver ikke bredere, selv om browservinduet gøres endnu bredere.
Desværre forstår Internet Explorer ældre end 7 ikke max-width, selv om det er en del af css2-standarden. Derfor har jeg lavet et lille 'hack', der virker som ønsket:
<!--[if lt IE 7]>
<style type="text/css" media="screen">
div#maxw {
max-width:400px;
width:expression(document.body.clientWidth > 800? "400px": "60%" );
}
</style>
<![endif]-->
Dette skal så modsvares af denne kode i html:
<div id="maxw">Noget tekst</div>
Det fungerer på den måde, at scriptet undersøger browservinduets bredde. Er denne større end 800 px, begrænses boksens bredde til 400px. Ellers sættes bredden til 60% af den til rådighed værende bredde.
For at lave din egen begrænsning, skal du finde ud af ved hvilken bredde browservindue (800) boksen får den ønskede maximumbredde (400px) ved den ønskede procent (60%).
Man kan eventuelt øge 400px til 800px og udskifte 60% med auto. Så vil du kunne bruge det til at definere hele sidebredden til ikke at bliver større end 800 px, hvis browservinduet bliver bredere end 800px - men hvis browservinduet bliver smallere end de 800px, vil siden automatisk tilpasse sig denne mindre bredde.