css centreren
Moet ik dit oplossen in het css bestand of in de code van mijn site?
Gewijzigd op 01/01/1970 01:00:00 door L P
<div id="header></div>
je site gegevens...
<div id="footer></div>
</div>
#wrapper {
margin-left:auto;
margin-right:auto;
}
edit:
Bleek niet nodig
Gewijzigd op 01/01/1970 01:00:00 door L P
Je moet aan de div #wrapper een margin meegeven. Nl: margin: 0 auto 0 auto;
Margin is opgebouwd als volgt: <top> <right> <bottom> <left>.
Top en bottom moeten 0 zijn, tenminste, in eerste instantie. De div moet automatisch de rechtse en linkse marges krijgen, dus via auto.
Zo wordt de div #wrapper in het midden gezet.
edit: typo.
Gewijzigd op 01/01/1970 01:00:00 door Jesper Diovo
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
#wrapper {
width: 800px;
min-height: 100%;
height: 100%;
margin: 0 auto 0 auto;
padding: 0;
background: url(images/img03.jpg) repeat-y left top;
margin-left:auto;
margin-right:auto;
}
width: 800px;
min-height: 100%;
height: 100%;
margin: 0 auto 0 auto;
padding: 0;
background: url(images/img03.jpg) repeat-y left top;
margin-left:auto;
margin-right:auto;
}
Als je eenmaal margin hebt gedefinieerd, hoef je margin-left en margin-right niet meer te definieren. Dit zijn namelijk afsplitsingen voor één bepaalde marge.
Gewijzigd op 01/01/1970 01:00:00 door Jesper Diovo
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
#wrapper {
width: 800px;
min-height: 100%;
height: 100%;
padding: 0;
background: url(images/img03.jpg) repeat-y left top;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
width: 800px;
min-height: 100%;
height: 100%;
padding: 0;
background: url(images/img03.jpg) repeat-y left top;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
beter? werkt alleen nog steeds niet
Code (php)
1
margin: 0 auto 0 auto;
ipv
Code (php)
1
2
3
4
2
3
4
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#wrapper {
width: 800px;
min-height: 100%;
height: 100%;
padding: 0;
background: url(images/img03.jpg) repeat-y left top;
margin: 0 auto 0 auto;
}
width: 800px;
min-height: 100%;
height: 100%;
padding: 0;
background: url(images/img03.jpg) repeat-y left top;
margin: 0 auto 0 auto;
}
met nog steeds hetzelfde resultaat
want in IE7 staat hij bij mij goed.
Als het voor IE6 is moet je in de #wrapper nog text-align: center; zetten
en dan wel bij alle div'jes waar de tekst anders moet uitgelijnd worden op left ofzo zetten
Edit:
Dit moet je toevoegen aan je stylesheet, dit hierboven klopt niet. Ik was mis
body,html
{
text-align: center;
}
Dit moet je toevoegen aan je stylesheet, dit hierboven klopt niet. Ik was mis
body,html
{
text-align: center;
}
Gewijzigd op 01/01/1970 01:00:00 door Pieter Boussaer
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
body {
text-align: center; // Voor IE4 and up
}
#wrapper {
margin: 0 auto;
text-align: left; // Om de tekst weer te de-centeren
}
text-align: center; // Voor IE4 and up
}
#wrapper {
margin: 0 auto;
text-align: left; // Om de tekst weer te de-centeren
}
Bron: flumpcakes.co.uk