Mohel.dk > Tutorials > Center layout med div tag
<div style="top: 10px; left: 50%; margin-left: -450px; width: 900px; position: absolute;">
</div>
Du kan nemt også bruge height i denne kode.
Top skriver du hvor langt dit layout skal være placeret fra toppen af.
Left må du ikke pille ved, men derimod margin-left skal være minus og det skal være det halve af tallet der står i width. Som her hvor width er 900 skal margin-left være -450. Men havde width være fx 200 skal margin-left være -100.
Width er hvor bred dit layout er, altså alt i alt. Det er med sidemenu, blog, menu, billede og alt det der.
Hvis man ligesom mig, har flere dele sit layout i 2-3 billeder og et af billederne skal gentages ned af kan det være svært at få koden til at virke som man gerne vil. Jeg har mit css på en fil hvor sig selv, læs mine guides til css for at lære det, og bruger php include så mit layout er placeret i en headerfil men bare placer det hvor du normalt har dit layout. Sådan her har jeg gjort:
Css filen:
Under Body { } skal der være:
background-image: url('billedeurl');
background-repeat: repeat-y;
background-position:center center;
billedeurl skal være det billede du skal have til at gentage sig selv nedad.
Header filen:
Lige efter <body> har jeg følgende:
<img src="billedeurl" alt="beskrivelsen" style="top: 0px; left: 50%; margin-left: -450px; width: 900px; position: absolute;">
<div style="top: 10px; left: 50%; margin-left: -450px; width: 900px; position: absolute;">
Beskrivelsen skal være en beskrivelse af dit billede
Billedeurl skal være det billede du bruger som toplogo. Det har jeg centeret
Bagefter laver jeg et div tag som du skal huske at afslutte lige inden </body>. Alt indhold skal placeres inde for div tagget for at være centeret også. Hvis du placer andet(med et div tag eller anden form for tag) vil det tage efter dit layouts venstre kant og ikke browserens, så længe det er inden for det første div tag.
<div style="top: 10px; left: 50%; margin-left: -450px; width: 900px; position: absolute;">
</div>
Du kan nemt også bruge height i denne kode.
Top skriver du hvor langt dit layout skal være placeret fra toppen af.
Left må du ikke pille ved, men derimod margin-left skal være minus og det skal være det halve af tallet der står i width. Som her hvor width er 900 skal margin-left være -450. Men havde width være fx 200 skal margin-left være -100.
Width er hvor bred dit layout er, altså alt i alt. Det er med sidemenu, blog, menu, billede og alt det der.
Hvis man ligesom mig, har flere dele sit layout i 2-3 billeder og et af billederne skal gentages ned af kan det være svært at få koden til at virke som man gerne vil. Jeg har mit css på en fil hvor sig selv, læs mine guides til css for at lære det, og bruger php include så mit layout er placeret i en headerfil men bare placer det hvor du normalt har dit layout. Sådan her har jeg gjort:
Css filen:
Under Body { } skal der være:
background-image: url('billedeurl');
background-repeat: repeat-y;
background-position:center center;
billedeurl skal være det billede du skal have til at gentage sig selv nedad.
Header filen:
Lige efter <body> har jeg følgende:
<img src="billedeurl" alt="beskrivelsen" style="top: 0px; left: 50%; margin-left: -450px; width: 900px; position: absolute;">
<div style="top: 10px; left: 50%; margin-left: -450px; width: 900px; position: absolute;">
Beskrivelsen skal være en beskrivelse af dit billede
Billedeurl skal være det billede du bruger som toplogo. Det har jeg centeret
Bagefter laver jeg et div tag som du skal huske at afslutte lige inden </body>. Alt indhold skal placeres inde for div tagget for at være centeret også. Hvis du placer andet(med et div tag eller anden form for tag) vil det tage efter dit layouts venstre kant og ikke browserens, så længe det er inden for det første div tag.