Forum Mjukvara Programmering och digitalt skapande Tråd

Låsa sidopanelers position men inte headern? (HTML, CSS)

1
Skriv svar
Permalänk
Medlem ★
●

Låsa sidopanelers position men inte headern? (HTML, CSS)

Hej. Jag har ett problem som jag fått för mig SKA gå att lösa med CSS, men jag har kört fast.

Jag har en sida men en header som går över hela sidans bredd, och sedan menyn till vänster på klassiskt "1997"-maner.

Det jag vill göra är att se till att menyn alltid syns, även när man scrollar ner långt ner på sidan. "position-fixed" när det närmaste jag kommer, men då blir det ju ett gap där headern var, och jag vill alltså att menyn ska hamna högst upp på sidan, förutom när headern syns i bild. Går det att lösa med bara css, eller måste jag använda typ javascript?

(Ja, det gäller sidan i min signatur om någon undrar. Vet ni inte riktigt hur jag menar kan ni ta en titt där.)

Mycket tacksam för hjälp

Visa signatur

ozzed.net Min egenkomponerade 8-bit musik. Gillar du musiken från gamla klassiska NES eller Gameboy och liknande är det värt ett besök. :) Jag finns också på Spotify, Bandcamp, Jamendo, Youtube, och du kan även följa mig på Twitter och Facebook.
Vet du att du har fel? Signalera detta tydligt med Argumentationsfel och gärna Whataboutism.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tror inte du kan göra det utan att använda lite javascript. Tyckte dock inte det var så farligt att köra med bara position: fixed;
Tänkte inte på att menyn var en bit ner. Var snarare bra då den känns närmare till hands.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Ozzed:

Hej. Jag har ett problem som jag fått för mig SKA gå att lösa med CSS, men jag har kört fast.

Jag har en sida men en header som går över hela sidans bredd, och sedan menyn till vänster på klassiskt "1997"-maner.

Det jag vill göra är att se till att menyn alltid syns, även när man scrollar ner långt ner på sidan. "position-fixed" när det närmaste jag kommer, men då blir det ju ett gap där headern var, och jag vill alltså att menyn ska hamna högst upp på sidan, förutom när headern syns i bild. Går det att lösa med bara css, eller måste jag använda typ javascript?

(Ja, det gäller sidan i min signatur om någon undrar. Vet ni inte riktigt hur jag menar kan ni ta en titt där.)

Mycket tacksam för hjälp

Gå till inlägget

Hej!

Använd position: absolute på din header och sätt ett z-index som är större än menyns. Ge menyn en padding-top som motsvarar headerns höjd.

PS. Använd inte XHTML

Skickades från m.sweclockers.com

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Teknocide:

Hej!

Använd position: absolute på din header och sätt ett z-index som är större än menyns. Ge menyn en padding-top som motsvarar headerns höjd.

PS. Använd inte XHTML

Skickades från m.sweclockers.com

Gå till inlägget

XHTML vad den enda standarden som inte tillät en massa "flum" när jag började med sidan. Hade jag vetat om html5 år 2008 hade jag säkert kört på det istället.

Det du beskriver låter som att menyn kommer ligga kvar exakt där den är oavsett hur man scrollar (ber om ursäkt om jag har missuppfattat), men det jag är ute efter är alltså att den ska högre upp på sidan relativt browserfönstret när inte headern syns i bild. Jag får kolla upp z-index för det är mycket möjligt att du fattat vad jag menar och gett en lösning som åstakommer det jag vill... Det var ett tag sedan jag höll på nu.

Det jag vill åt är alltså något liknande som på den här sidan: http://webdesigncrowd.com/11-inspirational-fixed-position-men... Notera nenyn till höger.

Senast redigerat
Visa signatur

ozzed.net Min egenkomponerade 8-bit musik. Gillar du musiken från gamla klassiska NES eller Gameboy och liknande är det värt ett besök. :) Jag finns också på Spotify, Bandcamp, Jamendo, Youtube, och du kan även följa mig på Twitter och Facebook.
Vet du att du har fel? Signalera detta tydligt med Argumentationsfel och gärna Whataboutism.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Ozzed:

XHTML vad den enda standarden som inte tillät en massa "flum" när jag började med sidan. Hade jag vetat om html5 år 2008 hade jag säkert kört på det istället.

Det du beskriver låter som att menyn kommer ligga kvar exakt där den är oavsett hur man scrollar (ber om ursäkt om jag har missuppfattat), men det jag är ute efter är alltså att den ska högre upp på sidan relativt browserfönstret när inte headern syns i bild. Jag får kolla upp z-index för det är mycket möjligt att du fattat vad jag menar och gett en lösning som åstakommer det jag vill... Det var ett tag sedan jag höll på nu.

Det jag vill åt är alltså något liknande som på den här sidan: http://webdesigncrowd.com/11-inspirational-fixed-position-men... Notera nenyn till höger.

Gå till inlägget

Tror inte det går att lösa med CSS då, tyvärr. Den enklaste lösningen efter det är att "preppa" ett position: static-element med top-attribut och switcha mellan fixed och static beroende på hur långt ner sidan är scrollad.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Teknocide:

Tror inte det går att lösa med CSS då, tyvärr. Den enklaste lösningen efter det är att "preppa" ett position: static-element med top-attribut och switcha mellan fixed och static beroende på hur långt ner sidan är scrollad.

Gå till inlägget

This.

TS:
Det går att lösa mha lite jQuery. Jag har nåt exempel som jag gjorde för ett tag sen som verkar vara det du vill - hör av dig så får du URL. (Håller på att bygga internwebb åt jobbet, och vill inte ha det publikt ATM).

Visa signatur

Jag är en optimist; det är aldrig så dåligt så att det inte kan bli sämre.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara