[CSS] Div horizontaal centreren wil niet, - Softwareontwikkeling

zaterdag 9 april 2005 18:24

Acties:

Topicstarter

ik heb al naar dit probleem gezocht, maar geen oplossingen gevonden gezien de antwoorden de zelfde code waren.
Ik moet dus de div van de container centreren, maar dat wil niet
Dit is mijn code:

code:

1
2

body {background: #C70E0E url(./images/background.png); background-repeat:repeat-x; padding: 0; margin:0px auto; padding:0px;}
div#container {background: url(./images/container.png); background-repeat:repeat-y; margin:0px auto; width: 724; height: 600;}

ook als ik position: absolute toevoeg aan de #container wil ie nog niet..
wie kan mij helpen ?

zaterdag 9 april 2005 18:26

Acties:

Sjoerd

div align='"center"

dit moet tochj gewoon werken niet? Wanneer je dit in je HTML code zet?
Of snap ik je vraag niet helemaal.

[ Voor 25% gewijzigd door Sjoerd op 09-04-2005 18:27 ]

Modelbouw - Alles over modelbouw, van RC tot diorama

zaterdag 9 april 2005 18:35

Acties:

Vinzzz243

zet eens px achter je height en width. Om te centreren in IE heb je text-align: center nodig in je body

zaterdag 9 april 2005 18:36

Acties:

JHS

Splitting the thaum.

langezwieper: Dat is natuurlijk geen goede oplossing, de TS wil klaarblijkelijk, en terecht, css gebruiken, dus ga je er geen align attribute aan het div element hangen...

Ewald !: Achter een 0 hoeft natuurliijk geen px

. Maar wat gebeurt er als je het volgende toevoegt?

Cascading Stylesheet:

1
2
3

div#container {
    position: relative;
}

Als dat het niet is, heb je dan misschien een testcase online?

edit:

Vinzzz: In standards mode niet hoor?

[ Voor 8% gewijzigd door JHS op 09-04-2005 18:38 ]

DM!

zaterdag 9 april 2005 18:39

Acties:

Ewald !

Topicstarter

JHS schreef op zaterdag 09 april 2005 @ 18:36:
langezwieper: Dat is natuurlijk geen goede oplossing, de TS wil klaarblijkelijk, en terecht, css gebruiken, dus ga je er geen align attribute aan het div element hangen...

Ewald !: Achter een 0 hoeft natuurliijk geen px . Maar wat gebeurt er als je het volgende toevoegt?
Cascading Stylesheet:
1
2
3
div#container {
    position: relative;
}
Als dat het niet is, heb je dan misschien een testcase online?

edit:
Vinzzz: In standards mode niet hoor?

nee, heeft ook geen zin

see for yourself: http://80.100.120.40

met deze code wil het ook niet..

code:

1
2

body {background: #C70E0E url(./images/background.png); background-repeat:repeat-x; padding: 0; margin:0px auto; padding:0px; text-align: center}
#container {background: url(./images/container.png); background-repeat:repeat-y;[b] margin-left:auto; margin-right:auto; [/b]width: 724; height: 600; position: relative; text-align:left;}

ik gerbuik de browseres Firefox en nu even IE. In DreamWeaver is ie wel gecentreerd..

[ Voor 27% gewijzigd door Ewald ! op 09-04-2005 18:47 ]

zaterdag 9 april 2005 18:45

Acties:

JHS

Splitting the thaum.

Doe dan eens een 4.01 Strict doctype toevoegen:

HTML:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Zie namenlijk hier

.

DM!

zaterdag 9 april 2005 18:47

Acties:

Verwijderd

In je body: width: 100%; height: 100%

In div#container: left: 50%; margin-left: -364px;

Als hij ook verticaal moet gecentreerd worden, in je div#container: top: 50%; margin-top: -300px;

zaterdag 9 april 2005 18:50

Acties:

Pjottski

🦍 Monkey 🦍

Misschien helpt het ook iets als de waarde van de hoogte en de breedte van je div ook een eenheid hebben.

Dit is mijn uitspraak en daar zult u het mee moeten doen

zaterdag 9 april 2005 18:51

Acties:

Ewald !

Topicstarter

de oplossing van JHS werkt niet..
de oplossing van Michelangelo werkt half, hij is nu wel gecentreerd in FF, alleen heb ik een scrollbalk horizontaal die mijlen ver gaat en in IE werkt ie weer niet..

zaterdag 9 april 2005 18:57

Acties:

Verwijderd

Ewald ! schreef op zaterdag 09 april 2005 @ 18:51:
de oplossing van JHS werkt niet..
de oplossing van Michelangelo werkt half, hij is nu wel gecentreerd in FF, alleen heb ik een scrollbalk horizontaal die mijlen ver gaat en in IE werkt ie weer niet..

code:

body 
{background: #C70E0E url(./images/background.png); 
 padding: 0px 0px 0px 0px; 
 width: 100%;
 height: 100%;}

div#container 
 {background: url(./images/container.png); 
  width: 724px; 
  height: 600px;
  left: 50%;
  height: 50%:
  margin-left: 364px;
  margin-top: 300px;
  }

Probeer deze eens (px bij je waardes niet vergeten).

[ Voor 6% gewijzigd door Verwijderd op 09-04-2005 18:59 ]

zaterdag 9 april 2005 19:06

Acties:

JHS

Splitting the thaum.

Ewald ! schreef op zaterdag 09 april 2005 @ 18:51:
de oplossing van JHS werkt niet..
de oplossing van Michelangelo werkt half, hij is nu wel gecentreerd in FF, alleen heb ik een scrollbalk horizontaal die mijlen ver gaat en in IE werkt ie weer niet..

Als ik dit van je code maak staat hij bij mij toch echt keurig in het midden?

Cascading Stylesheet:

#container { 
    background: url(./images/container.png); background-repeat:repeat-y; width: 724; height: 600; 
    /* in het midden */
    position: relative; margin: 0 auto;
}

Zowel in IE als in FF. Overigens is het aan te raden HTML 4.01 Strict in plaats van XHTML 1 Transitional te gebruiken. Zie een hele hoop topics in dit forum waarom, waaronder hier

. Maar zoek maar even verder als je wil weten waarom

.

[ Voor 4% gewijzigd door JHS op 09-04-2005 19:07 ]

DM!

zaterdag 9 april 2005 19:08

Acties:

Ewald !

Topicstarter

Verwijderd schreef op zaterdag 09 april 2005 @ 18:57:
[...]

code:

body 
{background: #C70E0E url(./images/background.png); 
 padding: 0px 0px 0px 0px; 
 width: 100%;
 height: 100%;}

div#container 
 {background: url(./images/container.png); 
  width: 724px; 
  height: 600px;
  left: 50%;
  height: 50%:
  margin-left: 364px;
  margin-top: 300px;
  }

Probeer deze eens (px bij je waardes niet vergeten).

ik weet het niet meer...