Gelé-layout model 1

Dette eksempel på gelé-layout er næsten uforandret identisk med det resultat, du får ud af “The Jello Mould Generator”, det online værktøj, der gør det muligt for dig at få et (næsten) fiks og færdigt gelé-layout leveret på et par sekunder.

“Næsten” betyder, at det du får, kun er et skelet med de vigtigste strukturmarkører og de vigtigste stylesheet formdeklarationer.

Det, jeg har fortalt til generatoren for at få dette layout, er, at jeg vil have en minimumsbredde på min webside på 700 pixel, og en maksimumbredde på 990 pixel, og at dette maksimum skal nås når browservinduet er 1280 pixel bredt.

I sin nøgne form ser denne strukturopmærkning således ud:

<!-- BODY-elementet har en padding, der
skubber #sizer-elementet indad  -->
<body>

<!-- #sizer-elementet tager en procentdel 
af den bredde, der er tilbage efter body -->
<div id="sizer">

<!-- #expander-elementet bruger negative marginer 
for at skubbe siderne udad og tilbageerobrer den bredde,
der er tabt til body-elementets padding  -->
<div id="expander">
<!-- #wrapper-elementet er sat til en bredde på 100 procent.
Det hjælper IE til få beregnet bredderne af #content og #sidebar
korrekt  -->
  <div id="wrapper" class="clearfix">
    <div id="content">	
      [ Artikel ]
    </div>
    <div id="sidebar">
      [ Sidepanel ]
    </div>
    <div id="footer">
      [ Sidefod ]
    </div>
  </div> <!-- Slut #wrapper -->
</div> <!-- Slut #expander -->
</div> <!-- Slut #sizer -->
</body>

Jeg har i kildekoden ovenfor skrevet HTML-kommentarerne på dansk. Hvis du vil se de originale kommentarer, som indsættes af værktøjet, må du enten bruge "Vis kildekode" på denne side, eller selv bruge online værktøjet.

Jeg gennemgår her markør for markør de stylesheet formdeklarationer, der skaber layout-strukturen:

body-elementet (1)
html, body { border: 0; margin: 0; padding: 0;}
Indledningsvis nulstilles alle html- og body-egenskaber.
body-elementet (2)
body {
padding: 0 350px 0 350px;
margin: 0;
text-align: center;
background-color:#789;
font-family:georgia,serif;}
padding skubber body-elementets venstre og højre side ind med i alt 700 pixel. text-align:center centrerer wrapper-elementet.
#sizer-elementet
#sizer {
margin: 0 auto 0 auto;
padding: 0;
width: 50%;
max-width: 290px; }
#sizer-elementet tager halvdelen af, hvad der er til rest af body-elementets bredde (efter de 700 pixels padding). Hvis browservinduet i dette tilfælde for eksempel er 850 pixel bredt, er halvdelen af resten 75 pixel, som er den størrelse, #sizer så får. Er browservinduet 1024 pixel bredt, bliver #sizer 162 pixel bredt.
max-width for dette element er sat til 290 pixel. Det modsvares af de 990 pixel, jeg har sat til at være den maksimale bredde for sidens indhold (som er indeholdt i #wrapper-elementet), og er det halve af resten, hvis body-elementet er 1280 pixel bredt.
Internet Explorer forstår ikke max-width, så denne formregel er beregnet for alle de andre browsere. max-width i IE sættes med et JavaScript hack, som er forklaret herunder i afsnittet “max-width i IE”.
Med width-egenskaben for #sizer-elementet sætter du proportionaliteten: Hvis du for eksempel sætter width til 75 procent, vil websidens bredde øges med 75 pixel for hver 100 pixel, du øger browservinduets bredde.
#expander-elementet
#expander {
background: white;
margin: 0 -350px 0 -350px;
min-width: 700px; /* Kritisk Safari fix! */
position: relative; }
Dette element skal tilbageerobre de 700 pixel, som padding'en indskrænkede body-elementet med. De negative marginer betyder, som forklaret i artiklen Gelée-layout, at #expander-elementet aldrig kan blive smallere end 700 pixel (i dette tilfælde). Dermed har vi vores min-width-egenskab, der virker i alle browsere, Internet Explorer inklusive.
hasLayout?
Internet Explorer har også besvær med CSS-kasser, der ikke besidder den Microsoft-specifikke hasLayout-egenskab. Det skrev jeg lidt om i artiklen 3 lige høje spalter med CSS. Problemet gør sig også gældende i denne konstruktion, og vi kunne sikkert anvende det samme hack. Imidlertid foreslår online værktøjet brug af Holly Bergevin's “Holly hack for IE”, så det bruger jeg her:
* html #expander { height: 0; }
Bemærk her, at height i den ovenfor nævnte artikel sættes til 1%, mens det – ifølge den originale artikel, der ligger til grund for dette – i dette tilfælde er afgørende (af hensyn til IE) at bruge værdien 0.
#wrapper-elementet
Dette element modsvares af det #page-element, jeg normalt bruger til at samle alle websidens elementer i én kasse. Dette element gives en eksplicit bredde på 100 procent. Det skal afhjælpe Internet Explorers vanskeligheder med at lægge float'ede elementers procentvise bredder sammen:
#wrapper { width: 100%; }

For at få samling på tropperne gengiver jeg herunder hele stylesheet'et i en text-boks:

@import url(../cssmenu.css);
ul.cssmenu {position:relative;top:0.5em;}
html, body { border: 0; margin: 0; padding: 0;}
body {
  padding: 0 350px 0 350px;
  margin: 0;
  text-align: center;
  background-color:#789;
  font-family:georgia,serif;}	
#sizer {
  margin: 0 auto 0 auto;
  padding: 0;
  width: 50%;
  max-width: 290px;  }
#expander {
  background: white;
  margin: 0 -350px 0 -350px;
  min-width: 700px; 
  position: relative;}
* html #expander { height: 0; }
#wrapper { width: 100%; } 
#sidebar { /* Venstre spalte */
  width: 20%;
  float: left;
  display: inline;
  text-align: left;
  margin-left: 2%;
  color: #686;
  font-family: arial, sans-serif;
  font-size: .9em;
  padding-top: 20px; }
#content {
  width: 66%;
  margin-right: 4%;
  text-align: left;
  display: inline;
  float: right;
  padding-bottom: 3em;
  padding-top:20px;}
#footer address {
  background:#fff;
  color:#000;
  clear:both;
  font-style:normal;
  text-align:left;
  border-top:1px solid #257;
  margin:0;
  padding:0.5em 0 10px 10px ;}
p {
  margin: 0 0 .5em 0;
  line-height: 1.2;}
/* 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 */

h2 {
  margin:0 0 0.5em 0;
  padding:0;}
#banner {
  height:150px;
  color:#fff;   
  background-image:url(/www/res/discovery.jpg);
  background-position:right top;
  background-repeat:no-repeat;
  border-bottom:1px solid black;
  border-top:none;}
#banner h1 {
  font-size:30px;
  font-family:"arial black", arial, verdana,sans-serif;
  font-weight:normal;
  padding:75px 15px 0 0;
  margin:0;
  text-align:right;
  line-height:100%;}
code {font-size:1.2em;}
* html code {font-size:1em;}

max-width i IE

Nu kommer så noget jeg ikke har meget forstand på, men blot kopierer: For at fremkalde max-width-egenskaben i Internet Explorer, bruger vi følgende betingede kommentar:

<!--[if IE]>
<style type="text/css">
#sizer {
  width:expression(document.body.clientWidth > 1280 ? 
  -->  "290px" : "50%" );
}
</style>
<![endif]-->

Den betingede kommentar sørger for, at dette kun læses af IE. Bredden af #sizer-elementet sættes til 50 procent, hvis body-elementets bredde er mindre end 1280 pixel, og ellers til 290 pixel.

3 spalter, lige høje kolonner

Der (mindst) 3 fordele ved denne layout-metode:

  1. Den allerede nævnte, at websidens bredde øges proportionalt med browservinduets bredde, men med en regulerbar procentvis udvidelse
  2. At spalterne kan bringes i vilkårlig orden i kildekoden, jf. denne side, Gelé-layout model 2 og Gelé-layout model 3
  3. At websidens højde og placeringen af sidefoden indretter sig efter den af de 2 eller 3 spalter, der indeholder flest linier, jf. for eksempel Gelé-layout model 1a.

Som nævnt er dette eksempel – bortset fra sidehoved, sidefod og tekstformatering – identisk med den skabelon, der kommer ud af Jello Mould Generator på webstedet positioniseverything.net.

Jeg har, med med udgangspunkt i dette eksempel og i de eksempler, du i øvrigt kan finde på ovennævnte websted, udviklet to varianter af denne layout-model,

  1. dels en 2-spaltet udførelse til eget brug, jf. blandt andet hovedartiklen om emnet, Gelé-layout, samt Gelé-layout model 2, og
  2. dels en 3-spaltet udførelse til forhåbentlig nytte for dem, der ønsker at lave et 3-spaltet layout med lige høje kolonner og med midterkolonne først i kildekoden: Gelé-layout model 3

Januar 2005