CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

knutbl Nybegynder

17. marts 2006 - 13:15 Der er 23 kommentarer og
1 løsning

newbie: Sentrering av div i side-design?

Jeg har alltid designet mine sider ved hjelp av tabeller, men skal nå for første gang prøve å lage noe ved hjelp av css. Mitt spørsmål er kanskje dumt, men jeg prøver likevel:

------------------
| |
| |
| |
| |
-------------------

Selve innholdet/designen skal ligge i en DIV-container med width 800px, slik som på "illustrasjonen" over. Denne container-div'en skal være midtstilt på skjermen (midtstilt i bredden, ikke i høyden, dvs horisontalt midtstilt). Det høres ut som en enkel jobb, men jeg er usikker på hvordan jeg skal gjøre det for å få det riktig. Kan noen forklare dette for meg?
Takk!

KnB

Synes godt om

knutbl Nybegynder

17. marts 2006 - 13:16 #1

"illustrasjonen" ble visst litt feil, - sorry...

Synes godt om

foxmulder58 Praktikant

17. marts 2006 - 14:02 #2

you must make a div container which includes all the other divs.

You can give the div container which centers the content of the page an id, in this case the id name is "bodywrap".

the <div id="bodywrap"> must have the followin CSS rules:

#bodywrap {
background-color: transparent;
position: relative;
width: 650px;
left: auto;
top: 0px;
right: auto;
bottom: 0px;
margin: 0px auto;

}

this will center the content of your page.

Best regards

Mads

Synes godt om

knutbl Nybegynder

17. marts 2006 - 14:31 #3

Thanks!
- can you make this an answer, and I'll give you some points?

Synes godt om

knutbl Nybegynder

17. marts 2006 - 14:36 #4

another thing: when the width is 650, will this be centered in all screensizes and browsers?

Synes godt om

milandt Nybegynder

17. marts 2006 - 14:43 #5

well, if the width is 650px, it will apper as aligned to the left if my browser window is smaller than 650px - if that is what you mean

Synes godt om

mclemens Nybegynder

17. marts 2006 - 20:04 #6

>this will center the content of your page.
- Niks, ikke i IE ;)

Og hvorfor alle disse:
background-color: transparent;
position: relative;
left: auto;
top: 0px;
right: auto;
bottom: 0px;

knutbl>Her er en løsning til både IE og Firefox:

(overfør selv styles til stylesheet)

<html><head>

<style>

body{text-align:center;margin:0px;padding:0px;}

.alignc{width:770px;margin: 0px auto;}

</style>

</head><body>

<div class="alignc">abc</div>

</body></html>

Synes godt om

mclemens Nybegynder

17. marts 2006 - 20:05 #7

Hov skift lige:
.alignc{width:770px;margin: 0px auto;}

Over til:
.alignc{text-align:left;width:770px;margin: 0px auto;}

Synes godt om

foxmulder58 Praktikant

20. marts 2006 - 10:03 #8

nej det er rigtig at han godt kan pille nogle af alle de definitioner ud af den regle jeg gav ham de var ogsaa blot ment som eksempel.

men den virker i IE og firefox osv.

Synes godt om

mclemens Nybegynder

20. marts 2006 - 11:48 #9

men den virker i IE og firefox osv.>

- Når jeg tester i IE kan jeg ikke få det til at virke
... det kan dog godt være jeg gør det forkert
eller at jeg misforstår dit første indlæg/løsning ?

<html><head>

<style>

#bodywrap {
background-color: transparent;
position: relative;
width: 650px;
left: auto;
top: 0px;
right: auto;
bottom: 0px;
margin: 0px auto;

}

</style>

</head><body>

<div id="bodywrap">abc</div>

</body></html>

Synes godt om

mclemens Nybegynder

20. marts 2006 - 12:44 #10

P.s. tester med IE 6

Synes godt om

foxmulder58 Praktikant

21. marts 2006 - 17:57 #11

prøv at placere en et div element iinden i det div element der hører under id "bodywrap" og så er den placeret centreret også i IE.

mvh
mads

Synes godt om

mclemens Nybegynder

21. marts 2006 - 18:20 #12

øh, prøver du det du skriver mads, det virker stadig ikke på min IE6???
... det tager altså kun 2 sek. at teste det du skriver inden du skriver det - hvis du bruger det ovenstående eksempel i 20/03-2006 11:48:02 ???

<html><head>
<style>
#bodywrap {
background-color: transparent;
position: relative;
width: 650px;
left: auto;
top: 0px;
right: auto;
bottom: 0px;
margin: 0px auto;

}
</style>
</head><body>
<div id="bodywrap">
<div>abc</div>
</div>
</body></html>

Synes godt om

mclemens Nybegynder

21. marts 2006 - 18:24 #13

...derudover er der ingen grund til at bruge 2x divs når man kan nøjes med en...

<html><head><style>
body{text-align:center;margin:0px;padding:0px;}
.alignc{width:770px;margin:0px auto;}
</style></head><body>

<div class="alignc">abc</div>

</body></html>

Synes godt om

mclemens Nybegynder

22. marts 2006 - 02:25 #14

min fejl, undskyld Mads, det virker jo :)
... nåh det hjalp at klokken blev over midnat :/

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
<style>
#bodywrap {
background-color: transparent;
position: relative;
width: 650px;
left: auto;
top: 0px;
right: auto;
bottom: 0px;
margin: 0px auto;

}
</style>
</head><body>
<div id="bodywrap">
<div>abc</div>
</div>
</body></html>

Synes godt om

foxmulder58 Praktikant

22. marts 2006 - 17:18 #15

;-)

Synes godt om

mclemens Nybegynder

22. marts 2006 - 18:52 #16

... det var det med <!DOCTYPE'en der hjalp på det ...
Det må jeg nok lige vende mig til - og så få fjernet text-align:center på min egen side (har doctype'en der, men noget (nu fjernet) echo"<"."?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">".$doctypen; forstyrede lidt... dog validerede den fint via. w3c... :/

- tak for godt "humør" m.h.t. min fejl ;)

Synes godt om

foxmulder58 Praktikant

23. marts 2006 - 20:27 #17

no problem.

Jeg kunne også have fjernet en del CSS regler i mi opmærking men jeg gik ud fra spørger selv lige pillede og justedere så det passede til hans eget design.

mvh
Mads

Synes godt om

roenving Novice

25. marts 2006 - 14:32 #18

>>mclemens

-- bemærk præcis denne opførsel i IE, for det er en historie, der kommer til at blive brugt mange kræfter på, hvis du kommer til at kigge på mange ting om css ...

Se f.eks. http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp (kig under The !DOCTYPE "Switch" !-)

-- det skal dog bemærkes, at det ser ud til, at IE oftere skifter til qirks mode, end det er angivet i skemaet, så den generelle opfordring lyder til _altid_ at udelade en evt. xml-deklaration eller nogetsomhelst andet før doctype-tagget og _altid_ medtage dtd-linket !o]

Se forøvrigt også http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/doctype.asp ...

Synes godt om

roenving Novice

25. marts 2006 - 14:36 #19

-- og jeg glemte i øvrigt at nævne, at det væsentligste problem med IE i quirks-mode er at browseren så ikke oerholder box-modellen, som den er beskrevet i css-anbefalingerne, hvilket giver nogle højst mærkværdige forskelle mellem elementer, der har margin og/eller padding ...

-- udover margin:auto og ovennævnte er der en masse detaljer, som også fortolkes rigtigere med fuldt kvalificeret doctype, men M$ har eksplicit udmeldt, at de ikke understøtter css2, så der er en masse, der slet ikke understøttes under nogen omstændigheder !-)

Synes godt om

mclemens Nybegynder

25. marts 2006 - 17:17 #20

ok :)

havde dem her + xml'eren i mit document... læser lige links iaften 8)
(fjenet xml'eren)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da"><head>

Synes godt om

mclemens Nybegynder

25. marts 2006 - 18:30 #21

//OT

Alle mine ting kører via css idag også knapper m.v. :)
- Dog havde jeg denne ene "problemløser" i css'en grundet problemer med doctype(åbenbart... der kan dog være flere css tags der er unødvendige nu).
... Men alt er inde i css: Bruger php og mysql til dynamisk generering af html'en baseret på url via apache rewrite samt gzipped css fil ... denne fylder dog kun 3,73 kb(899 byte efter komprimering) ... gennemsnits html filerne fylder ca. 3,5-4kb(komprimeres ikke) - dog bruger jeg et filter:chroma(color=#000000); på 3 billeder i css og det er ikke lige så godt i FF... skal nok lige have den sorte farve transparent senere :/

OT//

Synes godt om

mclemens Nybegynder

26. marts 2006 - 00:20 #22

hov, Mads smid lige svaret så du kan få point ...

Kommentar: knutbl
17/03-2006 14:31:33 Thanks!
- can you make this an answer, and I'll give you some points?

Synes godt om

foxmulder58 Praktikant

27. marts 2006 - 13:53 #23

answer ;-)

BR
Mads

Synes godt om

knutbl Nybegynder

28. marts 2006 - 08:34 #24

Takk til alle som har kommentert og gitt sine svar i denne tråden!

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS