div met display: table-cell centreren - Softwareontwikkeling

dinsdag 16 maart 2004 14:24

Acties:

Topicstarter

Ik ben bezig met een pagina waarbij de body een achtergrondafbeelding heeft die zichzelf alle kanten op herhaalt. Nu heb ik in een container ook een achtergrondafbeelding staan die zichzelf alleen naar beneden toe herhaalt.
Alleen nu is het probleem dat de container niet meerekt met de 2 divs die binnen de container staan.
Ik wil dus dat de container even hoog wordt als de content-divs erin, zodat de achtergrond goed doorloopt. Ik kan de achtergrond afbeelding niet in de body zetten, omdat deze al een achtergrondafbeelding heeft.
Met behulp van de GoT search heb ik gevonden dat een display: table-cell in de container wil helpen (het werkt ook) alleen brengt dit een ander probleem met zich mee, namelijk dat mijn container links uitgelijnd wordt. Nu krijg ik dit met geen mogelijkheid meer gecentreerd, dus is mijn vraag of er een manier is om mijn container toch weer gecentreerd te krijgen?

Mijn css van de drie divjes ziet er nu zo uit:

Cascading Stylesheet:

div#oContainer  {
    display: table-cell;
    width: 750px;
    text-align: left;
    margin: 0 auto;
    background: url('/oBackground.jpg') top center repeat-y;
    height: 100%;
    min-height: 100%;
}
    div#sSubMenu  {
        float: left;
        width: 334px;
        background: url('/spring_2004_fFoto.jpg') top center no-repeat;
        padding: 600px 0 0 4px;
    }
    div#oContent  {
        float: right;
        height: 100%;
        padding: 55px 0 0 13px;
        width: 416px;
        background: url('/spring_2004_tTop.jpg') top right no-repeat;
    }

Mijn html is een beetje groot en onnodig om te posten. Is gewoon een container met 2 divs met content erin. In ieder geval mijn pagina staat hier.
In Internet Explorer werkt alles trouwens prima (met of zonder display: table-cell trouwens ook). Het probleem zit hem bij Firefox

dinsdag 16 maart 2004 14:33

Acties:

faabman

wanneer je wil dat de oContainer meerekt dan kun je proberen om na de beide floating divs binnen de oContainer div een divje te zetten met

HTML:

1	<div style="width:100%; height:0px; clear:all;"></div>

edit:
zie ook: RM-rf in "Plaatje valt gedeeltelijk buiten div"

[ Voor 39% gewijzigd door faabman op 16-03-2004 14:37 ]

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

dinsdag 16 maart 2004 14:38

Acties:

kleautviool

Topicstarter

Werkt niet, heb ik geprobeerd

dinsdag 16 maart 2004 14:45

Acties:

X-Lars

Just GoT it.

Kun je niet je hele website in zoiets gooien (alleen de horizontale centrering dan): http://annevankesteren.nl/test/templates/center-hv

Dus met left:50%; en een negatieve margin-left van de helft van de breedte.

dinsdag 16 maart 2004 15:03

Acties:

faabman

kleautviool schreef op 16 maart 2004 @ 14:24:
Ik kan de achtergrond afbeelding niet in de body zetten, omdat deze al een achtergrondafbeelding heeft.

je kunt die bg die je nu op je <body> toepast toepassen op je <html>, dan kun je op je body de bg van de oContainer toepassen...

zie voor verder info:
http://www.alistapart.com/articles/fauxcolumns/ (maar, die had je, gelet op de links op je eigen site, als gevonden

)

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

dinsdag 16 maart 2004 15:26

Acties:

kleautviool

Topicstarter

Hey idee is goed

Hmm.. vaag. Als ik die achtergrond die ik nu op de container heb, in de body zet blijft het probleem hetzelfde. De achtergrond (in html nu) wordt goed herhaalt, maar de achtergrond in de body stopt weer

Terwijl toen ik de achtergrond die nu in de html staat (en dus helemaal herhaalt word) in de body had staan, werd deze ook helemaal tot onderaan herhaalt, maar nu met die nieuwe achtergrond-afbeelding niet

Iemand daar een verklaring voor?

dinsdag 16 maart 2004 15:30

Acties:

Verwijderd

Ja: http://annevankesteren.nl/archives/2004/02/canvas

Daar staat exact hoe het werkt. Zie ook gelinkte posts waar nog wat andere dingen staan.