[css] img breder dan div > img erbuiten

[Civil]

Ik loop tegen een probleempje aan als plaatjes breder zijn als mijn content. Nu wil ik de plaatjes er dan gewoon buiten laten vallen. Maar dat wil nog geheel lukken.

Wat ik wil doet firefox automatisch al goed, IE maakt er alleen iets heel anders van.
Firefox laat de img namelijk gewoon buiten de layer doorlopen en verbreedt de layer niet. IE verbreed de layer wel, maar de tekst houdt wel gewoon de oorspronkelijke breedte aan van de layer.

Voor een versimpeld voorbeeldje zie hier als je dit met firefox bekijkt zie je wat ik wil bereiken (zal ik mozilla etc vast ook goed gaan), in IE werkt het echter heel anders.

Nu zou ik graag willen weten hoe ik hetzelfde als in firefox ook kan bereiken in IE. Dit zou toch mogelijk moeten zijn lijkt me, ik heb alleen geen idee hoe.

position: absolute; lijkt erop maar dan gaat het uiteraard mis met de tekst onder de image. Je haalt de image dan uit de flow natuurlijk, dus de rest van de tekst houdt geen rekening meer met de image.
de clear property werkt volgens mij alleen in samenwerking met float's, maar ik heb het idee dat ik ook daarmee niet veel verder kom.

Eigenlijk houden mijn ideeen op dit moment hier wel even op, ik heb namelijk geen idee waar ik de oplossing zou moeten zoeken. Wie kan mij op weg helpen

[Willem]

De width uit de <div> halen?

[coubertin119]

En wat doet een overflow: visible?

[Civil]

willem169 schreef op 09 april 2004 @ 11:21:
De width uit de <div> halen?

hehe die div heeft uiteraard een vaste breedte

coubertin119 schreef op 09 april 2004 @ 11:22:
En wat doet een overflow: visible?

Niet veel, neem aan dat die op de div moet. Maar dat helpt niet echt in IE 6.0.

[Willem]

En een hogere z-index?

[Civil]

willem169 schreef op 09 april 2004 @ 11:29:
En een hogere z-index?

Nope, z-indexen hebben hier imo niets mee te maken, zoals overigens ook blijkt na het toch getest te hebben

[BtM909]

Civil schreef op 09 april 2004 @ 11:34:
[...]

Nope, z-indexen hebben hier imo niets mee te maken, zoals overigens ook blijkt na het toch getest te hebben

Tuurlijk wel... Je zou die img absoluut kunnen positioneren, dan gaat z-index een rol spelen

edit:

Is dit niet wat je wilt Moet je trouwens wel ff voor scrollen naar beneden: http://www.hut.fi/u/hsivonen/doctype.html

[ Voor 18% gewijzigd door BtM909 op 09-04-2004 11:41 ]

[Civil]

BtM909 schreef op 09 april 2004 @ 11:37:
[...]

Tuurlijk wel... Je zou die img absoluut kunnen positioneren, dan gaat z-index een rol spelen

edit:

Is dit niet wat je wilt Moet je trouwens wel ff voor scrollen naar beneden: http://www.hut.fi/u/hsivonen/doctype.html

dan krijg je dit effect, dan valt de tekst die na de image komt onder de image. Of er moet een oplossing zijn om die weer netjes onder de image te krijgen, dit heb ik namelijk vooraf ook al geprobeerd?

overflow visible
paragraphs en absolute, dat werk ook niet (logisch)

[ Voor 16% gewijzigd door Civil op 09-04-2004 12:13 ]

[EdwinG]

http://www.w3schools.com/css/pr_pos_overflow.asp

Volgens deze pagina zou

code:

p {  overflow: visible; }

In je css het probleem moeten oplossen.

Kun je misschien een screenshot plaatsen van hoe het er onder IE uitziet?

[EdwinG]

Civil schreef op 09 april 2004 @ 11:46:
[...]

dan krijg je dit effect, dat valt de tekst die na de image komt onder de image. Of er moet een oplossing zijn om die weer netjes onder de image te krijgen, dit heb ik namelijk vooraf ook al geprobeerd?

Als je de beide tekstdelen (voor en na het plaatje) nu in een aparte <p></p> gooit, en de posities relatief maakt?

[Verwijderd]

En het plaatje zelf ook ergens instopt. Het is sowieso altijd verstand paragrafen met een P aan te geven.

[Civil]

Verwijderd schreef op 09 april 2004 @ 11:56:
En het plaatje zelf ook ergens instopt. Het is sowieso altijd verstand paragrafen met een P aan te geven.

Dat weet ik, maar is in dit geval niet altijd mogelijk.

Met position absolute haal je de image uit de flow vandaan, de tekst eronder houdt dan geen rekening meer met de image. Ook niet als die in een <p> (paragraph) staat.

overflow: visible; wat naar mijn mening ook zou moeten werken haalt in IE helemaal niets uit.

[Verwijderd]

Mwaj, 'margin-top' bestaat ook nog.

Iets anders: haal a.u.b. die comments weg binnen het STYLE element. Als je het echt als XHTML zou versturen (XML content-type) zou er niks gestijld zijn nu.

edit:
Het wordt natuurlijk nu gewoon pijnlijk duidelijk hoe slecht IE 'width' ondersteund en 'min-width' goed, maar dan anders.

[ Voor 28% gewijzigd door Verwijderd op 09-04-2004 12:04 ]

[Civil]

Verwijderd schreef op 09 april 2004 @ 12:02:
Mwaj, 'margin-top' bestaat ook nog.

Iets anders: haal a.u.b. die comments weg binnen het STYLE element. Als je het echt als XHTML zou versturen (XML content-type) zou er niks gestijld zijn nu.

edit:
Het wordt natuurlijk nu gewoon pijnlijk duidelijk hoe slecht IE 'width' ondersteund en 'min-width' goed, maar dan anders.

Je bedoelt margin-top geven aan de paragraph onder de image neem ik aan. De hoogte van de image is variabel dus daar kan ik niet zo heel veel mee?
Als de image 200px is zou de margin dus ook iets van 200px moeten zijn.

offtopic:
Die comment tags zijn nu niet zo heel interessant, in dit voorbeeld staat de css in het document die staat normaal gewoon in een stylesheet, niet zo heel erg van belang dus in dit geval.
Maar ik wijzig het wel ff

edit:
wat betreft je edit heb je helemaal gelijk, maar jah het is nu eenmaal zo

[ Voor 8% gewijzigd door Civil op 09-04-2004 12:09 ]

[Verwijderd]

Je bedoelt margin-top geven aan de paragraph onder de image neem ik aan. De hoogte van de image is variabel dus daar kan ik niet zo heel veel mee?
Als de image 200px is zou de margin dus ook iets van 200px moeten zijn.

Correct. Ik zie ook niet veel andere mogelijkheden.

(Bij 'overflow' anders dan 'visible' heeft IE trouwens wel door hoe 'width' werkt, maar dat geeft het gewenste effect niet.)