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

CSS tabellayout eksempel 4

Hvis vi nu tager udgangspunkt i eksempel 3 er det ret let tilføje en ekstra kolonne til annoncer, “Læs også” og andre teasere eller hvad du kunn tænke dig en sådan spalte anvendt.

HTML-koden

I HTML-kildekoden herunder ser du, jeg i forhold til eksempel 3 har puttet et ekstra element ind, nemlig elementet #sidebar.

  <div id="side">
    <div id="banner">
    [ Sidehoved indhold ]
      <div id="indhold">
        <div id="nav">
        [ Navigationsspaltens indhold ]
        </div<>
        <!-- /nav -->
        <div id="artikel">
        [ Artikel ]
        </div><!-- /artikel -->
        <div id="sidebar">
        [ Sidebar indhold ]
        </div><!-- /sidebar -->
    </div><!-- /indhold -->
  </div><!-- /side -->;
 

IE7 Stylesheet'et

Det er straks mere besværligt at ordne det sådan, at vi opnår det samme layout i IE7 eller ældre. Forklaringen på dette finder du i artiklen CSS-table layout modeller, hvor jeg kommenterer nedenstående:

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

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