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

Web Stilark
CSS tips & triks

(This page uses CSS style sheets)

Please note: This page is a norwegian translation of the World Wide Web Consortium's page on "CSS tips & triks: pinned-down menus". 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/menus.

Vennligst bemerk: Dette er en norsk oversettelse av "CSS tips & triks: fikserte menyer" 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/menus.

En fiksert meny

Menyen som du ser i toppen og til høyre av siden er bare en DIV med noden A elementer inni. Det som gjør at den forblir i samme plassen er regler i stilarken. Her er den samme koden som blir brukt i denne siden:

<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a href="../../../Consortium/Activities">Aktiviteter</a>
<a href="../../../TR/">Tek.&nbsp;rapporter</a>

<a href="../../../Help/siteindex">Innholds-<br >fortegnelse</a>
<a href="../../../Consortium/Translation/">Oversettelser</a>
<a href="../../../Status">Programvare</a>
<a href="http://search.w3.org/">Søk</a>
<em>Nearby:</em>

<a href="../../">Stil</a>
<a href="../../CSS/">CSS</a>
<a href="./">tips&nbsp;&amp;&nbsp;triks</a>
</div>

I nettlesere som ikke støtter CSS, eller med CSS skrytt av, blir denne siden vanlige paragraf med linker. Men, takket være CSS reglene nedenfor, kommer menyen til å "float" (flyte), fiksert oppe i høyre hjørnet av vinduet:

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

Den interessante regelen her er 'position: fixed', som gjør at DIV elementet forblir på samme plass på skjermen, og 'display: block', som gjør at A elementene inni DIV elementet om til "block" element, og derfor fremstilt nedenfor hverandre, istedenfor på samme linje.

Vær forsiktig med rekkefølgen på de siste tre reglene. All tre har den samme prioriteten, så den siste som henvender seg avgjør fargen. Dersom musa svever over linken, vil man at :hover skal henvendes, så den må være sist.

Resten, marginene, kanten, fargene, osv. kan fjernes eller forandres som man ønsker. Bemerk, likevel, hvordan reglene mellom linkene: det finnes to kanter ovenfor alle linkene, utenom de første, takket være regelen ':first-child'. Et par slike regler (border-top på alle element i tillegg til border 'none' på den første "child") kan være veldig nyttige for å lage kanter mellom elementer.

(Dersom du faktisk ser på stilarkene som er linket til fra denne siden, banner-k.css og banner.css, ser du noen ytterlige regler som ser ut til å motsi hverandre. Disse reglene er for å beskytte imot bugs i visse gamle nettlesere. Nemlig, i banner-o.css, er "banner" gjemt og i banner.css er den fremstilt som "block" element. Dette gjør slik at den blir gjemt i Netscape 4, fordi Netscape 4 ignorerer @import regler slik som den av banner.css.)

FAQ: IE 5 & 6 på Windows?

Om du ser på denne siden med Microsoft Internet Explorer 5 eller 6 på Windows ("WinIE5" og "WinIE6"), merker du nok at denne siden ikke fungerer som forventet. I alle fall ikke nå i September 2002. Jeg får mange spørsmål om dette, så her er en liten forklaring. Den korte versjonen er: buggen er i nettleseren, ikke i denne siden.

WinIE5 og WinIE6 implementerer ikke 'fixed' enda. Dette er uheldig, men et større problem er at de også ikke takler 'position' egenskapen riktig. En nettleser som ikke takler 'fixed' burde glemme regelen 'position:fixed' og falle tilbake på den forrige verdien til 'position' egenskapen i stilarket. Vi kunne da tillegge 'position:absolute' like før 'position:fixed', så ville nettleseren brukt den isteden. Men i WinIE 5 og 6 er det dessverre ikke dette som skjer. Tydeligvis blir 'fixed' på en eller annen måte oppfattet som 'static'.

Man kan ikke tvinge WinIE5 og 6 til å støtte 'fixed', men det finnes en måte å jobbe rundt dette problemet. Johannes Koch varslet meg om dette trikset (fra hans samling av "work-arounds"). Først bytter man 'position: fixed' i stilarken med 'position: absolute', deretter legger man regelen nedenfor til stilarken under dette:

body>div.banner {position: fixed}

(Dersom DIV.banner er inni et element utenom BODY, bytt ut BODY med dette elementet.) Resultatet er at nettlesere som kan med '>' (child) selektoren til CSS bruker denne regelen, mens nettlesere som ikke takler den, spesielt WinIE5 og WinIE6, ignorerer den. Regelen 'position: absolute' blir brukt isteden og menyen havner i alle fall på rett plass, selv om den ikke forblir fiksert nå man skroller.

Det er viktig at man ikke har mellomrom rundt '>' tegnet.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 17 Jan 2001;
Last updated $Date: 2009/04/04 16:23:11 $ GMT