Kompozer og css

[larsm]

Sådan ?

http://www.sprogkryds.dk/nyside/index1.html

[Kim Ludvigsen]

Ja, nu kan jeg se både html- og css-koder.

Problemet er, at du har placeret de to menuer oven på hinanden og de er begge låst fast. Derfor ser du kun en menu.

I css-editoren:
Slet følgende fra ul .menuliste:
position: fixed;
z-index: 5;

Tilføj følgende til logoindhold:
z-index:20;

Opret en ny stilklasse .fastmenu, der skal have følgende stile:
position:fixed;
z-index:10;
top:15px;

På .logoindhold har du valgt at baggrunden skal være transparent, men du har også valgt et baggrundsbillede, som jeg ikke kan se. Hvis du får problemer med, at menuen kan ses igennem logoindholdsboksen, så vælg en fast baggrundsfarve i stedet for transparant.

Du får et lille problem, fordi den faste menu ikke er helt oppe ved kanten, og du kan se indholdet rulle forbi over menuen. Du kan evt. lege lidt med at lave en omkransende boks, der er højere, og som starter helt oppe. Den skal så have hvid baggrund, og boksen .fastmenu som ligger inde i den skal så have en margin-top på 15 px.

[larsm]

Ok jeg prøver det. Tak Kim.

[larsm]

Det virker jo fint. Jeg lavede den yderst højre menuboks lidt smallere ved at hive i den hvide bjælke ovenover. Den højre menuboks er så kun 152 px bred, hvorimod de andre menubokse er 153 px. Jeg synes ikke det ses og så er hele den faste menubjælke skjult. Tjek her:

http://www.sprogkryds.dk/nyside/index.html

[Kim Ludvigsen]

Jeg ved ikke, om du er opmærksom på det, men du har en lille fejl på indholdsboksen, hvor rundingen er bredere end selve boksen (se æverst til venstre på boksen). Det retter du ved at tilføje width:560px; på .indhold.

Og hvis du vil undgå, at man kan se noget over den faste menu, så kan det som tidligere nævnt gøres med en ekstra boks. Nedenstående er desværre ikke uden fejl, fordi du bruger runde hjørner (de øverste runde hjørner forsvinder), men du kan evt. bruge det som et udgangspunkt.

Tilføj den ekstra boks ved i kildekoden at tilføje denne linje:
<div class="luft">
over denne linje:
<div class="fastmenu">
Og tilføj en ekstra </div> lige efter den førstkommende </div> efter ovennævnte koder.

I css-editoren, tilføj stilklassen .luft med disse stile:
height:37px;
background-color:white;
top:0px;
position: fixed;
z-index: 10;

[larsm]

Nu har jeg brugt en halv søndag på det, men kan ikke helt få det til at fungere. Den vil ikke lave min boks over den faste menulinie. Prøv at se:

http://www.sprogkryds.dk/nyside/index.html

I ovenstående udgave har jeg sat et ekstra </div> efter hele min fast menu. Det er ifølge din opskrift.

Men hvis jeg i stedet sætter et </div> lige efter <div class="fastmenu">, kan jeg godt få den til at lave en boks, men den lægger sig så under menulinien i stedet for over menulinien.

Har du et bud på en løsning ?

Hvis det lykkes mig at lave den boks, regner jeg med at kunne lave baggrunden tranparent og indsætte et billede med den korrekte bredde og farve og runde hjørner. Et det en plan med fremtidsudsigter ?

Har du i øvrigt et bud på, hvorfor min fast menu ikke venstrestiller sig og indstiller sig på samme måde som den anden menu, så de overlapper perfekt ? Nu er jeg nødt til at rette bredden på det yderste højre menupunkt manuelt.

[Kim Ludvigsen]

Nu har jeg brugt en halv søndag på det, men kan ikke helt få det til at fungere.

Min fejl - jeg havde glemt, at der også skal angives en bredde til .luft. Tilføj:
width:770px;

Som tidligere skrevet, forsvinder de runde hjørner på logoboksens top.

Hvis det lykkes mig at lave den boks, regner jeg med at kunne lave baggrunden tranparent og indsætte et billede med den korrekte bredde og farve og runde hjørner. Et det en plan med fremtidsudsigter ?

Jeg må indrømme, at jeg ikke kan gennemskue, hvorfor hjørnerne forsvinder. Boksene med hjørnerne burde blive placeret oven på luft-boksen, men det bliver de tilsyneladende ikke. Jeg har prøvet at tilføje z-index: 20 til boksene med de runde hjørner, men det gør ingen forskel.

Måske din løsning vil virke bedre. Hvis den gør, må du meget gerne melde tilbage, så andre også kan få glæde af den.

Har du i øvrigt et bud på, hvorfor min fast menu ikke venstrestiller sig og indstiller sig på samme måde som den anden menu, så de overlapper perfekt ? Nu er jeg nødt til at rette bredden på det yderste højre menupunkt manuelt.

Hos mig vises de ens - også selvom jeg fjerner din indsatte bredde. Lav evt. en prøveside med fejlen.

[larsm]

Åh, ja, så hjalp det. Jeg havde ellers selv eksperimenteret med en bredde på .luft, så jeg var tæt på at finde løsningen selv.

Prøv at se dette link (i IE 7), hvor jeg ikke har justeret min fastmenubredde manuelt. Så titter den så sødt frem bag logoboksen i højre side og efterlader ca. 1 px margen i venstre side. Det er det jeg mener med at de ikke overlapper helt. Har du en løsning på det ?

http://www.sprogkryds.dk/nyside/index.html

Jeg har eksperimenteret lidt med nogle billeder for at lave runde hjørner i toppen af logoboksen, men uden held. Det kan være jeg må leve med det.

Jeg er i øvrigt som alle andre dybt imponeret af dine hurtige og grundige svar. Og så uden af få en krone for det !!! Tusinde tak for det.

[Kim Ludvigsen]

Åh, ja, så hjalp det. Jeg havde ellers selv eksperimenteret med en bredde på .luft, så jeg var tæt på at finde løsningen selv.

Et lille tip: Når det driller med bokse, kan det være en god ide at give dem en baggrundsfarve, der adskiller sig fra alt andet, fx red i stedet for white. Så er det meget nemmere at finde problemer.

Det var på den måde, jeg fandt den manglende bredde. Selvom jeg ændrede farven, var feltet øverst stadig hvidt. Jeg prøvede så at skrive et par bogstaver i luft-boksen, og så blev det tydeligt, at boksen kun fyldte bogstavernes bredde. Og så var det jo nemt at regne ud, at der manglende en bredde, der fik den til at fylde hele vejen hen.

Så titter den så sødt frem bag logoboksen i højre side og efterlader ca. 1 px margen i venstre side.

Jeg kan ikke lige se, hvorfor der er forskel i IE og Firefox, der må næsten ligge en margin eller padding og drille et eller andet sted. Prøv at angive en bredde på 770px på logo. Hvis det ikke hjælper, så brug tricket med den røde baggrundsfarve og gå på jagt efter breddeangivelser/padding/marginer og se om du kan finde fejlen.

Jeg kan desværre ikke gøre det særlig nemt her, fordi det virker fint i Firefox, og mit værktøj til at finde fejl kun virker i Firefox (udvidelsen Web Developer).

Du kan også springe over, hvor gærdet er lavest og angive en bredde på 769px i .luft. Men det vil give en lille fejl til højre for boksen, når man starter med at rulle siden i Firefox.

Jeg er i øvrigt som alle andre dybt imponeret af dine hurtige og grundige svar. Og så uden af få en krone for det !!! Tusinde tak for det.

Nogle gange kan det være meget sjovt at finde løsninger på problemer, hvis man ikke lige kendte løsningen i forvejen. Og så lærer man jo også noget nyt.

[larsm]

Hej Kim, nu har jeg prøvet at få den .luft boks til at virke. Men den fungerer kun perfekt i firefox. I Chrome er hele min fastmenu rykket langt ud til højre. I IE7 er min fastmenu rykket 1px til højre. Har du yderligere input ? Jeg er gået i stå.

Uden .luft boks virker fastmenuen rimeligt i alle 3 browsere. Dog med småfejl.

Det der irriterer mig er, at fastmenuen i Ludvigs Hjørne fungerer fint i alle 3 browsere. Men der har du ikke lavet nogen .luft boks så vidt jeg kan se. Bruger du en anden løsning ?

Har du i øvrigt bemærket, at fastmenuen ikke følger med når du scroller til højre i et minimeret vindue (heller ikke i Ludvigs Hjørne) ? Det skal den vel egentlig heller ikke i sagen natur, men det kan godt være det undrer brugerne, at de finder to forskellige menupunkter når de scroller op til den relative (hedder den normale menu ikke det ?) menu. Ved ikke om jeg udtrykker mig klart, men prøv at lave et mindre vindue som kun viser halvdelen af den relative menu. Scroll helt ud til højre og bemærk, at det er forskellige menupunkter der mødes, når den fastmenu når op til den relative menu.

Link til siden: http://www.sprogkryds.dk/nyside/index.html

[Kim Ludvigsen]

Hej Kim, nu har jeg prøvet at få den .luft boks til at virke. Men den fungerer kun perfekt i firefox. I Chrome er hele min fastmenu rykket langt ud til højre. I IE7 er min fastmenu rykket 1px til højre. Har du yderligere input ? Jeg er gået i stå.

Jeg må indrømme, at jeg heller ikke forstår, hvorfor det ikke virker korrekt. Jeg har ganske vist løst det på en lidt anden måde, men det burde ikke betyde en ændring i boksenes størrelse eller placering, sådan som det gør hos dig.

Jeg har lagt dette baggrundsbillede ind i stilklassen .fastmenu:

logo3.png (160 bytes) Vist 7871 gange

Som du kan se, har jeg lavet de øverste 5px "hvid" (farven er lidt brækket for at passe med sidens baggrundsbillede). Og de nederste 27px er baggrunden på menubjælken. Boksen .fastmenu er så placeret helt oppe med top:0 (ligesom din .luft) og der er så angivet padding-top:5px, så menupunkterne indsættes under de 5px hvid.

Jeg håber ovenstående er forståeligt, ellers sig til.

Har du i øvrigt bemærket, at fastmenuen ikke følger med når du scroller til højre i et minimeret vindue (heller ikke i Ludvigs Hjørne) ?

Nej, det havde jeg ikke lagt mærke til. Det skyldes selvfølgelig, at fastmenuen er placeret fast i modsætning til den anden menu. Nu er der forhåbentlig ikke så mange med så lav en opløsning, for menuen er jo ikke så praktisk, når man ikke kan rulle ud til menupunkterne til højre.

[Jan]

Lasm, Jeg syntes du har en flot side. Hos mig, når jeg kigger med Firefox, ser det ud som om du skal have din logo boks til at være lidt højere. Jeg kan se det øverste af din faste menu.

Jeg vil iøvrigt anbefale dig, at overveje om du skulle placere din menu i en extern fil. Hvis du på et senere tidspunkt gerne vil lave en lille ændring i menuen, kommer du på et meget stort og kedeligt arbejde. Ja, jeg taler af erfaring. Har du der imod menuen på en ekstern side, skal du kun rette en gang, og voila, alle sider er ændret. Jeg er selv igang med at ændre min mennu, og priser mig mig lykkelig for at jeg har den på en extern side.

Det er meget nemt at lave, men har den ulempe at serveren skal understøtte php, og siderne skal gemmes som php. Det betyder også at du ikke kan teste resultatet lokalt i din browser. Den skal på en server.

[larsm]

Jan: Tak for rosen og rådet. Jeg har dog stadig til gode og lære om php og menu i extern fil. Det må være for de øvede )

Kim: Nu er jeg kommet tæt på noget jeg kan bruge til noget. Prøv at følg linket.

http://www.sprogkryds.dk/nyside/index.html

Dog undrer det mig, at de runde hjørner ikke vises i bunden af indholdsboksen i Chrome, men godt i IE7 og Firefox. Kan du se om det er noget jeg har gjort galt ? Jeg kan nemlig se, at dine skabeloner godt viser de nederste runde hjørner i indholdsboksen i Chrome. Jeg har tjekket koder og ccs, men kan ikke finde fejlen. I Kompozer ser det desuden ud som om, at boksen der skal indeholde de runde hjørne mangler nederst på indholdsboksen.

Med hensyn til den faste menu, ville det være helt lige i øjet, hvis det var muligt at lave den fast vertikalt, men relativ horisontalt. Dermed ville man være sikker på at møde de samme menupunkter, når man scroller op i et vindue, der er for smalt til at hele menuernes bredde kan vises. Gad vide om det teoretisk kunne lade sig gøre ?

[Kim Ludvigsen]

Jan: Tak for rosen og rådet.

Jeg er enig med Jan, det er blevet flot. Jeg har dog et enkelt forslag: Måske det vil være bedre med en streg under den faste menu, så den adskilles mere tydeligt fra indhold der rulles op?

Jeg har dog stadig til gode og lære om php og menu i extern fil. Det må være for de øvede )

Slet ikke. Du skal blot opfylde følgende:

1. Din server skal understøtte php.
2. Du skal kunne identificere menuens kode, så du kan klippe den ud.
3. Du skal kunne indsætte den udklippede kode i en anden fil.
4. Du skal kunne omdøbe dine sider fra navn.html til navn.php

Jeg ved, du kan klare 2, 3 og 4, så det er kun et spørgsmål, om dit abonnement hos Surf-Town understøtter php.

Nu er det selvfølgelig et spørgsmål, hvor stor risikoen er for, at du får brug for at ændre menu eller andre faste ting (fx adressen i footeren). Hvis risikoen ikke er særlig stor, eller du ikke har ret mange sider, er der måske ikke så meget grund til at gemme menu m.m. i selvstændige filer.

Du kan for øvrigt finde lidt hjælp til indsættelse af en menu fra en selvstændig fil her:
http://kimludvigsen.dk/programmer-inter ... in-php.php

Dog undrer det mig, at de runde hjørner ikke vises i bunden af indholdsboksen i Chrome, men godt i IE7 og Firefox.

De runde hjørner nederst vises heller ikke i Firefox 2. Prøv at fjerne billedhøjre fra dette tag:
<div class="indhold billedhoejre">
så du får dette:
<div class="indhold">

Der er så vist lidt problemer med det nederste billede, men de runde hjørner vises i Firefox 2 med denne ændring, så mon ikke også de gør i Chrome?

Med hensyn til den faste menu, ville det være helt lige i øjet, hvis det var muligt at lave den fast vertikalt, men relativ horisontalt. Dermed ville man være sikker på at møde de samme menupunkter, når man scroller op i et vindue, der er for smalt til at hele menuernes bredde kan vises. Gad vide om det teoretisk kunne lade sig gøre ?

Hvis jeg forstår dig ret, så kan det lade sig gøre. Man skal bare lade være med at midterstille .side, så al indhold altid vises yderst til venstre, uanset bredden på browservinduet. Men det er efter min mening ikke så kønt. Jeg tør ikke sige, om det kan gøres på andre måder, så man beholder den midterstillede side.