CSS probleem, dynamische content.

[MrVegeta]

Ik ben bezig met een website te ontwikkelen maar loop nu tegen een probleem aan waar ik niet uitkom

http://no-illusions.nl/projecten/friendchamp/backend.html

Het probleem is dat het vak met de tekst dynamisch is qua breedte en wel goed moet zijn uitgelijnd. In het bovenste vak moet de tekst naast het plaatje van de kat staan maar de tekst is te breed waardoor die er onder uitlijnt. Maar als ik de tekst een vaste breedte opgeef dan doet het vak eronder natuurlijk weer moeilijk.

Zo wil ik het hebben


En zo ziet het er uit



Ik heb al veel dingen geprobeerd maar ik krijg het niet voor elkaar.

[ Voor 7% gewijzigd door MrVegeta op 18-08-2011 17:11 ]

[ViNyL]

Als je alle content wil tonen ontkom je er niet aan dat je divs die meer ruimte nodig hebben zullen uitlopen naar beneden.Of je moet je content terugsnoeien naar een vast aantal characters en de div laten uitvouwen bv als iemand meer wil lezen? Dan kun je ze een vast hoogte meegeven zonder dat je er divs zijn die uit de pas gaan lopen bij teveel content. En de tekst eronder weergeven?

[ Voor 26% gewijzigd door ViNyL op 18-08-2011 16:57 ]

[BtM909]

Pffff, div-alicious

Het plaatje zoals je het weergeeft is hoe je het wilt hebben right? En wil je dat het grijze vlak gewoon doorloopt naar beneden ipv door je float onder je image (kat) terechtkomt?

[MrVegeta]

Het is inderdaad niet de meest nette code die ik heb geschreven maar heb een korte deadline voor oplevering. Optimalisatie komt daarna wel. Ik heb de ts even iets uitgebreid.

Voor het bovenste vak wil ik dat de tekst tussen het linker grijze hash teken (toch?) en het rechter pijltje komt te staan.

En voor het vak er onder moet het tussen de avatar aan de linkerkant tot het pijltje aan de rechterkant staan.

Makkelijke oplossing is natuurlijk om een class te geven maar dan is het hele idee van dynamische content ook weer van tafel

---

Wat ik zelf niet begrijp is dat als ik een div maak van 500px, een plaatje hier inzit aan de linkerkant (float:left) een <p> element maak met 100% width met een float:left dat die niet tegen het plaatje aangaat. Dat is een beetje het hele probleem hier.

Remember that relative sizes are relative to the containing element. If you say width: 50%, you'll get an element that's 1/2 the width of its container. So your saying width: 100% makes the text div take 100% of the container's width, and it becomes 500px as well.

Oh... dat wist ik nog niet.

otherwise you'd need to go with fixed with divs, and dynamically change the text div's width based on whether there's an image present or not. if (has image) { width: 350} else { width: 500} type of thing.

Hm, klinkt misschien ook als een oplossing...

[ Voor 45% gewijzigd door MrVegeta op 18-08-2011 17:19 ]

[Verwijderd]

MrVegeta schreef op donderdag 18 augustus 2011 @ 17:14:
Hm, klinkt misschien ook als een oplossing...

Met enige ervaring met soortgelijke problemen is dat inderdaad wat ik hier zou doen

[MrVegeta]

Leuk mag ik mijn jQuery skills weer oppoetsen

[Quadro!]

MrVegeta schreef op donderdag 18 augustus 2011 @ 17:14:
Makkelijke oplossing is natuurlijk om een class te geven maar dan is het hele idee van dynamische content ook weer van tafel

Hoezo? Ik neem aan dat je deze html uiteindelijk juist dynamisch zult genereren dmv een server-side applicatie? Dan is het toch een koud kunstje om een class aan die div mee te geven als er een foto getoond moet worden? Of er een foto geplaatst dient te worden is immers ook al een conditional.

[Bosmonster]

Het lijkt me dat je vanuit je backend gewoon weet of er een afbeelding bij staat of niet. Dus een class hier lijkt me een hele fatsoenlijke oplossing.

Je zegt daarnaast zelf dat het snel af moet, dus waarom je zoveel moeite doet om de meest moeilijke oplossing te vinden snap ik niet zo goed

[ Voor 32% gewijzigd door Bosmonster op 18-08-2011 20:37 ]

[Flowmo]

Een float:left op de afbeelding, die afbeelding als eerste in de broncode vóór de tekst plaatsen, class op de container div voor de achtergrond afbeelding en dan moet het klaar zijn lijkt me. Zo ingewikkeld is het allemaal niet.

[MrVegeta]

Ik weet niet wat je bedoeld qua achtergrond afbeelding maar het probleem was dus dat ik het zonder het een class te geven wilde oplossen. Maar blijkbaar als je een <img float:left;><p>tekst hier tekst hier tekst hier tekst hier tekst hier tekst hier tekst hier tekst hier tekst hier </p> en de wrapper (of container) waar het zich in bevind is te klein dan float het p element er onder al heb je beide een float left gegeven.

[OkkE]

Het gebruik van een extra class maakt het gewoon een stuk eenvoudiger. Als je persé zonder extra class wil werken, oude browsers niet hoeft te ondersteunen en bepaalde source-code kan/wil afdwingen, is zoiets een oplossing:

http://jsfiddle.net/okke/9DUVB/

Eventueel zou je zelfs met :first-child en :last-child kunnen werken, zodat ook de .figure niet nodig is.

[ Voor 7% gewijzigd door OkkE op 19-08-2011 14:08 ]

[Bosmonster]

Ow dat is niet eens zo'n gekke oplossing met :first-child.

Als je de img eerst hebt en de div aanspreekt met div:first-child, dan pakt ie die styling alleen als er geen img staat (of welke combinatie van elementen/classes je ook gebruikt).

Dat is gewoon IE7+ compatible.

Even quick & dirty:

http://jsfiddle.net/fHpUn/

[ Voor 29% gewijzigd door Bosmonster op 19-08-2011 14:40 ]

[MrVegeta]

De uiteindelijke oplossing is gelukkig een stuk makkelijker. Ik was wat te fanatiek met float:left aan het strooien geweest.

Ik heb dus de float:left van het p element gehaald, de plaatjes daar ingezet zodat de tekst om de plaatjes heen gaat! Eigenlijk heel simpel

[Bosmonster]

Maar dan heb je toch nog steeds niet het design dat je wilde hebben?

[MrVegeta]

Nog niet goed crossbrowser getest maar in Chrome werkt het aardig,
http://no-illusions.nl/projecten/friendchamp/backend.html