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

CSS tabellayout eksempel 2

Dette eksempel er layoutet på nøjagtig samme måde som eksempel 1, men er nu forsynet med stylesheet formregler, der skaber det samme layout i ældre versioner af Internet Explorer.

HTML-koden

HTML-kildekoden, der layouter siden, er nøjagtigt den samme som i eksempel 1:

    <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 -->
    

Stylesheet'et

Også det dokumentindlejrede stylesheet, der skaber layoutet i eksempel 1 er nøjagtigt det samme. Dene eneste forskel på disse to først eksempler er det ekstra dokumentindlejrede stylesheet der er indsat i headdelen af denne side:

  <!--[if lt IE 8]>
  <style type="text/css">
  #indhold {
    position: relative;
    overflow:hidden; 
    width:100%; /* Aht. IE6 */ }
  #nav {float:right;}
  #nav ul.menu li {display:inline;} /* Aht. IE<8 */
  #artikel { float:left; width:540px;}
  #sidefod {clear:both;}
  #nav, #artikel {
  padding-bottom:1000em;
  margin-bottom:-1000em;
  </style>
  <![endif]--> 
  

De principper, der indgår i dette ganske normale float-layout, er forklaret i artiklen Layout med float-egenskaben. Metoden til i et floatlayout at skabe indtryk af to eller flere spalter er forklaret i artiklen Avancerede float-layouts.

Desuden er det stylesheet forsynet med et par kommenterede formregler, som ta'r hånd om nogle generelle problemer med visningen i især IE6, der bl.a. har notorisk svært ved at beregne bredder.

Bemærk endelig den nødvendige clear'ing, der her foretages på sidefodselementet. Har du ikke et sådan, må du finde en anden måde at clear'e på, jf. artiklen Float wrapping.

Konklusion

Jeg har i dette eksempel vist, hvorledes du på samme tid kan drage fordel af, at alle nye browsere nu understøtter display:table egenskaben, og alligevel sikre at brugere med ældre versioner af Internet Explorer ser et layout der ganske svarer til det, de ser i en nyere browser.

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