Top menu med position:fixed

Tags:    css html

Jeg har på min hjemmeside ( http://scootergrisen.dk/ ) lavet min top menu om så den er position:fixed sådan at den kan se øverst selvom man scroller ned på siden.

Problemer er så at den ligesom bliver taget ud og placeret oven på siden så nu har jeg midlertidigt sat en margin-top:30px; på det første på siden efter menuen såder at det ser rigtigt ud.

Men hvis man gør vinduet smallere så fylder menuen mere i højden og derfor kommer menuen til at stå oven på søgefeltet og andet på siden.

Hvis jeg hopper til et link på samme side så kommer menuen også til at stå oven på noget som den ikke skal. Her for eksempel : http://scootergrisen.dk/htmlgrisen/kode_form_introduktion.php#screenshots

Har i en løsning på det ?



10 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma
Sorter efter stemmer Sorter efter dato
Ved mig ser det eksempel nu fint nok ud (sidder i en IE 8).
Ville også mene at din højde burde ikke ændre sig selvom du ændrer width på en side, medmindre du har defineret den i procenter (%).

Er ikke sikker på om det er det resultat du ønsker dig, men har en alternativ ide.
Du kan sætte det der er udenfor din topmenu i en div-sætte en max-height:xxx px; overflow: auto; og så fjerne din position:fixed;
Så er de to div'er sidestående og den nederste med svarene vilfå scroll på.



Indlæg senest redigeret d. 15.12.2011 09:15 af Bruger #16651
For at menuen ikke bliver højere, skal du så ikke bare lave en min-width på menuen?

Fold kodeboks ind/udCSS kode 




Du kan sætte det der er udenfor din topmenu i en div-sætte en max-height:xxx px; overflow: auto; og så fjerne din position:fixed;
Så er de to div'er sidestående og den nederste med svarene vilfå scroll på.


Mener du sådan her... ?
Fold kodeboks ind/udHTML kode 


Hvad skulle der så ske ved det ?
Og hvad skal xxx px stå til ?
Hjemmesiden skulle jo gerne fylde heleskærm og ikke et bestemt antal pixels i højden.

For at menuen ikke bliver højere, skal du så ikke bare lave en min-width på menuen?


Ja men jeg vil gerne have at den skal kunne "folde sammen".
Lad os sige man ser hjemmeside på en mindre bred skærm eller jeg tilføjer nogen flere menuer senere så ville det jo være super ærgeligt hvis folk ikke kan se de menuer længst til højre.



Indlæg senest redigeret d. 15.12.2011 20:18 af Bruger #13010
du kunne jo skrive 100% i højden



Hvor skulle jeg skrive 100% i højden ?
Jeg har lige prøvet men syns ikke det giver noget godt resultat.



Faktisk nu jeg tænker over det ville jeg måske ændre mit foreslag lidt..
Til:
Fold kodeboks ind/udHTML kode 

Ville mene at således har du altid din menu-til en højde, og fixed position, og "resten af hjemmesiden" er altid placeret med en margen i toppen således det står under din menu.
Ville ikke mene det burde være nødvendigt med position:fixed på "resten af hjemmesiden", men hvis ovenstående eksempel ikke gør det, så prøv at put den på og se om det virker så :)



Laurits > Det virker bare ikke når menuen bliver så bred at den folder sammen til 2 "linier". Så bliver den dobbelt så høj (50px) men hvordan får man lige "opdateret" det når det sker.

Altså menuen skulle jo gerne virke på mindre skærme eller når jeg tilpasser dobbelt så mange menupunkter.



Så ville jeg se på noget jQuery der gør det når vinduet bliver resized, men vent et sekundt eller to fordi ellers bliver det gjort alt for mange gange.
Jeg kan ikke lige syntaksen i hovedet, men skal se om jeg kan nå det i morgen for ellers holder jeg nemlig ferie og så tror jeg desværre ikke jeg får set på det.



Det skal helst ik være noget med javascript for vil også have menuen virker selvom javascript ikke er aktiv.

Ku være jeg bare skulle holde mig til den gamle ikke-fixed menu fordi selvom det med højden bliver rettet så er der stadig det problem med at når man hopper til at link står menuen oven på teskten man er hopper til.



Ved din nuværende er der ihvertfald ikke problemer med at højden ændrer sig :)



t