Lag en side for flere oppløsninger:

Ta utgangspunkt i 800x600 som også skal fungere i større oppløsninger.
Lag siden til 778 px bred for å slippe horisontal scrollbar nederst på siden (sett høyre og venstre margin til 0). Formater siden enten ved tabell eller css.
Sidene blir da full-bredde i 800x600, med større sidekanter etter hvert som oppløsnig/skjermbredde øker. Midtstiller du innholdet (eks. <table align=center>) blir det en like stor "marg-kant" på begge sider av innholdet på siden.

En annen måte å tilpasse siden til flere oppløsninger er "liquid design". Dette betyr at siden utvider seg i forhold til den besøkendes skjermoppløsning.
Du bruker tabeller med minst 2 kolonner. En kolonne settes til fast bredde, den andre ikke. Det tillater kolonnen uten fast bredde å utvide seg i forhold til oppløsning. Du kan også bruke % som fast bredde på første kolonnen, men da mister du litt av kontrollen på layouten.

Du kan også bruke "liquid design" uten tabell, siden vil da også tilpasse seg besøkerens oppløsing, og skjermbredden vil være 100% uansett oppløsning. Bakdelen er at layouten vil variere avhengig av den besøkendes oppløsning.
En annen ting er at teksten blir tung å lese i stor oppløsning da linjen vil være lang, og mange får problemer med å "finne" neste linje når blikket går over fra venstre og over til høyre for å finne neste linje.
Det er visstnok forsket litt på dette, og noen har kommet frem til at en tekstlinje på ca. 400 - 500 pixler er det beste.

En annen ting, for å unngå horisontal scrollbar uansett måte du lager siden på kan du ikke plassere et element (bilde el.l.) som er bredere enn bredden på kolonnen du legger det i.

En helt annen ting du ikke har kontroll på er at en del surfer uten at leservinduet er maksimert, de har altså en bredde på leser-vinduet som er mindre enn oppløsnings-bredden på skjermen. Besøkeren vil da få en horisontal scrollbar hvis du da ikke har brukt "liquid design".

Et eksempel på "liquid design":

<table width="100%"><tr><td width="180px">
Dette blir venstre kolonne med fast bredde. Hele tabellen er satt til å dekke skjermbildet 100%.
</td><td>
Dette blir neste kolonne, evt. midtre hvis du skal bruke 3 kolonner som i dette eksempelet. Den egner seg da til å ha "hovedinnholdet" i. Kolonnen er ikke satt til noen bredde, det gjør den "fleksibel", altså den "liquide" kolonnen.
</td><td width="100px">
Tredje kolonne. Fast bredde på 100 pixler.
</td></tr></table>

De faste breddene tilpasser du etter hva du skal ha i de kolonnene, midtkolonnen tilpasser seg selv etter besøkendes oppløsning. MEN, hvis du skal ha full bredde uten scrollbar på 800x600 må du ikke plassere noe element som er bredere enn de faste breddene, og heller ikke noe som er bredere enn:
800px - (Fast bredde + Fast bredde) = max.elementbredde! i den "liquide" kolonnen.
I dette eksempelet blir det 800px - (180px + 100px) = 520px.


Denne siden er laget kun i CSS uten tabell. Det som er satt inn i style er høyre og venstre margin skal være 60px. Oppløsning 800x600 vil da få linjebredde på (800px - 2x60px) = max.bredde 680px. Linjebredden vil øke avhengeig av større oppløsning.


Denne tabellen er på 658px + 2x60px (side-marginer) = opptar 778px

Denne tabellen er på 400px + 2x60px (side-marginer) = opptar 520px



© Denne artikkelen er skrevet
av Willy Sørensen - Infolinx-no.com
Kopiering, avskrift og lignende er
ikke tillatt uten samtykke!
Willy@infolinx-no.com




Copyright © 1999-:   Willy Sørensen - Infolinx-no.com