Webdesign 101 demoside

CSS layout

Simpelt 1-spaltet layout med navigationsbjælke

Det simplest tænkelige layout – en god øvelse i grundbegreberne i websidelayout med stylesheets.

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 eksempel 1a. 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:25px 0 0 0;margin:0;}
div#indhold h2 {margin-top:0;padding-top:0;line-height:100%}
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 andre 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.

Du kan downloade et stylesheet, layoutcommon.css, der er fælles for alle eksemplerne i denne sektion. Vær dog opmærksom på, at alle eksemplerne er forsynet med ekstra formdeklarationer, indlejret i sidernes head-del. Disse ekstra formdeklarationer er specielle for hvert eksempel, og er i enkelte tilfælde forholdsvis omfattende.

5/10/07: Et problem med navigationsbjælkens højde

Disse websider blev første gang uploadet 3. oktober 2007. Venlige sjæle gjorde mig hurtigt opmærksom på nogle fejl i visningen af et af eksemplerne, når browseren var Opera.

Disse visningsfejl knyttede sig til den vandrette navigationsbjælke øverst på siden:

  1. Denne havde fået en eksplicit højde på 25 pixel, hvilket skulle svare til højden af ul-elementets indhold. Det gør det bare ikke. Det er ikke nødvendigt at give den div, der indeholder menuen, en eksplicit højde medmindre ul'en float'es. I det aktuelle tilfælde bliver menu-div'en så høj som indholdet tilskriver. Slut.
  2. Imidlertid left-floates menuens a-elementer, uden at disse elementer har en eksplicit bredde. Det må man ikke. Jeg har bare i årevis gjort det ustraffet alligevel i den slags navigationsbjælker. Nu viser det sig at Opera (Opera 9) ene ud af alle moderne browsere (som jeg har adgang til at bruge) float'er det efterfølgende element op på "højre side" af a-elementerne. Da summen af disse er mindre end bredden af den div, der indeholder menuen, kommer det til at se helt tosset ud.
  3. Derfor har jeg indsat et clear'ing element i div#navbar-elementet, der sørger for at skubbe underkanten af dette element så langt ned, at menuen netop kan rummes deri.

Ønsker du ikke at gøre noget man ikke må – det vil sige lave en float uden bredde – er opskriften på en korrekt kodet navigationsbjælke at sætte en eksplicit bredde på hver a-element i menuen.

Om lodrette afstande og vandrette marginer

I et layout som dette betyder den lodrette afstand – skydningen, som det hedder, leading på engelsk – ikke så forfærdelig meget, men på den anden side skal du jo have en fornemmelse af hvordan “det hvide” mellem de enkelte tekststykker bliver formet.

Det gælder ikke mindst i eksempel 2 og følgende, hvor vi gerne have at to spalter skal holde register – det vil sige at spalternes overkanter skal flugte.

Jeg skriver en hel om dette i artiklen Noter om websidelayout, så jeg vil her nøjes med at repetere nogle relevante fakta om tekstelementers højde:

  1. Hvis du ikke giver et element en eksplicit højde (for eksempel
    div#sidehoved {height:30px;})
    får elementet den højde, som indholdet tilsiger.
  2. Den synlige højde af et tekstelement bestemmes – foruden af font-size af følgende størrelser: border-top, padding-top, padding-bottom og border-bottom samt line-height.
  3. Den lodrette afstand mellem to tekstelementer bestemmes af margin-top og margin-bottom. Marginer mellem to elementer, der følger efter hinanden i websidens omløb, kollapser, der vil sige at af margin-bottom på et element og margin-top på et efterfølgende element vil afstanden mellem elementer blive som den største (bredeste) af de to marginer.
  4. Du må regne med, at forskellige browsere påtrykker tekstelementer forskellige marginer og padding. Det er derfor sikrest at sætte alle marginer og padding eksplicit, for eksempel p {margin:0 auto 0.5em auto;padding:0;}.
  5. Floatede elementer skal clear'es for at hindre at efterfølgende elementer flyder op på siden af det eller de float'ede elementer og for at de kan opnå en iboende højde. (Bemærk at navigationsbjælkens indhold af links er left-float'et).

5. oktober 2007