Webdesign 101 demoside

CSS layout

Simpelt 1-spaltet layout med navigationsbjælke

I dette eksempel er der kun sket en formatering af navigationsbjælken. Det færdige layout ses i eksempel 1.

Dette er et layout enhver kan lave på et øjeblik. Det kan naturligvis med passende anvendelse af farver og grafiske elementer i forgrund og baggrund laves adskilligt mere visuelt attraktivt. Et spinkelt forsøg på noget sådant ser du i eksempel1a.html. Websiden Noter om baggrundsgrafik giver dig en del tips om dette emne.

Dette layout er uhyre robust overfor brugerens ændring af websiden ved brug af skriftstørrelsesværktøjet eller zoom-værktøjet i hendes browser. Denne robusthed er opnået ved at anvende et minimum af målsætning af elementerne, og hvor de er målsat, er det i videst mulig udstrækning gjort ved hjælp af em-størrelser.

HTML-kildekoden

<div id="side">
  <div id="sidehoved">
  [ Sidehovedets indhold ]
  </div>
  <div id="navbar">
  [ Menukode ]
  </div>
  <div id="indhold" class="clear">
  [ Artikeltekst ]
  </div>
  <div id="sidefod">
  [ Sidefodens indhold ]
  </div>
</div>

Som du ser af ovenstående består HTML-kildekoden af 4 div-elementer, der alle er omsluttet af elementet div#side. Dette giver mig mulighed for dels at sætte en bredde på indholdet, og dels at centrere indholdet.

Bemærk, dersom du kigger på kildekoden til denne side ved hjælp af browserens Vis kilde funktion, at sidefodens indhold ikke står i klar tekst, men er indsat ved hjælp af et ekstern JavaScript. Det er for at forhindre phishing, det vil sige (yderligere) høst af min e-mail adresse. Du kan i min artikel “Undgå phishing” læse mere om dette emne. Her påpeger jeg blot at dette eksterne JavaScript omfatter endnu en HTML-markør, nemlig address-markøren, som således også skal formateres.

Stylesheet koden

/* Universalværdier for diverse elementer */
html, body {margin:0;padding:0;border:0;}
body {
  font-family:georgia,arial,sans-serif;
  background-color:#fff;}
ul, ol, dl, h3, h4, p { margin:0 0 0.5em 0;padding:0;line-height:100%;}
ul,ol { margin-left:1.5em;}
p {line-height:120%;}
/* Sidelayout */
div#side{
    width:40em; 
    margin:1em auto;}
div#sidehoved {
    margin: 0;
    padding: 0; }
div#sidehoved, div#sidefod {
    font-family:arial,sans-serif;
    color:#eee; }
div#sidehoved h1 {
    margin:0;
    background-color:#257;
    font-size:1.6em;
    padding-top:.6em;
    padding-bottom:.3em;
    padding-left:.6em;}
div#sidehoved h2 {
    background-color:#257;
    font-size:1.2em; 
    padding-left:0.8em; 
    padding-bottom:0.5em;
    margin:0;}
div#sidefod {
    margin: 0 auto;
    background-color:#225577;
    padding:0.5em 1em;}
div#indhold {padding-top:1.5em;margin:0;}
div#sidefod address {font-size:90%;font-style:normal;}
div#sidefod address a {color:#fff;}
div#sidefod address a:visited {color:#ccc;}

Navigationsbjælken

Grundlæggende er navigationsbjælken blot endnu et div-element blandt de øvrige, kun forskelligt fra disse ved sit indhold af links til ander sider. Dette kan sagtens laves som én linie – et tekstafsnit indeholdende en serie tekstlinks efter hinanden.

I dette eksempel er jeg dog gået et skridt videre og har oprettet mine links som en uordnet liste:

<div id="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gen/">Generelt</a></li>
<li><a href="/design/">Design</a></li>
<li><a href="/css/">Stylesheets</a></li>
<li><a href="/javascript/">JavaScript</a></li>
<li><a href="/navigation/">Navigation</a></li>
<li><a href="/dhtml/">DHTML</a></li>
</ul>

Det er for mig helt logisk at bruge ul-markøren til strukturformatering af en liste af links, som jo netop er ... en liste.

Stylesheet-formateringen af en sådan liste, så den bliver til en vandret navigationsbjælke, har jeg skrevet en hel del mere om på websiden Introduktion til stylesheet-formaterede menuer. Det er mit kvikfix-eksempel 3, der ligger tilgrund for den menu der er anvendt på denne eksempelside.

Bemærk endelig om denne sag, at det er nødvendigt af hensyn til Internet Explorer at indsætte et ekstra lille stylesheet på din webside ved hjælp af Microsofts betingede kommentarer:

<!--[if IE]>
<style type="text/css" media="screen">
div#navbar ul li {display:inline;}
</style>
<![endif]-->

Dette er den måde, vi bruger for at passere særlige stylesheet formregler til Internet Explorer, når denne browser anvender en anderledes fortolkning af stylesheet formreglerne end alle andre browsere. I det aktuelle tilfælde vil udeladelsen af dette lille ekstra stylesheet betyde, at Internet Explorer indsætter et linieskift efter hvert menupunkt.

Du kan læse mere om denne metodik i artiklen Microsoft betingede kommentarer.

22. maj 2007