site content in het midden plaatsen
Ik wil het conten van een website precies in het midden van de brouwer weergeven. Hiervoor heb ik de klas site_conten gemaakt.
Wanneer ik de pagina nu bekijk, zie ik een houten achtergrond wat correct is, maar het vak waar de tekst in moet komen, staat niet in het midden.
dit is de css zover ik hem nu heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
@charset "utf-8";
/* CSS Document */
body {
background-image:url(images/page_t.jpg);
}
#site_content
{
background-image:url(images/sheet_c.png);
width: 1000 px;
height: 1000 px;
float: inherit;}
/* CSS Document */
body {
background-image:url(images/page_t.jpg);
}
#site_content
{
background-image:url(images/sheet_c.png);
width: 1000 px;
height: 1000 px;
float: inherit;}
Weet iemand misschien hoe ik ervoor kan zorgen dat het tekstvlak in het midden terecht komt?
Toevoeging op 27/01/2012 18:54:24:
margin: 0px auto; toevoegen aan je #site_content. Dat zou de oplossing moeten zijn.
Ik heb de code aangepast, maar wanneer ik nu de pagina bekijk, begint het tekstvlak nog steeds aan de linker kant van de browser.
Ik kan dit wel meer naar het midden laten komen met
Code (php)
1
margin-left: 100 px;
Mijn CSS ziet er nu dus als volgt uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@charset "utf-8";
/* CSS Document */
body {
background-image:url(images/page_t.jpg);
}
#site_content
{
background-image:url(images/sheet_c.png);
width: 1000 px;
height: 500 px;
float: inherit;
margin: 0px auto;
margin-left: px;}
/* CSS Document */
body {
background-image:url(images/page_t.jpg);
}
#site_content
{
background-image:url(images/sheet_c.png);
width: 1000 px;
height: 500 px;
float: inherit;
margin: 0px auto;
margin-left: px;}
Als je dit alles verbeterd zal het werken.
Ik het wat gegoogled en het is me ongeveer gelukt. Morgen nog maar eens verder zoeken
Jules Kreutzer op 28/01/2012 10:58:14:
maar dat verschijnt in de linker bovenhoek van de browser.
dan doe je toch iets fout. In het voorbeeld van Wouter staat het rode blok netjes in het midden van de pagina.
Breedte maakt niks uit. Kun je anders een online voorbeeldje van jou code geven? Ik denk dat je ergens een fout maakt met floats.
Hier heb ik de afbeelding naar geupload.
de css van deze pagina ziet er als volgt uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@charset "utf-8";
/* CSS Document */
body {
background-image:url(images/page_t.jpg);
}
#site_content
{
background-image:url(images/sheet_c.png);
width: 1000px;
height: 500px;
margin-left: 300px;
margin-bottom: 250px;
margin-top: 150px;}
img {
margin-left: 10px;}
/* CSS Document */
body {
background-image:url(images/page_t.jpg);
}
#site_content
{
background-image:url(images/sheet_c.png);
width: 1000px;
height: 500px;
margin-left: 300px;
margin-bottom: 250px;
margin-top: 150px;}
img {
margin-left: 10px;}
Toevoeging op 28/01/2012 12:29:53:
@Frank C, intressante pagina, ik ga hem straks als ik tijd heb even doorlezen!
Niet zo verwonderlijk dat het dan niet lukt.
En waar staat nou: margin: 0px auto; in je code?