Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet.

Størrelse: px

Starte visningen fra side:

Download "Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet."

Ada Anna Maria Astrup
6 år siden
Visninger:

1 Side 1 Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet. Dette er nogle gange et ønske fra den enkelte kunde, som blot ønsker en eller to simple html sider, som skal fungere som en slags»visitkort«. Det som ses her ovenfor skulle gerne ende med at være slutresultatet når vi endelig når i mål. Lad os begynde! For at kunne opnå ovenstående er det forholdsvis forståeligt at vi skal have lavet et html dokument som vi kan arbejde med. Jeg vil ikke gå ret meget i dybden med at beskrive hvordan du opretter et html dokument i f.eks. Dreamweaver eller Notesblok, da jeg går ud fra at du har helt styr på dette. Koden! For at kunne lave en»div«som er centreret har vi dernæst behov for en kode, som skaber en div-kasse i html dokumentet. Denne kode, ser for dette eksempel ud som følger (din kode ser måske anderledes ud): <body> <div id="wrapper"> <h2>her er containeren</h2> </div> </body> Og det er denne kode vi nu vil arbejde videre ud fra.

Side 2 CSS Nu da vi har en stump html kode som skaber en»div-kasse«skal vi have gang i vores css regler for netop denne div-kasse. Så lad os gå i gang med dette.

2 Side 2 CSS Nu da vi har en stump html kode som skaber en»div-kasse«skal vi have gang i vores css regler for netop denne div-kasse. Så lad os gå i gang med dette. Da jeg ikke ved hvordan du arbejder i forhold til css koder, så tager jeg udgangspunkt i at du enten har et»eksternt stylesheet«eller måske endda et»internt stylesheet«, men uanset hvordan du arbejder skal vi til have gang i lidt hovedregning for at få vores»div-kasse«centreret i browseren. Min div-kasse Min»div-kasse«har målene 840px i bredden og en fast højde på 600px, som gør at den burde kunne ses i langt de fleste opløsninger i dag, uden at der opstår en horisontalt scroll-bar i browserens bundlinje. 840px 600px Når vi i vores css har defineret disse mål for vores»wrapper«skal vi til at arbejde med positionering af vores»div-kasse«som det næste.

Side 3 Markeringen her viser browserens X og Y koordinat, i det punkt som forhold sig til browseren idet vi i denne del af verden skriver fra venstre mod højre.

3 Side 3 Markeringen her viser browserens X og Y koordinat, i det punkt som forhold sig til browseren idet vi i denne del af verden skriver fra venstre mod højre. Markeringen her er således i det koordinat som ligger i»0«for x- koordinatet og ligeledes»0«for y-koordinatet. Det at jeg her viser koordinatet 0,0 for vores browser spiller en vigtig rolle for det efterfølgende. Det forholder sig nemlig sådan at browserens 0,0 koordinat som standard forholder sig som»positioneret«relativt og da vi gerne skal placere vores»wrapper«som»positioneret absolut«er det vigtigt at vi erkender browseres standard indstilling for det koordinat der ligger i 0,0. Positionering Vi skal nu have placeret eller»positioneret«vores div-kasse i det koordinat der ligger i henholdsvis 50% fra toppen og 50% fra venstre side, således div-kassen ligger præcis i midten af vores browser vindue. For at få vores»wrapper«til at forholde sig netop det punkt som ligger i koordinatet 50% fra toppen og 50% fra venstre kant, bliver vi derfor nødt til at skrive dette ind i vores css. Desuden skal vi fortælle browseren, via vores css at vores»wrapper«skal positioneres absolut i forhold til browserens standard x og y-koordinat som jo ligger i 0,0.

Side 4 Her ses min»wrapper«som nu er indsat og stylet med en smule css, dels for at få lidt baggrundsfarve men også for at placere den som»absolut positioneret«i forhold til browserens 0,0 koordinat.

vindue, hverken vertikalt eller horisontalt.

4 Side 4 Her ses min»wrapper«som nu er indsat og stylet med en smule css, dels for at få lidt baggrundsfarve men også for at placere den som»absolut positioneret«i forhold til browserens 0,0 koordinat. Min»wrapper«er her sat i 50% fra toppen og 50% fra venstre Nu da vi har indsat»wrapperen«og positioneret denne absolut ses det tydeligt at»wrapperen«på ingen måde forholder sig i midten af browserens vindue, hverken vertikalt eller horisontalt. Dog ligger x-y koordinatet præcis 50% fra toppen og præcis 50% fra venstre kant, men grundet de faste mål vi tidligere satte på henholdsvis 840px og 600px vil»wrapperen«vises sådan her. Så for at få»wrapperen«til at forholde sig rigtigt i browserens vindue skal vi ind i vores css og arbejde med margin forholdene, så vi opnår at få den rigtige placering. Negative tal Da min div-kasse har målene 840px i bredden og 600px i højden bliver vi nødt til at halvere disse tal ved at sætte en»negativ margen«på henholdsvis toppen og på venstre side af div-kassen, for at få»wrapperens«0,0 koordinat til at hoppe på plads som vi ønsker det. Så i dette tilfælde hvor bredden er 840px, halverer vi dette tal til 420px og sætter dette som en»negativ margin«fra venstre kant, og vi skal ligeledes udregne en»negativ margin«for højden som er på 600px hvilket resulterer i at vi opnår et negativt tal på 300px for vores top-margen.

5 Side 5 Den endelige løsning og endelige css kode ser derfor sådan ud: #wrapper { position: absolute; left: 50%; top: 50%; width: 840px; height: 600px; margin: -300px px; background-color: #666; } Træk i browserens nederste højre hjørne for at se vores»wrapper«nu forholder sig præcist i midten uanset hvad. Med dette har vi opnået det vi ville, nemlig at få placeret vores»wrapper«i midten af vores browser vindue og vi burde nu kunne trække i browserens nederste højre hjørne for at se at»wrapperen«rent faktisk forholder sig der hvor den skal.

Relaterede dokumenter

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS Opgavebeskrivelse Lav en webside om i Sønderjylland. Opgaven fører dig igennem de basale ting, hvad angår opbygningen af en side med CSS. Der er ikke tale om et komplet site, men du kan bruge opgaven som