Avatar billede viggosmor Nybegynder
24. juni 2008 - 10:53 Der er 9 kommentarer og
1 løsning

fixed banner og menu med css

Hej

Sidder og roder med denne side:

http://soederberg-webdesign.dk/astrid

Og kunne godt tænke mig at få banner og menuen til at være fixed på siden, når man scroller..

Har søgt og læst mange steder men det er ikke lykkedes mig at få et brugbart resultat ud af det..

Jeg har forsøgt med

#banner {position: fixed; }
og det virker da også i ie7, men så bliver menuen mindre...

Så har jeg prøvet følgende:

#navigation { position: fixed; top:100px; }

Men uden godt resultat..

Er der en venlig sjæl der vil prøve at forklare hvordan jeg gør dette smartest, så det understøttes af alle browsere?
Avatar billede w13 Novice
24. juni 2008 - 11:00 #1
Jeg forstår ikke helt, hvad du mener med, at menuen bliver mindre. Kan jeg se dette?

Det skyldes ikke bare, at du mangler at definere en bredde på menuen, og når du gør den fixed, får den ikke længere bredden fra sit parent element?
Avatar billede viggosmor Nybegynder
24. juni 2008 - 11:16 #2
jo nu er det uploaded, hvor jeg har følgende css kode:

#banner {
    position: fixed;
    width: 900px;
    height: 100px;
    }
Avatar billede viggosmor Nybegynder
24. juni 2008 - 11:18 #3
hvordan får jeg navigation til at være fixed også og i sin rigtige størrelse 150px;
?
Avatar billede w13 Novice
24. juni 2008 - 11:27 #4
I dit CSS-dokument har du lige nu:

#navigation {
   
    padding: 0px 0px 0px 0px;
   
    height: 150px;
    width: 900px;
    }

Det skal så i hvert fald have en position:fixed; og i øvrigt kan padding forkortes til padding:0;

#navigation {
    position:fixed;
    padding: 0;
    height: 150px;
    width: 900px;
    }

Fejler størrelsen så?
Avatar billede viggosmor Nybegynder
24. juni 2008 - 11:32 #5
hmm oki... nu er indholdet blevet forrykket, så der slet ikke kan scrolles...
Avatar billede viggosmor Nybegynder
24. juni 2008 - 12:17 #6
Oki, jeg har sat overflow: auto; på #indhold og #sidebar
Og så har jeg forøget padding-top på disse elementer også... det hjalp gevaldigt... men det duer jo kun i ie7 og firefox..

Har brug for lidt hjælp med at få det til at se sådan ud i alle browsere...
Avatar billede w13 Novice
24. juni 2008 - 12:28 #7
Det ser ud til, at bredden på teksten er for smal i Safari. Har du sat bredden?
Avatar billede viggosmor Nybegynder
24. juni 2008 - 12:56 #8
nej men det har jeg nu...

Hmmm, kan ikke få det til at virke i ie6...
Avatar billede w13 Novice
24. juni 2008 - 13:04 #9
Jeg har desværre ikke IE6, så jeg kan ikke teste det.

Når jeg laver design, tester jeg altid i samtlige browsere for hver del, jeg tilføjer. På den måde ved jeg præcis, når jeg arbejder med en kode, der opfører sig forskelligt afhængigt af browseren - og så sparer jeg enormt meget tid senere, hvor jeg ikke skal sidde og lede efter fejl. :)
Avatar billede viggosmor Nybegynder
19. august 2008 - 07:24 #10
Nå mon ikke vi skal lukke her...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester