Beskrivning av design

Inledning

Webbsidor i detta exempel består av sju delar, varav två är s.k. containers, d.v.s. innehåller inget synligt innehåll utan används för uppbyggnad av webbsidor. Dessa sju delar motsvarar varsin DIV-tagg och är följande:

  • Sidcontainer - innehåller övriga delar i denna lista
  • Sidhuvud - innehåller rubrik ovan
  • Kolumncontainer - innehåller de tre kolumnerna nedan
  • Meny (kolumn 1) - innehåller menyalternativ till vänster
  • Innehåll (kolumn 2) - innehåller den text du läser nu
  • Länkar (kolumn 3) - innehåller länkar till höger
  • Sidfot - innehåller dokumentinformation nedan

Ska inte sidhuvud och sidfot användas så kan dessa plus en container tas bort, men de är praktiska då de skapar en inramning av innehållet.

Sidstruktur

Dokumentets struktur, d.v.s. dess innehåll, är den samma som ordningen på delarna ovan, d.v.s. dokumentet börjar med sidhuvud följt av meny, innehåll, länkar och sidfot. Skälet till detta är att om någon skulle titta på webbsidor utan stöd för CSS så kommer dokumentet ändå vara läsbart och någorlunda bra strukturerat.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  ...
</head>
<body>
<div id="container">
  <div id="header">
    <h1>Exempel: Tre kolumn-design (Björns studiewebb)</h1>
  </div>

  <div id="columns">
    <div id="menu">
    </div>

    <div id="content">
    </div>

    <div id="links">
    </div>
  </div>

  <div id="footer">
  </div>

</div>
</body>
</html>

Sidcontainer

Designen bygger på en övergripande container, eller sidcontainer (DIV-tagg med id "container"), som bl.a. används för att centrera innehåller i sidan, men även för bakgrundsfärgen. Container har en minsta (min) och största (max) bredd på 800 respektive 1000 pixlar och marginaler erhålles genom att ange vänster- och högermarginal som automatiska (auto). Denna container innehåller övrigt innehåll i webbsidan och används för design.

För att visa marginaler, maximera webbläsarens fönster eller öka på bredden på fönstret. Minsta och största bredd på webbsida syns genom att studera radlängder i denna text när fönsters bredd minskas.

div#container
{
  min-width: 800px;
  max-width: 1000px;
  margin-right: auto;
  margin-bottom: 300px; /* Sa att lankar i dok. verkar fung. battre(?) */
  margin-left: auto;
  background-color: gray;
  color: white;
  border: 1px solid #000000;
}

Sidhuvud

Nästa del är sidhuvudet med rubriken för webbsidan. (I detta exempel är det inget speciellt med detta... den används för att centrera rubriken. :-)

div#header { text-align: center; }

Kolumncontainer

Denna container, kolumncontainer (DIV-tagg med id "columns"), används för att kunna positionera menyn och lista med länkar (se mer nedan). För att detta ska fungera så använder containern relativ positionering, d.v.s. den kan användas för att positionera s.k. barnelement - element som innesluts av container. Containern börjar efter sidhuvudet och slutar vid sidfoten. Denna container innehåller de tre kolumnerna i webbsidan och används för design. (Utan sidhuvud och sidfot så är denna container överflödig, d.v.s. det hade räckt med sidcontainern.)

div#columns { position: relative; }

Meny och länkar

Meny (kolumn 1) och länkar (kolumn 3) har samma egenskaper, d.v.s. fungerar och ska se ut på lika sätt. Det som skiljer dem åt är att den ena är positionerad till vänster och den andra till höger (samt dess innehåll :-).

Både meny och länkar använder absolut positionering, relativt kolumncontainer, samt har en angiven bredd (175 pixlar). Meny är positionerad 0 pixlar från vänster och övre marginal medan länkar är positionerad 0 pixlar från höger och övre marginal.

Listor med alternativ i meny och länkar "snyggas till " sist.

div#menu, div#links
{
  position: absolute; /* Pos. rel. kolumncontainer */
  width: 175px;
  padding: 0px 5px;
  top: 0px;
}

div#menu { left: 0px; }

div#links { right: 0px; }

/*** Snygga till listor for meny och lankar ***/

div#menu ul, div#links ul
{
  list-style: none;
  padding-left: 10px;
}

div#menu a, div#links a
{
  color: white;
  background-color: gray;
  text-decoration: none;
}

div#menu a:hover, div#links a:hover
{
  color: white;
  background-color: #c0c0c0; /* light grey */
  text-decoration: none;
}

Innehåll

I detta exempel används ingen positionering för innehållet (DIV med id "content") - här används det naturliga flödet i dokument (uppifrån och ner). Vi måste dock kompensera för bredden på de positionerade delarna meny och länkar, vilket görs genom att ge innehållet en vänster- och högermarginal som motsvarar bredden på meny respektive länkar (185 pixlar i detta fall, 175 pixlar för deras bredd samt ytterligare 5 + 5 pixlar för deras utfyllnad, eng. padding). Vi "kompenserar" även för bakgrundsfärgen i sidcontainer, d.v.s. anger svart text och vit bakgrund för innehållet.

Eftersom innehållet är just innehållet i webbsida (d.v.s. kommer bestå av många olika saker) så är det innehållet som de flesta stilmallar kommer att gälla för. Många stilmallar i detta exempel använder id för respektive DIV-tagg (t.ex. div#content och div#footer) för att begränsa vad stilmallar gäller för. (Bra eller dåligt? Man slipper i.a.f. att använda så många klasser. :-)

div#content
{
  margin-left: 185px;
  margin-right: 185px;
  border: 1px solid blue;
  padding: 0px 10px;
  color: black;
  background-color: white;
}

/*** Snygga till innehall ***/

div#content p, div#content li { text-align: justify; }

div#content a:hover
{
  color: blue;
  background-color: yellow;
}

div#content p.tillborjan { text-align: right; }

div#content ul.liggande { list-style: none; }

div#content ul.liggande li { display: inline; }

div#content .code
{
  color: black;
  background-color: #ffff99;
  font-family: monospace;
}

div#content div.code { margin: 0px 10px; }

Sidfot

Precis som med sidhuvudet så är inte sidfoten något speciellt med, används främst för att centrera text samt minska dess textstorlek en aning.

div#footer
{
  font-size: 0.8em;
  text-align: center;
}

Till början på sida