Oversigt over modellerne

Layouteksempel 1 Layouteksempel 1a Layouteksempel 2 Layouteksempel 2a Layouteksempel 3 Layouteksempel 3a Layouteksempel 4 Layouteksempel 4a

Overskrift 1

Her er indsat en nyhedsboks, hvor du kan fortælle lidt om indholdet af siden, eventuelle nyheder eller lignende.

Overskrift 2

Sådanne kasser kan du lave så mange af, du har lyst til.

3 kolonner med flydende midte

Dette layout er blevet kaldt webdesignerens hellige gral, fordi det tilgodeser stort set alle krav til et fleksibelt layout, der er anvendeligt i til et utal af designs.

Som du kan se ved en sammenligning af eksempel 4 og eksempel 4a (denne side) kan dette design laves med såvel tabeller som ved hjælp af stylesheets.

Der er en mængde fordele forbundet med at bruge CSS til at skabe et sådant layout:

Er der slet ingen ulemper? Jo, et layout som dette er baseret på anvendelsen af en række CSS-egenskaber, der ikke alle fortolkes lige godt af alle browsere, selv ikke de mest moderne browsere. Dette layout er dog et eksempel på, hvorledes der (næsten) kun anvendes CSS-egenskaber, der fortolkes af stort set alle browsere, der har set dages lys inden for det seneste par år. En undtagelse er min-width, der ikke fortolkes af Internet Explorer.

Hvis du ønsker pixelperfekt justering af alle kasser kan der hurtigt opstå et problem omkring ensartet visning i hhv Internet Explorer og (næsten) alle andre moderne browsere. Disse problemer fortælles der om på nogle websider på adressen www.webdesign101.dk/xhtml/css/hacks/index.php. Der findes også på nettet mange artikler om dette, først og fremmest masterlisten over, hvilke egenskaber der fortolkes af hvilke browsere på Webreview

Nu ser mit stylesheet således ud:

<style type="text/css" media="screen">
<!--
body {
  background-color:silver;
  background-image:url(greyback.jpg);
  background-repeat:repeat;
  background-attachment:fixed;
  font-family:arial,sans-serif;
}
#banner h1 {
  background-color:white;
  border-style:solid;
  border-color:black;
  border-width:1px 2px 2px 1px;
  padding-left:200px;
  padding-top:10px;
  padding-bottom:10px;
}
h1 {font-size:24px;}
#indhold {
  margin:10px 170px 10px 190px;
  border-style:solid;
  border-color:black;
  border-width:1px 2px 2px 1px;
  background:white;
  min-width:500px;
  font-size:90%;
}
#indhold h1, #indhold p, #indhold pre {
  margin:10px;
}
#leftcol {
  width:170px;
  float:left;
}
#leftcol p {
  margin:0 10px .5em 10px
}
.leftbox {
  width:170px;
  float:left;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 2px 2px 1px;
  margin:0 0 10px 0;
}
.leftbox p {
  font-size:85%;
  margin:10px;
}

#rightcol {
  position:absolute;
  right:10px;
  width:150px;
  top:85px
}
.rightbox {
  width:150px;
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 2px 2px 1px;
}
.rightbox p {
  font-size:90%;
  margin:10px;
}
h4 {
  font-size:90%;
  margin:0;
  padding:5px 10px;
  background-color:#f90;
  border-bottom:1px solid black;
}
address {
  background:white;
  border-style:solid;
  border-color:black;
  border-width:1px 2px 2px 1px;
  margin:10px;
  padding:5px 0 5px 180px;
  font-style:normal;font-size:90%;font-weight:bold;}
address a {font-size:85%;} 
.manchet {
  background:white;
  border:1px solid black;
  margin-left:10px;
  margin-right:15px;
}
div#leftcol a {
  display:block;
  margin-bottom:3px;
  font-weight:bold;
}
li {margin-right:10px;}
-->
</style>

Det er igen her værd at bemærke, at formateringen af kasserne i betydeligt omfang foregår via kassernes indhold, jf. f.eks. kassen #banner, der i sin helhed dannes af formreglerne for den kontekstuelle selektor #banner h1. Ditto for så vidt angår h4, overskriften på gul baggrund i kasserne i marginerne. Derved undgår jeg det meste af roderiet med Internet Explorers forkerte fortolkning af formreglerne for kasser.

Herunder viser jeg websidens opmærkning til denne side:

<div id="banner">
    <h1>Banner</h1>
</div>
<div id="leftcol">
    <div class="leftbox">
        <h4>Kursusweb</h4>
        [ Menu ]
    </div>
    <div class="leftbox">
        <h4>Overskrift 1</h4>
        [ Nyhedstekst 1 ]
    </div>
    <div class="leftbox">
        <h4>Overskrift 2</h4>
        [ Nyhedstekst 2 ]
    </div>
</div>
<div id="indhold">
    <h1>3 kolonner med flydende midte</h1>
    <div class="manchet">
    [ Manchet indhold ]
    </div>
    [ Indhold ]
</div>
<div id="rightcol">
    <div class="rightbox">
        <h4>I denne sektion:</h4>
        [ Undermenu ]
    </div>
</div>
<div id="footer">
    <address>
        [ Footer indhold ]
    </address>
</div>
 

I denne sektion:

Links til forskellige websider i én af hovedmenuens sektioner.