1. Webdesign 101 forside
  2.  » Layout med CSS tabeller

CSS tabellayout eksempel 1

Dette eksempel er en det første af en håndfuld, der demonstrerer hvorledes du kan layoute din webside med nogle ganske få formregler, der benytter sig af nogle særlige table-værdier for display-egenskaben.

HTML-koden

HTML-kildekoden, der layouter siden, er vist herunder.

    <div id="side">
      <div id="banner">
      [ Sidehoved ]
      </div>
      <div id="indhold">
        <div id="artikel">
        [ Artikeltekst ]
        </div><!-- /artikel -->
        <div id="nav">
        [ Navigationsapparat, resumeer, annoncer mv. ]
        </div><!-- /nav -->
      </div><!--  /indhold -->
      <!--[if lt IE 8]>
      [ IE advarselsboks ]
      <![endif]--> 
    </div><!-- /side -->
    

HTML-kildekoden opretter tre (3) hovedelementer på websiden. De tre elementer er et sidehoved (#banner) og en sidefod (#footer) og mellem dem elementet #indhold, der omslutter artikel og navigationsapparat.

De tre nævnte elementer er alle indeholdt i et #side-elementet. Det er oprettet for at kunne bestemme en sidebredde, der i dette eksempel for nemheds skyld er sat til 760 pixel.

Stylesheet'et

Stylesheet-koden er ubegribelig simpel: #indhold-elementet, der skal rumme to spalter, får display-værdien table, mens både #artikel og #nav får display-værdien table-cell. Færdig. Slut. Basta. Sådan da.

  div#side {
    position: relative;
    width: 760px;
    margin: 0 auto;}
  #indhold {
    display: table;
    border-collapse: collapse; }
  #nav {
    display: table-cell;
    width: 200px;
    background-color: #939d92;
    vertical-align:top;}
  #indhold{
    display: table-cell;
    padding-right: 10px;
    vertical-align:top;}
  

Som du ser af CSS-koden herover skal der lige et par boller mere på suppen, for for eksempel at få en vis afstand mellem de to spalter. Du må også huske på, at al tekstformatering og deslige, der ikke lige vedører layoutet, ligger i en separat CSS-fil. (Link til denne i menuspalten).

Problemet med Internet Explorer

Hvis du betragter denne side med Internet Explorer 7 eller ældre vil den ikke vise det tilstræble layout. Navigationsspalten står neden under artikelspalten. Det er du sådan set advaret om i den gule boks.

Eftersom alt indholdet er tilgængeligt læsbart, kunne jeg lade fem være lige og blot undlade at foretage mig videre.

Imidlertid kan jeg bruge det samme princip, som jeg bruger til at vise en gul advarselsboks, til at indlæse et stylesheet, der formaterer elementerne såå også Internet Explorer 7 og tidligere placerer dem korrekt. Det emnet for det eksempel 2.

Suspendisse mi pede, feugiat non, volutpat ut, placerat vitae, urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla a tellus. Quisque dolor nisl, placerat a, mollis ac, dignissim at, turpis. Curabitur wisi enim, commodo sit amet, iaculis et, ullamcorper non, quam. Donec arcu arcu, adipiscing a, tincidunt ut, laoreet non, eros. Proin bibendum gravida nisl. Nullam scelerisque consectetuer magna. Nam interdum risus non tortor. Donec eget sapien. In scelerisque, enim vitae porta vehicula, nibh ipsum elementum ipsum, eget hendrerit urna enim eu libero. Donec ornare lacinia diam. Phasellus venenatis lacus ac nulla. Integer euismod. Praesent nec purus. Mauris eget magna.

Nullam vehicula, augue id imperdiet iaculis, tellus neque commodo felis, ac aliquet risus nibh id nibh. Curabitur id odio non diam pretium luctus. Curabitur volutpat libero vel dolor. Ut imperdiet quam vel massa. Maecenas aliquam, diam nec dignissim accumsan, mauris mi venenatis turpis, consequat vestibulum enim lorem quis nibh. Integer bibendum pretium purus. Quisque ante. Nulla sed arcu. Etiam vel arcu. Nunc varius. Maecenas elementum lacus sit amet arcu. Curabitur sagittis gravida ipsum. Donec ac turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean aliquam commodo diam. Duis viverra fermentum purus. Maecenas congue, sem non luctus ultrices, diam wisi porta diam, in varius dolor nulla id ante. Aliquam convallis volutpat nibh.

Oprettet maj 2009