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

Float-layout med variabel bredde

Jeg bygger videre på de foregående eksempler for at præsentere endnu et tospaltet layout, i dette eksempel med en variabel bredde på websiden samt en venstrestillet menuspalte.

Venstrestilling af navigationsspalten opnås hurtigst og nemmest ved at sætte denne spalte først i kildekoden (i forhold til artikelspalten) og dernæst ændre en smule på de formdeklarationer, der vedrører disse elementer.

Herefter ser HTML-kildekoden til de relevante dele af layout'et ud som følger:

<div id="side">
  <div id="banner">
  [ Sidehoved ]
  </div>
  <div id="container">
    <div id="indhold">
      <div id="nav">
      [ Menu og andet indhold i venstre spalte ]
      </div><!-- /nav -->
      <div id="artikel">
      [ Artikelindhold ]
      </div><!-- /artikel -->
    </div><!-- /indhold -->
  <div class="clear"> </div>
  </div><!-- /container -->
  <div id="sidefod">
  [ Sidefodstekst ]
  </div><!-- /sidefod -->
</div><!-- /side -->

Den eneste forskel på ovennævnte HTML-kildekode i forhold til de to foregående eksempler er ombytningen af rækkefølgen på #indhold- og #nav-elementerne.

Ændringen af stylesheet-koden er næsten lige så enkelt: den består simpelt hen i at erstatte ordet left med right og omvendt:

div#indhold {
  width: 100%;
  float: right;
  margin-left: -200px; }
div#artikel {
  margin-left:220px;  }
div#nav {
  width: 200px;
  float: left; 
  background-color:#939d92;}

Logikken er præcis den samme som beskrevet i eksempel 1.

Variabel sidebredde

Bemærk at bredden af siden i dette eksempel varierer med bredden af browservinduet. #side-elementet, der omslutter alt indhold på siden, ser i dette eksempel således ud:

div#side {
  width:95%;
  max-width:63em;
  min-width:760px;
  ...}

De tre prikker til sidst henviser til de egenskaber for dette element som i øvrigt er sat i det globale stylesheet for disse sider, se informationsboksen i venstre spalte.

I klart sprog betyder denne formdeklaration, at sidens indhold skal være 95 procent af browservinduets bredde, men at bredden ikke må overstige 63 em (ca. 1000 pixel ved normal skriftstørrelse) og ikke må blive mindre end 76o pixel, som er den bredde jeg har anvendt i de foregående eksempler.

Angående sidefoden

Kigger du på kildekoden til dette eksempel ved hjælp af browserens Vis kilde funktion vil du se forgæves efter HTML-koden til sidefoden. Sidefoden genereres i disse eksempler af noget DOM JavaScript. Det er en metode til at skjule sidefodens oplysninger, så de ikke kan høstes af phishing teknikker. Er du interesseret i hvordna det gøres kan du downloade mit JavaScript: JavaScript kildekode til sidefod.

Artiklens linjelængde

I foregående afsnit har jeg markeret de første 67 tegn med en graa baggrund for at illustrere, at linjelængden i dette eksempel er lige lovlig lang. Det er ikke komfortabelt at læse linjer på over 60-65 tegn, især ikke når afstanden mellem linjerne ikke er forøget ved brug af line-height-egenskaben.

Faktisk er en bredde på omkr. 500 pixel på artikeldelen af siden mere passende. I forhold i til sidens maksimale bredde på ca. 1000 pixel giver dette så rigeligt plads til en tredje spalte. Herom handler eksempel 4.

Oprettet april 2009