Modellayout august 2006

Layout med både fikseret og flydende bredde

Der kan være nogen diskussion om den rette måde at bestemme en websides bredde på: Nogle siger, at bredden af websidens indhold skal indrette sig proportionalt med browservinduet; andre siger, at bredden skal være fikseret.

Der er dét tiltalende ved den første holdning, at det helt er overladt til brugeren og hendes browser, hvor bred websiden skal være og dermed, hvor lange tekstlinierne skal være.

På den anden side er der dét, der taler for den fikserede bredde, at brugeren med det samme får det tilstræbte indtryk af sidens proportioner, igen ikke mindst linielængden, uanset hvilken størrelse hendes monitor har og uanset hvilken bredde, hendes browservindue har.

Jeg indrømmer, at jeg i årevis har stået med et ben i hver lejr, uden definitivt at kunne beslutte mig for det ene eller det andet.

Så hvorfor ikke overlade valget til brugeren? kom jeg – noget sent – til at spørge mig selv.

Skift bredde

Ved hjælp af den teknik, jeg beskriver i artiklen Brugervalgte stylesheets er det ganske let at indrette det således, at brugeren ved et klik på en knap vælger enten den fikserede bredde eller den flydende bredde, jf. de to knapper i højre kolonne på denne side.

Grundlayout'et

– er baseret på mit Float layout eksempel 6. Den grundlæggende html-kode til siden er:

<div id="page">
  <div id="banner">
  </div>
  <div id="wrapper" class="clearfix">
   <div id="container">
      <div id="indhold">
      </div><!-- Slut indhold -->
  </div><!-- Slut container -->
  <div id="menuspalte">
  </div><!-- Slut menuspalte --> 
  </div><!-- Slut wrapper -->
  <div id="footer">
  </div><!-- Slut footer -->
</div><!-- Slut page -->

Alt sidens indhold befinder sig inde i #page-elmentet, som jeg herefter kan bruge til at styre den samlede bredde. I øvrigt består siden af et sidehoved, en artikel- og menudel og en sidefod. Sidehovedet (#banner-elementet) har en fikseret højde. Navigationsbjælken er indsat til sidst i kildekoden som et absolut positioneret element.

Herefter følger et #wrapper-element, hvis eneste formål er at være referenceramme for de to float'ede elementer, der skal indeholde dels artiklen og dels sektionsmenu, reklamer og resumeer og den slags.

Stylesheet

De layoutmæssige dele af stylesheet'et er følgende:

#banner {
  height:120px;
  overflow:hidden;
  ... }
#banner h1 {
  ... }
#banner h1 span {
  ... }
#banner h2 {
  ...}
#container {
	width: 100%;
	float: left;
	margin-right: -30%;}
#indhold {
  margin-right: 30%;
  padding-top:20px;
  ... }
#menuspalte {
  width: 28%;
  float: right;
  padding-top:40px;
  ...
}

Bemærk her, at formdeklarationen for #page-elementet mangler. Den formdeklaration indgår i to forskellige stylesheets, layoutnormal.css:

div#page { width:45em;margin:1em auto; 
  position:relative;}

og layoutbred.css:

div#page { width:90%; max-width:62em;margin:1em auto; 
  position:relative;}

Al formatering og layout af siden undtagen de to ovennævnte formdeklarationer, foregår nu via indlæsningen af stylesheet'et common.css, hvis indhold er

@import url([sti]layout.css);
@import url([sti]navbarstyles060521.css);

– et ganske almindelige stylesheets med alle formdeklationer vedr. denne side (layout.css) og nogle supplerende formdeklarationer, der vedrører de individualiserede bredder på undermenuerne i navigationbjælken .

Navigationsbjælken er ellers den UDM-menu, jeg reklamerer for i menuspalten til højre, efter min mening det bedste moderne menusystem, der findes. Formateringen af denne menu er i øvrigt nedlagt i i nogle Arrays i en INI-fil, der aflæses af PHP-scriptet udm-style.php, der i sin tur genererer stylesheet'et for menuen.

Ved hjælp af det JavaScript, jeg beskriver i ovennævnte artikel om “Brugervalgte stylesheets” er det nu en forholdsvis enkel sag at indlæse enten det eller det andet af de to korte stylesheets, der sætter bredden på #page-elementet.

Hvorfor 45em?

Jeg sætter den fikserede bredde af #page-elementet til en em-bredde. Det har den fordel, at den fikserede bredde ændrer sig i takt med brugerens instilling af browserens tekststørrelsesværktøj, således at linielængden forbliver nogenlunde den samme. 45 er valgt fordi 45em på de fleste almindeligt brugte monitorer translaterer til en pixelbredde på ca. 720 pixel. Artikeldelens bredde er 70 procent af #page-elementets bredde, hvilket svarer til ca. 33 em. Med den valgte skrift giver det en meget passende linielængde på ca. 65 tegn.

Denne side er senest opdateret: 27. December, 2006