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

CSS tabellayout eksempel 6a

Dette er en variation over CSS-tabellayout eksempel 6. Variationen består i, at jeg har ønsket at #sidebar-elementet og artiklens brødtekst skal have samme overkant.

I de slemme gamle HTML 3.2 dage, da vi var tvunget til at bruge tabeller til layout, var det et godt råd at sætte sig med et stykke kvadreret papir og tegne tabellerne op før man gav sig i kast med at konstruere dem.

CSS tabelegenskaberne omfatter ikke nogen egenskaber, der kan sammenlignes med colspan og rowspan egenskaberne. Til gengæld er det noget lettere at indlejre tabeller i tabelceller.

Min skitse til hvad jeg vil opnå ser du herover. De røde streger angiver en ny div med egenskaben display:table. Den omfatter noget indhold, in casu den logiske sti, artiklens overskrift og artiklens manchet, samt #nav-elementet, der i forvejen har display-egenskaben table-cell. Bemærk at det end ikke er nødvendigt at oprette et nyt table-cell element til de tre tekstelementer. Browseren opretter af sig selv de anonyme tabelelementer, der skal til for at tegne den røde tabel.

HTML-koden

I forhold til eksempel 6 er #indhold-elementet og #sidebar-elementet nu omsluttet af et #outer-element.

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

Og dette ene nye element skal blot have display-egenskaben table-cell. Så er den ged barberet.

#indhold {
  display: table;
  border-collapse: collapse; }
#nav {
  display: table-cell;
  width: 200px;
  background-color: #939d92;
  vertical-align:top;}
#sidebar {
  display: table-cell;
  vertical-align:top;
  width:220px;
  border-left:2px solid #505c5a;
  background-color: #fff;
  padding:5px 0 10px 0;
  }
#artikel{
  display: table-cell;
  padding-right: 20px;
  vertical-align:top;}
#outer {
  display:table;
  border-collapse:collapse;  }

IE7 Stylesheet'et

Det kan godt lade sig gøre at lave et stylesheet til IE6/7 der bygger på float-mekanismen. Det har jeg ikke haft lyst til at sysle med, så jeg nøjes med gribe til at bruge position:absolute på #nav-spalten og sjusse mig til top-positionen.

<!--[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]--> 

Oprettet maj 2009