1. Webdesign 101 forside
  2.  » Avanceret float-layout

Brugervalgt layout

I resuméspalten kan du nu se en lille menu med tre valgmuligheder. Et klik på et af punkterne medfører at der skiftes stylesheet, således at den egentlige artikel vises henholdsvis højrestillet, midtstillet eller venstrestillet.

Det kan lade sig gøre, fordi HTML-koden i dette eksempel er identisk med HTML-koden i eksempel 4, eksempel 5 og eksempel 6. Den eneste forskel i de tre eksempler er stylesheet formdeklarationerne for websidens hovedelementer.

Teknikken til stylesheet switching har jeg beskrevet i artiklen Brugervalgte stylesheets.

HTML kildekode

Kildekoden til dette eksempel er som nævnt den samme som i de foregående eksempler. For en ordens skyld gengives den her:

<div id="side">
  <div id="banner">
  [ Sidehoved indhold ]
  </div>
  <div id="container">
    <div id="indhold">
      <div id="nav">
      [ Menupanel ]
      [ plus evt. andet indhold i 
        navigationskolonnen ]
      </div><!-- /nav -->
      <div id="sidebar">
      [ Sidepanel indhold ]
      </div><!-- /sidebar -->
      <div id="artikel">
      [ Artikel ]
      </div><!-- /artikel -->
    </div><!-- /indhold -->
    <div class="clear"> </div>
   </div><!-- /container -->
   [<div id="sidefod">
   [ Sidefodens indhold ]
   </div>
</div><!-- /side -->

Ovenstående kan måske virke en smule uoverskueligt for den mindre erfarne websidekonstruktør, så her er en kortfattet gennemgang af de principper, der er i spil:

  1. For det første er alt indhold på siden indeholdt i en div med en id="side". Det giver mig fuldstændig kontrol over sidens bredde. Denne er 95 procent af browservinduets bredde, med en max-width på 1000 pixel. Det giver en passende margin til venstre og højre, når siden vises i et 1024 pixel bredt browservindue.
  2. #side-elementet indeholder sidens tre hovedelementer, nemlig sidehoved (#banner), den trespaltede indholdsdel (#container) og sidefoden. Den sidste kan du ikke se i kildekoden, da den på mine nyere sider genereres af et JavaScript. Se mere herom i sidepanelet.
  3. #container-elementet indeholder tre float'ede elementer, navngivet med hver sin id, der er sigende for indholdet. nemlig #nav, #sidebar og #artikel. Bemærk her at den orden hvori disse elementer er indsat i kildekoden har betydning for den tilstræbte funktionalitet.
  4. Bemærk også mit lille trick med indsatte kommentarer for hver afsluttet div. Når der er så mange af slagsen, og når det har aldeles afgørende betynding at de bliver afsluttet i den rette orden, er det helt nødvendigt at være sikker på hånden.
  5. Bemærk endelig clear'ingen af #container-elementet lige før det afsluttes. Om nødvendigheden af dette har jeg skrevet en særskilt artikel, Float wrapping.

Skift stylesheet

Ideen er nu at en læser ved hjælp af de tre knapper i sidepanelet skal kunne vælge mellem de tre forskellige visningsmodeller for denne side. De knapper tegnes af følgende HTML-kode:

<ul class="sidebarmenu">
<li><a href="#" 
onclick="chooseStyle(0);return false;">
Højrestillet artikel</a></li>
<li><a href="#" 
onclick="chooseStyle(2);return false;">
Midtstillet artikel</a></li>
<li><a href="#" 
onclick="chooseStyle(1);return false;">
Venstrestillet artikel</a></li>
</ul>

Et klik på en af knapperne udløser et JavaScript funktionskald, der passerer et argument til det eksterne JavaScript, der så indlæser det stylesheet, der svarer til dels beskrivelsen i knappen og dels til det tal, der passeres som argument. Scriptets udformning er som nævnt beskrevet i artiklen Brugervalgte stylesheets.

Stylesheets

Det der er interesant her er naturligvis udformningen af disse tre stylesheets, der skaber så forskellige layouts.

For at skille det interessante ud fra det mere banale, deler alle tre udformninger to fælles stylesheets, common.css (tekstformatering) og cssmenu.css (formatering af menuen), mens de tre styleshets, der skaber de tre layouts, er hhv. lstyle.css, mstyle.css og rstyle.css. Disse omfatter som nævnt de egenskaber, som er særlige for de tre forskellige layouts, og som er forklaret i eksempel 4, eksempel 5 og eksempel 6.

Konklusion

Hvis du er i tvivl om, hvorvidt dine websider skal struktureres som smal-bred-smal, small-smal-bred eller bred-smal-smal, kan du overlade det til dine læsere at beslutte, på hvilken måde de helst vil beskue dine websider.

Foretrækker du et tospaltet layout kan det her beskrevne princip let omsættes til kun at omfatte to spalter. Du skal blot tage udgangspunkt i eksempel 2 og eksempel 3 i stedet for de trespaltede layouts jeg bruger som udgangspunkt for denne artikel.

Oprettet oktober 2009