[HTML/CSS] - Achtergrond centreren - tekst eroverheen

[Verwijderd]

Voor een vriend van me heb ik de volgende site gemaakt: www.dommissedesign.nl
Zoals je ziet, wordt de achtergrond gecentreerd en de tekst in de blokken geplaatst. Ik heb hiervoor div's gebruikt met absolute positie en mbv javascript de schermbreedte opgevraagd. Echter, dit lijkt me niet de beste oplossing. Als je het scherm verkleint/vergroot, moet je eerst refreshen voordat het er netjes op staat. Als je inzoomt gaat het ook niet goed...
Hoe zou ik dit beter kunnen aanpakken? Ik heb hier even gezocht en het volgende gevonden:

\[Html/css] centreren / achtergrondplaatje (Links doen het niet meer)

Wat me net te binnen schiet, is om het geheel in een div te zetten en deze div te centreren? En binnen de div kun je dan de posities absoluut aanspreken, zonder javascript? Maar volgens mij lost dit het probleem met in-/uitzoomen niet op...

[disjfa]

Waarom niet gewoon reltief positioneren in een container die je netjes centreert?

[LB Back]

Die background.jpg is nu body bg, kun je hem niet als div bg zetten?

[Verwijderd]

LB Back schreef op dinsdag 19 juni 2007 @ 13:25:
Die background.jpg is nu body bg, kun je hem niet als div bg zetten?

disjfa schreef op dinsdag 19 juni 2007 @ 13:23:
Waarom niet gewoon reltief positioneren in een container die je netjes centreert?

Dat bedacht ik me ook op het laatst. Dus een div ter grootte van de achtergrond en vervolgens daar absoluut bepalen hoeveel pixels binnen die div de andere div's moeten komen. Echter, lost dit het probleem van het inzoomen wel op? Op 100% gaat dat wel werken, maar als je inzoomt niet denk ik.

[LB Back]

je moet sowieso geen absolute pos gebruiken, alles in 1 div donderen en klaar ben je

[Verwijderd]

LB Back schreef op dinsdag 19 juni 2007 @ 13:34:
je moet sowieso geen absolute pos gebruiken, alles in 1 div donderen en klaar ben je

Ok, hoe krijg ik dan de tekst op de goede plaats op de achtergrond? Dat kan volgens mij alleen met absolute pos? Of ben ik nou gek...

[Kiphaas7]

Cascading Stylesheet:

#container {
margin:0px auto; /*centreert de boel automatisch*/
text-align:center; /*centreert de boel automatisch voor IE*/
background-image: link.naar.je.plaatje;
repeat:no-repeat;
}

HTML:

<div id="container">
blaaat
</div

Kunnen typefoutjes inzitten, maar dit is het algemene idee.... Geen js.

[Verwijderd]

Kiphaas7 schreef op dinsdag 19 juni 2007 @ 18:26:

Cascading Stylesheet:

#container {
margin:0px auto; /*centreert de boel automatisch*/
text-align:center; /*centreert de boel automatisch voor IE*/
background-image: link.naar.je.plaatje;
repeat:no-repeat;
}

HTML:

<div id="container">
blaaat
</div

Kunnen typefoutjes inzitten, maar dit is het algemene idee.... Geen js.

Ja oke, dan is de container dus de div waar het plaatje in komt te staan... Echter, hoe krijg ik dan de tekst precies in het bord dat de dame vast houdt? Dat moet ik toch absolute positioneren?

Bedankt iedereen iig.

[BlackIce]

Dat klopt, maar binnen een relatieve div kun je gewoon absolute positionering gebruiken, mits het een child is.

[Kiphaas7]

icemancool schreef op dinsdag 19 juni 2007 @ 21:38:
Dat klopt, maar binnen een relatieve div kun je gewoon absolute positionering gebruiken, mits het een child is.

Yup, dat zou je dan bijvoorbeeld zo kunnen uitbreiden:

Cascading Stylesheet:

#container { 
margin:0px auto; /*centreert de boel automatisch*/ 
text-align:center; /*centreert de boel automatisch voor IE*/ 
background-image: link.naar.je.plaatje; 
repeat:no-repeat; 
}

#content {
margin: 20px 0px 0px 10px; 
}

de 4 waardes staan achtereen volgens voor margin-top, margin-right, margin-bottom, margin-left.

HTML:

<div id="container"> 
 <div id="content">
 blaaat
 </div> 
</div

[Verwijderd]

Aha, bedankt! Dat van die margin wist ik nog niet, ik dacht dat je daar absolute position voor moest gebruiken. Ik ga het aanpassen . Bedankt.

Kiphaas7 schreef op woensdag 20 juni 2007 @ 01:28:
[...]


Yup, dat zou je dan bijvoorbeeld zo kunnen uitbreiden:

Cascading Stylesheet:

#container { 
margin:0px auto; /*centreert de boel automatisch*/ 
text-align:center; /*centreert de boel automatisch voor IE*/ 
background-image: link.naar.je.plaatje; 
repeat:no-repeat; 
}

#content {
margin: 20px 0px 0px 10px; 
}

de 4 waardes staan achtereen volgens voor margin-top, margin-right, margin-bottom, margin-left.

HTML:

<div id="container"> 
 <div id="content">
 blaaat
 </div> 
</div

[Verwijderd]

Heb het aangepast Werkt prima, bedankt!!!!