Avatar billede alca Nybegynder
12. juli 2012 - 21:48 Der er 11 kommentarer og
1 løsning

Indhold skal forblive centreret, men have respektafstand til venstremenu

Jeg tror ikke det er så kringlet som overskriften antyder.

www.emillyngbo.dk

Indholdet på denne side skal altid være centreret. Det er det også nu, men hvis man resizer viduet mod venstre, begynder det at overlappe menuen.

Giver jeg indholder (som ligger i div'en top-offset-3) en margin-left på 100px, overlapper den ikke længere menuen, men er tilgengæld også forskuft 100px til højre for centrum.

Hvad gør man i en situation, med margin: auto, hvor der så skal kompenseres med (i dette tilfælde) 100px?
Avatar billede olebole Juniormester
13. juli 2012 - 00:49 #1
<ole>

Det er fordi, du float'er dine elementer, hvilket er en stor - men meget udbredt - misforståelse. Block elementer, man gerne vil have liggende ved siden af hinanden, giver man inline-block. Så opfører elementet sig 'udadtil' som et inline element - men 'indadtil' som et block element.

Når du derimod skal lave tekstomløb, er float den korrekte property at sætte, men det er det ikke i den foreliggende situation.

I øvrigt bruger du en forkert DocType. Der er ikke tale om et XHTML 1.0 Strict, men et HTML 4.01 Strict dokument.

Og så forstår jeg i øvrigt ikke, hvorfor jeg skal vente 5 sekunder, mens jeg glor på noget fuldstændig ligegyldigt. Havde jeg ikke dette specielle ærinde på sitet, var jeg smuttet længe inden. Derudover gemmer dette stunt sitet for Google. Det er på ingen måder hensigtsmæssigt  =)

/mvh
</bole>
Avatar billede mireigi Novice
13. juli 2012 - 00:53 #2
Det er fordi din menu (header) er absolut positioneret.

Du bør i stedet prøve at få menuen og indholdet (main) på samme niveau med
display: inline-block;


Derefter kan du lave en wrapper (div) inde i main til indholdet, og denne wrapper giver du så
margin: auto;
Avatar billede alca Nybegynder
19. juli 2012 - 15:08 #3
Hey! Tak for jeres hurtige svar, og beklager mit kommer så langsomt! Jeg bøvler sgu med det.

Hvis jeg gør som I siger, og giver id'erne "header" og "main" display: inline-block, så ligger menuen pludseligt ikke længere i øverste venstre hjørne, men ovenover indholdet? Det er jo ikke meningen.

Olebole: grunden til at du skulle vente 5 sekunder, var faktisk fordi jeg henviste til den forkerte side - www.emillyngbo.dk. Den re-directer til www.emillyngbo.com, som er den rigtige!
Det med DocType må jeg lige få kigget på hurtigst muligt. Tak for dit svar!
Avatar billede olebole Juniormester
19. juli 2012 - 16:02 #4
Jeg ved ikke, hvad du laver. På siden jeg kan ikke se, du har prøvet. Det virker fint. du må have lavet en eller flere fejl. Prøv igen  =)
Avatar billede alca Nybegynder
19. juli 2012 - 21:46 #5
Okay, så prøv at checke siden nu?

Nu har jeg slettet "float: left" på begge og "position: absolute" på menuen.
Og så har jeg sat "display: inline-block" på begge. Det giver blot det resultat, at menuen ligger over indholdet - og altså ikke er på samme niveau som i beskriver det!
Avatar billede olebole Juniormester
19. juli 2012 - 22:01 #6
Du roder stadig med ubegrundet/unødig float og clear på elementer, og det medfører som sagt ofte problemer.

Derudover er din 'wrapper' 876px bred, og menuen er 290px. Dvs, der er 586px tilbage til hovedindholdet - hvilket vist ikke er nok  =)
Avatar billede alca Nybegynder
19. juli 2012 - 22:11 #7
Men wrapperen der er 876px bred, er jo bare hovedindholdet? Menuen har ikke nogen wrapper udover sig?

Forstår det ikke? :S
Avatar billede olebole Juniormester
19. juli 2012 - 22:17 #8
Det er ikke korrekt. Tjek din kode!
Avatar billede alca Nybegynder
19. juli 2012 - 23:44 #9
Ahh.. now I see. Der var en main container udover. Den har jeg nu fået lavet større, samt fået slettet noget float :P

Nu har jeg dog den udfordring, at menuen ikke er fast oppe i venstre hjørne længere!?
Avatar billede alca Nybegynder
19. juli 2012 - 23:48 #10
Argh fuck! Nu fik jeg menuen derop, men nu ligger indholdet random og roder nede mit på siden, og ikke oppe i højde med menuen, og heller ikke midt på siden!!
Avatar billede alca Nybegynder
20. juli 2012 - 00:38 #11
For satan jeg fatter ik det her.
Olebole, gider du evt. checke siden ud nu, og se hvad jeg gør galt?
Avatar billede alca Nybegynder
24. juli 2012 - 20:27 #12
Nå.. tak for det.
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