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

CSS tabellayout eksempel 3

Det er den simpleste sag i verden at spejlvende eksempel 2 med et højrestillet menupanel til layoutt med et venstrestillet menupanel, som du ser i dette eksempel.

HTML-koden

Alt hvad der kræves er at bytte om på rækkefølgen af de to spalter i HTML-kildekoden:

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

samt at ændre artiklens padding-right til en padding-left.

IE7 Stylesheet'et

Også rettelserne her er til at overse: float-reglerne byttes om, så det element, der før var left-float'et, nu bliver right-float'tet og omvendt.

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