[CSS] Positioneren van boxen. ICM floats.

[Verwijderd]

Ik heb een IFrame, waarin in elke hoek een plaatje moet komen te staan, met wat tekst 'over' het plaatje.

Verder moet de pagina gevuld worden met tekst. (niet zo heel gek veel tekst).
Alles wordt resolutie onafhankelijk gemaakt, dwz. ik heb geen totale vaste breedte.

Nu is het gelukt om de 2 boxen bovenin te krijgen, en netjes te laten floaten (zodat de tekst er niet achter of over heen duikt)

Echter wil het niet lukken met de 2 boxjes op de bodem.
OF ik krijg de box niet op de bodem (position static/fixed/relative)
OF de tekst jast over het boxje heen (position absolute, waarbij float genegeerd wordt)

Is hier misschien een oplossing voor die ik compleet over het hoofd heb gezien ?
De CSS manual zei botweg dat het niet kan, maar mijn ervaring is dat met CSS bijna alles kan

[Verwijderd]

http://steve.pugh.net/test/test57.html ?

[Pelle]

Wat heb je zelf al geprobeerd?

[Verwijderd]

Pelle schreef op 22 maart 2004 @ 13:21:
Wat heb je zelf al geprobeerd?

Wat ik zelf al geprobeert heb is met de position / display en float properties van beide (bottom pics en tekst) DIVs puzzelen of er niet een combinatie was die toch zou werken . . . Helaas heb ik deze na bijna 2 uur spitten niet gevonden.

De search zou ik graag gebruiken, maar op css+position+float krijg je al 16 pagina's ofzo. . . dus vrij lastig om dat allemaal door te spitten.

De handleiding van phpfreaks er op nageslagen. . .

Verder hier gepost

[Verwijderd]

Verwijderd schreef op 22 maart 2004 @ 13:00:
http://steve.pugh.net/test/test57.html ?

Totaal niet wat ik bedoel.

Het gaat niet om een header en een footer. Da's goed te doen.

Je zou het zo kunnen zien (wat ik wil bereiken dus):

je hebt 3*3 vlakken
in vakje 1, 3, 7 en 9 komt een foto

vakje 2,4,5,6 en 8 moeten 'samen gesmolten' worden tot 1 geheel, waar de tekst in komt te staan.

(dit om een idee te geven van wat ik wil bereiken. . .)
op deze manier gaat het niet werken. moet gewoon 4 divs maken voor de foto's
de 2 top div's zijn gelukt, maar de 2 bottom div's willen niet


Ter illustratie wat er bedoeld wordt.
De tekst wordt netjes om het bovenste blokje heen gewerkt, echter verdwijnt deze onder het onderste blokje

[ Voor 17% gewijzigd door Verwijderd op 22-03-2004 14:02 ]

[InZane]

Kun je toevallig niet iets online zetten?

[defl8te]

Je wilt dus een object maken dat meeschaalt? mi heb je dan wel een header en footer nodig, alleen dan van die bepaalde div en niet de body

[Verwijderd]

Dat is wat ik nu heb. . . .
NIET MOOI!

boven in wordt de tekst netjes afgebroken, maar onderin niet.

HTML:

<div style="
    background-image:   url('images/pand_utrecht_50.jpg');
    background-repeat:  no-repeat;
    background-position:    center center;
    border:         solid 1 red;
    top:            10px;
    left:           10px;
    width:          211px;
    height:         150px;
    position:       fixed;
    float:          left;
">
Utrecht
</div>
<div style="
    background-image:   url('images/pand_tiel_50.jpg');
    background-repeat:  no-repeat;
    background-position:    center center;
    border:         solid 1 red;
    top:            160px;
    right:          10px;
    width:          211px;
    height:         150px;
    float:          right;
">
Tiel
</div>

Dat zijn de 2 top's en die doen het goed!!

HTML:

<div style="
    background-image:   url('images/pand_breda_50.jpg');
    background-repeat:  no-repeat;
    background-position:    center center;
    border:         solid 1 red;
    bottom:         10px;
    left:           10px;
    width:          211px;
    height:         150px;
    float:          left;
    position:       absolute;
">
Breda
</div>

Deze krijg ik alleen goed gepositioneerd met position: absolute maar in dat geval, wordt float: left volledig genegeerd. . . .
DAT is het probleem! ik wil hem dus onder gepositioneerd hebben, EN met een float . . . .

Ik hoop dat het probleem nu wel duidelijk is

Excuses voor mijn wazige startpost, was toch kennelijk niet zo'n easy to explain probleem

[Verwijderd]

Jij hebt CSS3 floats nodig denk ik. En dan nog vraag ik me af in hoeverre het mogelijk is ( http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-float ).