Avatar billede Emma Seniormester
27. januar 2022 - 09:14 Der er 2 kommentarer og
1 løsning

Centrer Siden ens på alle PC

Jeg vil gerne om nogen kunne hjælpe mig med at centrerer en side.
Min side er opbygget sådan, at hele siden er blå. På denne side ligger en content der er centreret ca. 1000px bred. I denne content ligger der DIV bokse, der indeholder alt.
Jeg kan godt selv centrerer en side problemet er, når jeg lægger DIV bokse ind på siden med absolutte værdier. Her placeres de forskelligt på de forskellige PC'er (dette er mit problem).

Jeg tænker at problemet er, at content skal indlægges på en anden måde. Jeg har bare ikke fundet en metode. Jeg vil gerne bibeholde den absolutte indlæggelse af div boksene. Jeg fandt noget med at den målte skærmbilledet og tog halvdelen, men denne funktion virkede ikke.
Min content ser således ud:
#content{
        top:0px;
        left: 0px;
        margin-left:auto;
        margin-right:auto;
        background:white;
        width:950px;
        height:2400px;
        border: 5px groove;
    }
Håber på at en eller anden har løst dette problem, og kender til en løsning der virker.
Avatar billede Henrik Hansen Forsker
27. januar 2022 - 14:08 #1
<style>body{width:100%;height:100vh;display:grid;place-items:center}</style>

Tilføjer du min "body" style, behøver du ikke top, left eller margin. Alle elementer i body bliver nemlig centret vha grid. Når du kun har 1 div (#content), så bliver den centreret. Da din hæjde er ret stor, kommer siden til at scrolle.

PS. 100vh = 100% af view height:
https://css-tricks.com/fun-viewport-units/
og om CSS Grid:
https://css-tricks.com/snippets/css/complete-guide-grid/
Avatar billede Emma Seniormester
27. januar 2022 - 14:57 #2
Hej Henrik
Tak for dit svar.
Jeg har kun lige set på din løsning overfladisk, men det ser ud til, at det var den eller noget lignende jeg havde brug for. Det er korrekt, at jeg har kun har en content. Jeg skriver igen når jeg har afprøvet den. Men der er lige nogle helt andre ting, der presser på. For at holde freden på hjemmefronten. Den manual med Grid ser helt godt ud. Jeg er uddannet som teknisk assistent og har arbejdet med Grid, dog i et helt andet perspektiv.
Avatar billede Emma Seniormester
27. januar 2022 - 17:12 #3
Jeg har nu haft lidt tid til at afprøve det.

Det er sådan set meget smart, og at man kan dele dem op endnu en gang med child-of-grid gør jo nærmest div "arbejdsløs".
Jeg vil lave lidt om på din løsning. Da jeg gerne vil have 2 spalter mellem kanten af
skærmen og ind til content. En på hver side, de skal ca. fylde (skærmstørrelse minus  ca. 1000px) divideret med 2. Farven på spalterne skal være blå. Selve content skal være hvid, Boksene heri skal være lysegrønne. Jeg ved ikke om det kan lade sig gøre, men det ser godt ud. Ellers må jeg sætte første ramme og lade alle de grønne bokse følge den første streg. Det bliver i hvert fald bedre end det er i dag og smart er det.

Jeg kan ikke helt skrive at løsningen er fundet, da der er nogle løse ender, Her tænkes på de 2 spalters bredde.

Jeg takker for hjælpen.

Jeg skal nu i gang med at finde en løsning på de 2 spalter, mellem kanten og "content". Hvis du har en løsning vil jeg gerne høre den.

P.S. Ved at nærlæse manualen finder jeg måske løsningen.
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