Webdesign 101 Demoside

Gelé-layout

Mike Purvis har opfundet en metode, hvorefter vi både kan blæse og have mel i munden, når vi skal layout vore websider. Med hans egne ord:
” Jeg ønskede at lave et design, der bliver 770 pixel bredt i et 800 pixel browservindue, men ikke nødvendigvis skal være 1250 pixel bredt i et 1280 pixel bredt browservindue. “

Links til originale artikler i højre spalte under titlen Herkomst.

Lakmusprøven på et layout er naturligvis, om det kan tilpasses et givet webprojekts overordnede designkriterier. Lakmusprøven for et nyt layout er, om det kan tilføre et design nogle nye muligheder.

Mark Purvis' “Jello Mould” er en nyskabelse, der opfylder begge betingelser.

(“Jello” er en afskyelig og rasende populær nordamerikansk gelédessert, “Mould” betyder støbeform. Jeg benytter betegnelsen gelé-layout for denne layoutmodel – den er hverken elastisk eller fikseret, som det fremgår af denne artikel og artiklens eksempler.)

På denne webside viser jeg, hvorledes jeg har anvendt modellen på mit foretrukne layout: En ret bred venstrestillet artikelspalte, en smallere højrestillet spalte til menuer og diverse informationer samt et sidehoved og en sidefod.

Det er et elastisk layout, hvor elasticiteten ikke er direkte proportional med browservinduets bredde, men snarere med en procentdel af en øget bredde. Tillige demonstrerer jeg i Gelé-layout model 1a, hvorledes sidefoden skubbes ned af den spalte, der har det meste indhold.

Store monitorer

Jo bedre monitor, nogle folk får, des sværere får vi ved at lave layouts, der på den ene side præsenterer sig fornuftigt på en 800 gange 600 pixel skærm, og på den anden side udnytter en fornuftigt del af skærmarealet på en 1280 gange 1024 pixel fladskærm.

Den oftest brugte løsning på dette dilemma er et elastisk layout med brug af min-width og max-width egenskaberne. Bruger vi en højre og/eller en venstre kolonne med fast bredde, får vi en indholdsdel, hvis bredde varierer med browservinduets størrelse.

Der er to hovedproblemer forbundet med dette, nemlig

at Internet Explorer ikke kan fortolke max-width og min-width og derfor ikke respekterer vores maksimums- og minimumsbredder, og
tekstlinierne (derfor) bliver alt for lange, når browservinduet udnyttes fuldt ud.

Fleksibelt fikseret

Der er nu fundet en metode til at lave et layout, der – også i Internet Explorer – aldrig kan blive hverken smallere eller bredere end hvad du har bestemt, og som yderligere gi'r dig mulighed for at kontrollerer elasticiteten, når browservinduet gøres bredere.

Denne side er layoutet efter denne model, så hvis du har en 1280 gange 1024 monitor kan du let konstatere, at siden ikke kan blive smallere end ca. 700 pixel, men at den godt kan gøres bredere uden at linielængden forøges alt for meget.

Mere præcist: Når browseren er 800 pixel bred er websiden ca. 740 pixel bred, Når browseren er 1280 pixel bred, er websiden ca. 980 pixel bred. Siden kan ikke blive bredere end dette, heller ikke på en større monitor.

Nøgleeksempel

Jeg vil i første omgang springe over, hvorledes layoutet er lavet for netop denne side – og i stedet forklare, hvorledes du laver et et tospaltet layout med venstrestillet menuspalte, centreret i browservinduet, med de netop beskrevne egenskaber.

Det er gelé-layout model 1. De konkrete dele af forklaringerne på layoutets opbygning står i eksemplet. Herunder gennemgår jeg hovedpunkterne, eller principperne, om du vil

Den hemmelige ingrediens

Nøgle til at forstå, hvorledes vi kan sætte en minimumsbredde uden at bruge min-width, er at gøre sig klart, at negative marginer kan gøre et element større end dets forældrelement.

Det smalleste et element kan være er 0 pixel. Hvis et sådant element har et indlejret element, hvis højre og venstre margin er -200 pixel, vil dette element være 400 pixel bredere end forældreelementet. Og nok så vigtigt: Den samlede bredde kan aldrig blive mindre end 0 pixel + 400 pixel = 400 pixel.

En minimodel af dette arrangement ser du herunder.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

Den html-kode, der skaber figuren, er:

<div id="ydrediv">
  <div id="fixer">
    <div id="udvider">
    <p>Lorem ipsum dolor sit amet, consectetuer 
    adipiscing elit, sed diam nonummy nibh 
    euismod </p>
    </div>
  </div>
</div>

Det tilhørende stylesheet er:

  #ydrediv {padding:0 200px 0 200px}
  #udvider {
    position:relative; /* IE fix */
    margin:0 -200px 0 -200px;}
  #fixer {width:100%;} /* IE fix */
  * html #ydre, 
  * html #udvider,
  * html #fixer {height:0;}/* IE fix */

Vi skubber til kanten her, så der skal mere til end almindelige formregler:

De grundlæggende formdeklarationer er:
#ydrediv { padding:0 200px 0 200px} #udvider { margin:0 -200px 0 -200px;}
men af hensyn til IE skal elementet #udvider have en position:relative;
Også af hensyn til IE skal den eksplicitte højde på alle tre elementer sættes til 0, hvilket sker med de 3 nederste formregler (stjerne-hack'et)
Og endelig skal der indsættes en ekstra div med en bredde på 100 procent mellem #ydre og #udvider

Men dermed har vi altså skabt en stump kode, der sikrer min-width, hvis den bliver anvendt på body-markøren.

Bredden af `fixer`-elementet

I minimodellen herover introducerede vi et element #fixer, der i første omgang er nødvendigt af henyn til Internet Explorer. Vi satte bredden til 100%, hvilket i minimodellen har den virkning, at indholdet (i elementet #udvider) altid vil fylde browservinduet 100% i bredden.

I stylesheet'et til denne side er bredden af #sizer (jeg bruger i det egentlige stylesheet for siden en anden id for #fixer) imidlertid sat til 50%. Bredden af padding og de negative marginer er hhv 350 pixel og -350 pixel, hvilket skaber en minimumsbredde på siden på 700 pixel.

Du kan nu lave følgende regnestykke, hvis browservinduets bredde er større end 700 pixel:

Træk 700 fra bredden (padding)
Tag 50 procent af, hvad der er til rest (width)
Læg 700 til dette (negative marginer)

Du kan nu lave følgende tabel for websidens bredde i forhold til forskellige bredder af browservinduet:

Browser- vindue	Mellemregning	Websidens bredde
800px	(800 - 700) * 0,5 + 700 = 750px	94%
1024px	(1024 - 700) * 0,5 + 700 = 862px	84%
1280px	(1280 - 700) * 0,5 + 700 = 990px	77%
1600px	(1600 - 700) * 0,5 + 700 = 1150px	72%
2560px	(2560 - 700) * 0,5 + 700 = 1630px	64%

Hvis du har en skærm, der er større end 800 gange 600 pixel kan du let iagttage denne mageløse effekt ved at gøre browservinduet bredere eller smallere mens du læser den side. Den er nemlig designet efter de tal, der fremgår af 3. række (1280 pixel browservindue).

For at sætte ord på det: Websidens bredde som en procentdel af browservinduet er stor, når browservinduet er smalt, mens denne procentdel bliver mindre, des bredere browservinduet er.

Proportionaliteten bestemmer du ved at vælge end anden værdi for #sizer-elementet.

Html-kildekode

Html-kildekoden til denne side:

<body>
<!-- #sizer ta'r en procentdel af hvad der er til 
  rest af body-elementet -->
<div id="sizer">
<!-- #expander bruger negative marginer for at skubbe 
  indholdets sider udad og tilbageerobre den bredde, der 
  er gået tabt til body padding -->
<div id="expander">
<!-- #page er sat til 100 procent bredde, således at 
  IE tolker en eventuel procentvis bredde af #indhold og 
  #rightcol korrekt -->
<div id="page" class="clearfix">
  <div id="banner">
    [ Sidehoved ]
  </div>
  <div id="indhold">
    [ Artikel ]
  </div><!-- slut #indhold -->
  <div id="rightcol">
    [ Menuspaltens indhold ]
  </div>

  <div id="navbar">
    [ Navigationsbjælkens indhold ]
  </div>
  <div id="formbox">
    [ Søgefeltet ]
   </div>
   <div id="footer">
    [ Sidefod (Script) ]
   </div>
</div><!-- slut #page -->
</div> <!-- slut #expander -->
</div> <!-- slut #sizer -->
</body>

Herunder ser du de dele af stylesheet'et for denne side, der er relevante i forhold til artiklens emne. Du kan downloade det stylesheet, der sklaber denne sides layout her: jellolayout.css.

<style type="text/css" 
media="screen">
html, body { border: 0; margin: 0; padding: 0;}
body {
	padding: 0 675px 1em 25px; }
#sizer {
	margin: 0 auto 0 25px;
	padding: 0;
	width: 50%;
	max-width: 290px;  /* IE version er i betinget 
  kommentar under formblokken. */}
#expander {
	background: #efefff;
	margin: 0 -675px 0 -25px;
	min-width: 700px; /* Kritisk Safari fix! */
	position: relative;
}
/* Holly hack for IE \*/
* html #expander { height: 0; }
/* */

/* IE hack: 100 procent bredde får IE til at 
  tolke afkommets eventuelle bredder korrekt. */
#page { width: 100%; 
  background-color:#fefeff;
  color:black;
  border:1px solid #257;} 
/* http://positioniseverything.net/easyclearing */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* Slut easyclearing */
/* Øvrige formdeklarationer for websiden er 
  udeladt her */
</style>
<!-- max-width trick for IE -->
<!--[if IE]>
<style type="text/css">
#sizer {
width:expression(document.body.clientWidth > 1280 ? 
-->  "290px" : "50%" );
}
</style>
<![endif]-->

Kommentarer til html-kildekode og stylesheet:

Websidens placering: Som du ser har jeg ændret på websidens placering i forhold til de originale artikler og i forhold til mit eksempel 1. Det er et spørgsmål om personlig smag – jeg kan bedst li' det sådan.; Det er ordnet ved at ændre på bredden af padding for body-elementet og de negative marginer for #expander-elementet.
#page-elementet: #page-elementet modsvares af originalernes #wrapper-element, men modsvares også at det #page-element, jeg normalt bruger til at omslutte alt indhold på websiden.; #page-elementet er referenceramme for alt indhold, der skal formateres ved hjælp af float-egenskaben.; Eksempel 1 viser, hvorledes du kan ordne det med en venstre-float'et menuspalte og en højre-float'et artikelspalte.
clear'ing: #page-elementet skal clear'es, når vi inde i dette element vil have float'ede elementer. clear'ing er i praksis en videnskab helt for sig. Det er lidt besværlig at clear'e med et indholdsløst html-element, fordi sådanne elementers højde er forskellig fra browser til browser.; Et andet forhold af større betydning end man skulle tro er, hvordan man får et float'et element indlejret i et andet element til at skubbe bunden af det overordnede element nedad, alt efter indholdet i den indlejrede float.; Jeg synes alt det der er meget kompliceret at forklare, så jeg springer over hvor gærdet er lavest og bruger den clear'ing metode, som positioniseverything.net anbefaler. Vil du ha' en mere uddybende forklaring er der en 8 siders artikel om det på positioniseverything.net/easyclearing
Max-bredde i IE: Internet Explorer er ligeglad med vores max-width formregler, så indsættes efter vort egentlige stylesheet et nyt stylesheet i en betinget kommentar. Dette stylesheet, der kun læses af IE, indeholder en CSS-“expression” (La' vær og spørg(!)), der angiveligt og i praksis sørger for at aflæse bredden af browservinduet og sammenligne denne bredde med vores maksimum bredde. Er browservinduet bredere med 1280 pixel, sættes #sizer's width-egenskab til 290 pixel (hvortil skal lægges de 700 pixels "faste" bredde); er bredden mindre end 1280 pixel, sættes #sizer-bredden til 50 procent af det, der er tilovers efter vi har brugt de 700 pixel.

Konklusion

Med baggrund i nogle artikler på positioniseverything.net har jeg her præsenteret nogle principper for en ny måde at layoute websider på.

Metodens hensigt er først og fremmest at give websidekonstruktøren en bedre kontrol over, hvorledes hendes websider øges/mindskes i bredde, hvis browservinduet øges/mindskes i bredde.

Slutresultatet af den lidt indviklede øvelse er i realiteten at give dig ét browserelement, her kaldet #page, hvori du kan udfolde dit sædvanlige layout eller eksperimentere med andre former.

Som illustration af mulighederne har jeg lavet et par eksempler:

Eksempel 1: Fuldt elastisk layout med venstrestillet menuspalte. Rigeligt kommenteret.

Eksempel 2: Fuldt elastisk layout med venstrestillet menuspalte. Kort kommenteret – det er helt mage til foregående på nær to formdeklarationer.

Eksempel 3: 3-spaltet layout med lige høje kolonner, fikseret bredde på venstre og højre kolonne.

Forbehold

Siden jeg uploadede denne artikel for nogle dage siden har et par læsere skrevet til mig og gjort opmærksom på nogle problemer med visningen af de ovennævnte eksempler. Jeg beskriver disse forhold i et indledende afsnit til eksempel 3. (Jørgen Farum Jensen, 21. jan. 2006.)

Denne side er senest opdateret: July 31, 2006

Artikler om CSS-layout

Noter om websidelayout: Nogle argumenter for CSS-baseret layout fremfor layout baseret på tabeller. Links til mange eksempler, hvor jeg demonstrerer et antal modeller til layout ved brug af position-egenskaben.
Kvikguide til eksemplerne: Vil du hellere ha’ en hurtigt læst oversigt over (alle) mine eksempler, skal du gå til denne side.
Fra tabellayout til CSS-layout: Demonstration af, hvorledes nogle typiske tabelbaserede layout-modeller omsættes til CSS.
Grafik i sidehovedet: Links til et par eksempler på et sidehoved med grafik
Autocentrering: Forskellige metoder til at centrere en websides indhold i browservinduet.
Websidelayout med float: En diskussion af fordele og ulemper ved de to layout-principper.
float-metoden er uundværlig, når du skal skabe indtryk af lige høje kolonner eller spalter.
3 lige høje spalter med CSS: Denne artikel beskriver hvordan du kan lave et 3-spaltet layout, hvis højde indretter sig efter den spalte, der har det meste indhold.
Gelé-layout: En brillant idé, der gør det muligt at arbejde med minimums- og maksimumsbredder på websiden, og tillige opnå en variabel øgning af bredden.
Layout med “Det gyldne snit”: Duer det gyldne snit som forlæg til websidelayout?

Herkomst

Som alt det andet, jeg skriver om på dette websted, er også idégrundlaget for denne artiklen skabt af andre.

Konceptet, der ligger bag denne artikel, er skabt af Mike Purvis.

Jeg blev bekendt med idéen via en artikel på webstedet positionsiseverything, der dels forklarer sagerne, dels anstiller nogle forsøg med forskellige layouts efter denne metode, og sidst, men ikke mindst, giver os mulighed for at bruge et online værktøj, som Mike har lavet, og som gør det muligt for os at indtaste de maksimum og minimumsmål, vores side skal overholde, og hvilken grad af proportionalitet vi ønsker når browservinduet udvides: Jello Layout Tool.

Webdesign 101

– en webdesign notesblok