Menu bevares

[Jan]

Jeg har først nu bemærket den meget smarte funktion, hvor menu linien bevares for oven når man bladre nedad på siderne her på Hjørnet.

Er den funktion noget du vil fortælle vi andre om. Jeg vil da meget gerne "stjæle" den.

Hvis det er meget nørdet så lad være med, at skrive en lang forklaring.

[Kim Ludvigsen]

Den er lidt speciel, fordi jeg reelt gemmer den fastlåste menu bag logoboksen og dens tilhørende menu. Når logoboksen rulles op, bliver den skjulte menu synlig.

Jeg har benyttet to css-funktioner:
Fastlåsning af elementer
Lag

Opskriften er nørdet, og jeg vil kun hjælpe dig delvist. Nedenstående fastlåser såvel din logoboks som din menu, så de altid er synlige. Det med den skjulte menu, må du selv ind i min kode og stjæle, hvis du vil have helt den samme funktion. Bemærk, at ændringerne sker i css-editoren, så den vil virke på alle dine sider. Bemærk også, at det ikke virker i IE6 - og jeg tør ikke sige, hvordan nedenstående vil se ud i IE 6, så gem en kopi af din nuværende css-fil, inden du ændrer noget, så du altid kan vende tilbage.

Åbn en af siderne i KompoZer => åbn css-editoren =>

markér stilreglen logo => klik på fanen Boks => vælg fast ud for Position => skriv 5 ud for Z-indeks =>

klik på stilreglen menu => vælg fast ud for Position => skriv 5 ud for Z-indeks => skriv 75px ud for Afstand, Top =>


klik på stilreglen indhold => skriv 1 ud for Z-indeks => skriv 95px ud for Afstand, Top

[Jan]

Mange tak for svaret.

Jeg har kigget lidt på det, og må se i øjnene at en kande kaffe og en pakke smøger ikke er nok til at få det til at virke.

Nu vil jeg prøve at makke med det. Senere vender jeg tilbage enten som et skrydende æsel, eller med en masse gode undskyldninger for, hvorfor det mislykkes.

Håber jeg kan få svar på bare et bette spørgsmål. Skal jeg ikke have en stil der hedder fastmenu?

[Kim Ludvigsen]

Nej, ovenstående guide laver ikke den "skjulte" menu-bjælke, og det er på den skjulte menu, jeg bruger fastmenu på min side.

[Jan]

Nej, ovenstående guide laver ikke den "skjulte" menu-bjælke, og det er på den skjulte menu, jeg bruger fastmenu på min side.

Det prøvede jeg nu alligevel.

Jeg har bakset meget med det, og stjålet fra hjørnet. Nu virker skidtet i FF2, dog med en lille skønhedsfejl foroven.

Med IE6 virker det ikke, men det havde Kim sagt. Samtidig vises menuen to gange.

Nu skal jeg bare have fundet ud af, hvordan det virker i andre browsere. Jeg tror nemlig, at jeg vil se stort på fejlen i IE6 hvis det er i orden i andre.

Resultatet kan ses her: http://janss.dk/

[Kim Ludvigsen]

Koden virker i alle nyere browsere, heriblandt Firefox, Opera og IE7.

For at skjule den ekstra menu i IE6 (og ældre IE'er) skal du indsætte dette lige foran <div class="fastmenu">:

<!--[if lt IE 7]>
<div style="display:none;">
<![endif]-->

Og dette lige efter div'en med fastmenu, altså lige før <div class="menu">:

<!--[if lt IE 7]>
</div>
<![endif]-->

Det betyder, at alt mellem de to koder (i dette tilfælde fastmenuen) vil være usynligt for alle Internet Explorer, der er ældre end IE7.

[Jan]

Mange tak Kim. De andre steder IE6 ikke skal læse er det IE6 som er angivet. Bare lige for at være sikker. Har du skrevet forkert, eller mener du IE 7?

[Kim Ludvigsen]

Du skal selvfølgelig regne med, hvad jeg skriver - undtagen, når jeg skriver noget forkert

I dette tilfælde har jeg ikke skrevet forkert.

Læg mærke til, at der står "lt IE 7", lt står for "less than" (mindre end). Det betyder, at alle IE'er mindre end version 7 ignorerer koden.

I den anden kode står der "!IE 6", ! betyder not (er ikke). Det betyder, at koden kun ses af andre versioner end IE6.

Bemærk, at her har vi den omvendte virkning. I den første kode ignores indholdet mellem koderne af den/de angivne IE'er, i den næste virker det kun i den/de angivne IE'er.

Det er også muligt at benytte fx "gt IE 6", gt står for "greater than" (større end), og det vil få alle browsere nyere end IE6 til at ignorere koden.

[Jan]

Mange tak.

Jeg regnede heller ikke med at det var forkert. Faktisk har jeg ændret alle siderne, så hvis det havde været forkert skulle jeg igennem dem igen.

Jeg er meget glad for at du fortalte betydningen. Nu kan jeg langt om længe forstå, hvad der menes med koderne.

[Jan]

Jeg har gjort en pudsig iagttagelse, som jeg vil dele med dem der vil vide det.

Fastmenu virker perfekt i Opera og Safari med tekst og billeder. Så snart der kommer et filmklip, ruller det over den faste menu. Nu har jeg angivet z-indeks til 1. Selv om jeg ændrer det til 2 eller 3 kører filmen stadig over menuen.

Men pyt, det er der plads til inden for bagatelgrænsen.

[Kim Ludvigsen]

Du har en lille fejl i IE7 og til dels også i de andre browsere. Den faste menu kan ses øverst bag logoboksen (halvdelen af menuen er synlig i IE7).

Prøv at gå ind i css-editoren. Stilklassen logo har en afstand på 5px for top-margin, prøv at ændre det til 0px. Stilklassen side har i øjeblikket ent top-margin på 5px, prøv også at ændre den til 0px.

[Jan]

Mange tak. Det er gjort.

Jeg vidste godt at der var den skønhedsfejl, og har makket en del med den.

Syntes du ikke det er noget underligt noget, det med at film kører over menuen i Opera og Safari? (Det er ikke noget du skal hjælpe med, skidt med det)

Er der en kort forklaring på forskellen mellem margen og afstand, i mit univers er det synonymer.

[Kim Ludvigsen]

Syntes du ikke det er noget underligt noget, det med at film kører over menuen i Opera og Safari? (Det er ikke noget du skal hjælpe med, skidt med det)

Jo, det er underligt. Jeg mener at have hørt om problemet tidligere, men jeg tror ikke, der er en løsning på det.

[Jan]

Hovsa, vi skrev nøjagtig samtidig i forum, så jeg gentager lige mig selv.

Er der en kort forklaring på forskellen mellem margen og afstand, i mit univers er det synonymer.

Og, er det ikke noget nyt at det vises når der er rettet i indlæg?

[Kim Ludvigsen]

Er der en kort forklaring på forskellen mellem margen og afstand, i mit univers er det synonymer.

Det er ikke helt det samme, men jeg må erkende, at jeg ikke selv har helt styr på forskellen. Der er tre forskellige afstande:
Margin er afstanden mellem forskellige elementer
Indrykning (padding) er afstanden mellem kanten af elementet og indholdet i elementet, altså en intern afstand.
Afstand minder om margin, men virker fx ikke, hvis man benytter statisk i Position på et element. Jeg kan ikke lige finde en nærmere forklaring på forskellen mellem afstand og margin.

Og, er det ikke noget nyt at det vises når der er rettet i indlæg?

Nej, det afhænger af, hvor lang tid der er gået mellem indlægget blev skrevet og rettelsen.