max-width

Siden er opdateret 10. 12. 2011

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>
Denne boks er sat til en bredde på 60%.
Denne boks er sat til 60% bredde med maximum sat til 400px.
Denne boks er sat til en fast bredde på 400px

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.

Valid XHTML og CSS / Copyright © Hjemmesideskolen maj 2005

Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - max-width
sidens top
Brugere lige nu: 1
Home Mail