[Html/css] centreren / achtergrondplaatje

[mocean]

De site met vieze frameset:
http://baars.mocean.nl/site2/

Mijn verbetering naar HTML met DIVjes en CSS
http://baars.mocean.nl/site3/

Nu kom ik in de problemen want ik wil:
-de content in het midden
-de foto rechts moet het beeld opvullen zover mogelijk, dus als achtergrond van die DIV.

Problemen:
-Menubreedte wil ik niet vastzetten (ivm verschillende resoluties), hoe houd ik de content dan gecentreerd?
-Hoe zorg ik dat de foto rechts doorloopt en geen scrollbalken veroorzaakt.

Ik ben ervan overtuigd dat met DIVjes en CSS hetzelfde te bereiken is als met Tables en framesets... maar hoe...

[RwD]

centreren kan door alle div's in een container div te plaatsen, en de stijl hiervan in te stellen op "text-align:left".
Stel nu voor het body element de text-align in op center...

Verticaal centreren is een ander verhaal.

Verder ga je naar csszengarden alwaar je links ziet staan naar allerlei voorbeelden in css ontwerpen als ook links naar sites die assisteren bij problemen met css (buiten tweakers dan heh )

offtopic:
Stel de achtergrondkleur van je body ook in op wit (in jouw geval) bij mij is de achtergrond gelig vanwege mn windows instellingen (speciaal om dit soort problemen te vinden)

[ Voor 26% gewijzigd door RwD op 12-11-2004 16:41 ]

[mocean]

RwD schreef op vrijdag 12 november 2004 @ 16:39:
centreren kan door alle div's in een container div te plaatsen, en de stijl hiervan in te stellen op "text-align:left".
Stel nu voor het body element de text-align in op center...

[...]

Tuurlijk, ik heb een main-div met text-align: center, maar ik zit te klooien met het float property van de divs daarbinnen, heb ze nu op left staan.

Probleem blijft dat ik de div met eiegenlijke content gecentreerd wil hebben, en dan links het menu ertegenaan, en rechts de foto.

Maar goed, ik ga ff naar je urletje kijken!

[Verwijderd]

RwD schreef op vrijdag 12 november 2004 @ 16:39:
centreren kan door alle div's in een container div te plaatsen, en de stijl hiervan in te stellen op "text-align:left".
Stel nu voor het body element de text-align in op center...

Verticaal centreren is een ander verhaal.

Verder ga je naar csszengarden alwaar je links ziet staan naar allerlei voorbeelden in css ontwerpen als ook links naar sites die assisteren bij problemen met css (buiten tweakers dan heh )

offtopic:
Stel de achtergrondkleur van je body ook in op wit (in jouw geval) bij mij is de achtergrond gelig vanwege mn windows instellingen (speciaal om dit soort problemen te vinden)

Deze manier kan je gebruiken voor IE, voor meer zie http://www.quirksmode.org/css/centering.html

[disjfa]

De main div staat toch in het midden. Het midden van 100% wat jij erin hebt gezet.

Ik zou daar een bepaalde breedte meegeven en daarbij een margin:0 auto; meegeven zodat deze in het midden komt te staan

[mocean]

disjfa schreef op vrijdag 12 november 2004 @ 16:46:
De main div staat toch in het midden. Het midden van 100% wat jij erin hebt gezet.

Ik zou daar een bepaalde breedte meegeven en daarbij een margin:0 auto; meegeven zodat deze in het midden komt te staan

Ja, als ik de main div geen breedte opgeef wordt die:
breedte menu + breedte content + breedte foto

breedte menu is afhankelijk van de langste naam die erin staat en met het oog op verschillende resoluties wil ik geen width meegeven. En van de foto moet meer of minder worden weergegeven, afhankelijk van de resolutie. Zie het effect op http://baars.mocean.nl/site2/ als je het browservenster verkleind.

Ik zal even een overzichtje maken in een plaatje:

[ Voor 9% gewijzigd door mocean op 12-11-2004 16:59 ]

[RwD]

je defineerd voor je main div idd text-align:center.
Vervolgens zet je voor de content float:left;

Volgens mij gaat dat niet samenwerken.


Ik weet niet hoe goed deze oplossing is, maar:
- maak om je main div maak je gewoon nog een container,
- daaring zet je "text-align:center" en dan
- zet je in de main div "text-align:left"
Volgens mij heb je dan wat je wilt zolang de nieuwe container OF in het midden staat, of 100% breed is. (en aangezien deze toch doorzichtig is boeit dat niet)