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

CSS tabellayout eksempel 5

I eksempel 4 demonstrerede jeg hvor let det var at tilføje en ekstra spalte for at opnå et 3-spaltet layout i den konventionelle smal-bred-smal udformning.

I dette eksempel bytter jeg simpelt hen om på to af spalterne i kildekoden for at opnå det layout, du netop kigger på.

HTML-koden

I HTML-kildekoden herunder ser du, jeg i forhold til eksempel 4 har byttet om på #sidebar-elementet og #artikel-elementet:

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

For så vidt angår formateringen af spalterne, er det egenlig kun #sidebar-elementet, der er nødvendigt at foretage et par småjusteringer på:

#sidebar {
  display: table-cell;
  vertical-align:top;
  width:220px;
  background-color: #fff;
  padding-top:5px 10px 10px 20px;
  border-right:2px solid #505c5a;}

IE7 Stylesheet'et

Når vi skal fremstille et stylesheet til IE6/7 kan vi gribe tilbage til vore erfaringer fra de “almindelige” float-layouts. Disse tilsiger os, at dersom vi left-float'er de to smalle spalter vil de 1) flyde op ved siden af hinanden og 2) #artikel-elementet vil flyde op på højre side af disse, dersom vi afsætter den fornødne plads til venstre for #artikel-elementet:

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

Min personlige smag og måske visse fordomme får mig til at foretrække en højrestilling af de to smalle spalter. Det skal være det det afsluttende eksempel 6.

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