Bjørn Enki professional website design offers custom website design services internationally, with a focus on Los Angeles website design.

Please note: This page is a norwegian translation of the World Wide Web Consortium's page on "CSS tips & triks: a confetti menu". This translation was written by Bjorn Enki, and may contain translation errors. For the original english version, please visit http://www.w3.org/Style/Examples/007/maps.

Vennligst bemerk: Dette er en norsk oversettelse av "CSS tips & triks: en meny med tabs" siden av the Word Wide Web Consortium. Denne oversettelsen er skrevet av Bjorn Enki, og inneholder muligens feiloversettinger. For den originale og oppdaterte versjonen (på engelsk), vennligst se http://www.w3.org/Style/Examples/007/maps.

Web Stilark
CSS tips & triks

(Denne siden bruker CSS stilark)

En meny med tabs

Den fargerike menyen du ser nedenfor er bare en DIV element med noen få P element inni. Den visuelle effekten skyldes at hver P element er plassert individuelt og har sin egen font og farge. Det fungerer best med kort tekst, fordi effekten er basert på overlapp, men hvis teksten er for lang, overlapper den så mye at det blir vanskelig å lese.

Dette stilarket lager en meny med opptil 10 elementer, eksemplet ovenfor bruker 8. Her er HTML koden til eksemplet ovenfor:

<div class="map">
<p id="p1"><a href="../../CSS/#news">What's new?</a>
<p id="p2"><a href="../../CSS/#learn">Learning CSS</a>

<p id="p3"><a href="../../CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="../../CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="../../CSS/#specs">Specs</a>
<p id="p6"><a href="../../CSS/Test">CSS1 Test Suite</a>

<p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

Legg merke til klassen "map" på DIV elementet, som gjør at den kan virke som en beholder til menyen. Også legg merke til ID egenskapene på P elementene. P elementene må alle ha en (annerledes) ID, for eks. p1, p2,... eller p10. Det er ikke nødvendig å bruke ID verdiene i numerisk rekkefølge (som demonstrert). Du kan bruke stilarket med å kopiere den til ditt eget stilark, eller med å bruke @import eller en LINK element for å importere map.css direkte fra W3C websiden: enten

@import "http://www.w3.org/Style/map.css";

eller

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

En forklaring om stilarket

Dette er hvordan stilarket fungerer. Det begynner med å definere en DIV element med klassen "map". Den lager et område som er 190px høyt som innholdet til P elementene kan plasseres inni. Hvert av elementene med IDer fra p1 til p10 gis deretter sin egen farge og font, og hvert element blir posisjonert inni området laget av DIVen med bruk av 'margin' egenskapen: en negativ 'margin-top' gjør at elementet flytter seg oppover i DIV området og en positiv 'margin-bottom' forsikrer at den neste P elementen også begynner på bunnen av DIV området.

(Svakheten til dette stilarket er at den gjør alt i px. Du må gjerne forandre det til prosenter i stedet, om du har en nettleser som implementerer CSS godt nok.

DIV.map {                        /* Reserve some room for the links */
  padding-top: 190px;
  margin-left: -2em;             /* Adapt this to your own page... */
  margin-right: -2em;            /* Adapt this to your own page... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* center left */

Du kan, selvfølgelig, forandre på stilarket for å prøve forskjellige fonter, farger, og posisjoner, eller for å lage ekstra stilregler for flere en 10 elementer. Ta også en titt på "left" (venstre) og "right" (høyre) margins (marginene) til DIV elementen: de er negative, slik at menyen blir bredere en omringede teksten, men i siden din er marginen kanskje ikke brede nok for dette, så du må kanskje fjerne disse reglene.

Om du prøver stilen, oppdager du kanskje at den ikke fungerer så bra i Netscape 4. Dette er Netscape 4 sin feil, selvfølgelig. Uansett, map-ns.css er et lignende stilark som ser ut til å fungere greit i Netscape 4. Ved å legge det følgene i <head>en av HTML dokumentet ditt kan både versjonen til Netscape 4 og versjonen ovenfor fungere sammen.

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Korrekte CSS implementeringer leser begge stilarkene, men reglene i det andre overskriver de første, så utenom litt ekstra arbeid har ingenting forandret. Netscape 4, derimot, laster ikke det andre stilarket, pga. "media" egenskapen, som den ikke oppfatter.

Du lurer kanskje også på hvorfor elementene blir posisjonert ved bruk av (negative) marginer, selv om det virker som om dette virker som en perfekt plass å ta i bruk "absolute" posisjoner. Du kan faktisk gjøre det samme med "position:absolute" og "left" & "right". Grunnen til at dette stilarket bruker marginer isteden er at på denne måten fungerer det i nettlesere som bare implementerer CSS1.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 5 May 2001;
last updated $Date: 2009/04/04 16:23:11 $ GMT