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.

Kassedesign med CSS

Nu stikker vi igen hele foden i vandet og eksperimenterer med, hvorledes det kan komme til at se ud, hvis vi skal eftergøre vores efterhånden noget komplicerede tabellayout fra layoutforslag 3. Herunder ser du koden for websiden med de mange kasser:

<div id="leftcol">
    <div class="leftbox">
      [ Menuoverskrift ]
      [ Menukassen ]
    </div>
    <div class="leftbox">
      [ H4-overskrift ]
      [ Kassens indhold ]
    </div>
    <div class="leftbox">
      [ H4-overskrift ]
      [ Kassens indhold ]
    </div> 
</div>
<div id="indhold">
  [ Indhold ]
</div>
<div id="footer">
  [ address-markøren ]
</div>

Vi kan vist roligt konstatere, at det er en mere overskuelig, og ikke mindst "renere" opmærkning af teksten, der her er tale om.

Hele arbejdet gøres af stylesheet'et, der i sin helhed ser 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,helvetica,sans-serif;
}
#indhold {
  margin:10px 10px 10px 200px;
  border:1px solid black;
  background:white;
}
#indhold h1, #indhold p, #indhold pre {
  margin:10px;
}
#leftcol {
  width:180px;
  float:left;
}
#leftcol p{
    margin:10px;
}
.leftbox {
  width:180px;
  float:left;
  background:white;
  border:1px solid black;
  margin:0 0 10px 0;
}
.leftbox p {
  font-size:90%;
  margin:10px;
}
h4 {
 font-size:.9em;
  margin:0;
  padding:5px 10px;
  background-color:#f90;
  border-bottom:1px solid black;
}
div#leftcol a {display:block;margin-bottom:3px;}
address {
  background:white;
  border:1px solid black;
  margin:10px;
  padding:5px 0 5px 210px;
  font-style:normal;font-size:80%;font-weight:bold;
}

 -->
</style>