Positionering van elementen

[DynamicDreams]

Na veel proberen, Googelen en het bekijken van tutorials moet ik toch echt concluderen dat ik nu iets wil met CSS waar ik niet uit kom. Het gaat over een 'creatieve' wijze van positioneren van elementen.

Een CMS geeft de volgende data als output (waarbij ik de volgorde daarvan NIET kan veranderen):

HTML:

<div class="container">
<div class="title">Hier komt de titel</div>
<div class="article"><img src="./temp/img3.jpg"><p>Phasellus tincidunt pharetra mauris, sit amet venenatis mauris gravida vitae. Curabitur placerat, 

lectus vel mattis elementum, odio dolor suscipit neque, sed congue diam libero ac odio. Suspendisse tempus, arcu eget dignissim egestas, ligula mi 

dapibus justo, quis dapibus ipsum arcu nec ipsum. In eu justo sit amet eros gravida scelerisque. Aliquam tortor risus, malesuada et pharetra et, 

facilisis ac lacus. Integer vulputate, enim a eleifend euismod, ligula massa tristique nibh, in congue elit neque eget tellus.</p></div>
</div>

Voor de opmaak en positionering heb ik nu deze stylesheet:

Cascading Stylesheet:

body{
    font-family: "Trebuchet MS",Helvetica,Jamrul,sans-serif;
    color: #666666;
}
div.container {
    width: 400px; 
}
div.title{
    font-size: 20px;
    font-weight: bold;
}
div.article{}
div.article img{
    border: 10px solid red;
    float:left;
}
div.article p{}

Het resultaat is dit:


Alleen, dat is niet het resultaat dat ik wil hebben. Ik wil hebben dat het er zo uit ziet:


Ik wil dus hebben dat de titel naast de afbeelding komt te staan en de tekst op 20px afstand van de titel. Ik moet dus eigenlijk creatief gaan schuiven. Nou heb ik geprobeerd om met relatieve positionering het een en ander voor elkaar te krijgen, maar steeds schuift mijn gewone tekst niet mee.

Kan iemand mij een aanwijzing geven welke richting ik moet zoeken?

[RobIII]

DynamicDreams schreef op vrijdag 22 juli 2011 @ 15:27:
Kan iemand mij een aanwijzing geven welke richting ik moet zoeken?

Je moet 't in deze richting zoeken:

DynamicDreams schreef op vrijdag 22 juli 2011 @ 15:27:
(waarbij ik de volgorde daarvan NIET kan veranderen):

Dat is dan weliswaar niet wat je wil horen, maar het is de enige oplossing die geen symptoombestrijding is.
Je zou naar een JS oplossing kunnen kijken die de IMG uit de DOM haalt en op de juiste plek weer terug zet. Maar daar wordt 't niet mooi(er) op.

[ Voor 4% gewijzigd door RobIII op 22-07-2011 15:38 ]

[Naranya]

Als je image een vaste grootte heeft kun je je title een margin-left en een min margin-bottom geven.

[RobIII]

Naranya schreef op vrijdag 22 juli 2011 @ 15:35:
Als je image een vaste grootte heeft kun je je title een margin-left en een min margin-bottom geven.

Gegeven het feit dat 't om een CMS gaat acht ik de kans klein. Maar het kan inderdaad.

[AtleX]

DynamicDreams schreef op vrijdag 22 juli 2011 @ 15:27:

HTML:

<div class="container">
<div class="title">Hier komt de titel</div>
<div class="article"><img src="./temp/img3.jpg"><p>Phasellus tincidunt pharetra mauris, sit amet venenatis mauris gravida vitae. Curabitur placerat, 

lectus vel mattis elementum, odio dolor suscipit neque, sed congue diam libero ac odio. Suspendisse tempus, arcu eget dignissim egestas, ligula mi 

dapibus justo, quis dapibus ipsum arcu nec ipsum. In eu justo sit amet eros gravida scelerisque. Aliquam tortor risus, malesuada et pharetra et, 

facilisis ac lacus. Integer vulputate, enim a eleifend euismod, ligula massa tristique nibh, in congue elit neque eget tellus.</p></div>
</div>

Ik weet niet wat je wel kan veranderen aan dat CMS, maar dit is natuurlijk verre van semantisch. En ik ga met RobIII mee, als je de template niet aan kunt passen zul je op zo'n hoogst iets kunnen bereiken met rare hacks die je in de toekomst weer dwars kunnen gaan zitten.

[alex3305]

Het probleem is div's block elementen zijn waardoor deze niet naast elkaar gepositioneerd kunnen worden. De rest zou je zelf uit kunnen zoeken .

Dat het semantisch niet correct is klopt inderdaad ook. Probeer eens headers te gebruiken en je img-tag automatisch af te sluiten.

[RobIII]

alex3305 schreef op vrijdag 22 juli 2011 @ 15:41:
Het probleem is div's block elementen zijn waardoor deze niet naast elkaar gepositioneerd kunnen worden.

Ik weet niet of ik je nu goed begrijp maar wat dacht je van float? Of absolute positioning? Of... ?

[OkkE]

Als de image variabel is kan je, hoe smerig het ook is, met Javascript door alle .article gaan, de with van de img ophalen en die als margin-left op de titel zetten.

Maar ik ben het met de rest eens, de output van het CMS is de oorzaak (en is sowieso verre van ideaal), dus dat verhelpen is een veel betere oplossing.

[ Voor 28% gewijzigd door OkkE op 22-07-2011 15:56 ]

[DynamicDreams]

Duidelijk, en dus ook niet zo gek dat het niet lukte... Ik zal me er dan maar eens op gaan richten hoe ik de output van Joomla kan beïnvloeden. Bedankt voor jullie hulp.

[alex3305]

RobIII schreef op vrijdag 22 juli 2011 @ 15:42:
[...]

Ik weet niet of ik je nu goed begrijp maar wat dacht je van float? Of absolute positioning? Of... ?

Het kan wel, dat weet ik ook wel. Maar ik vind het IMHO een stuk mooier door gebruik te maken van niet-block elementen in dit geval.

Maar... de TS kan dit best in CSS oplossen zonder daarvoor de HTML/PHP output van Joomla aan te passen.

[OkkE]

alex3305 schreef op woensdag 27 juli 2011 @ 15:06:
[...]

Het kan wel, dat weet ik ook wel. Maar ik vind het IMHO een stuk mooier door gebruik te maken van niet-block elementen in dit geval.

Maar... de TS kan dit best in CSS oplossen zonder daarvoor de HTML/PHP output van Joomla aan te passen.

Je zegt dat de TS beter geen block-level element kan gebruiken maar inline (opzich mee eens, al kun je block-level net zo makkelijk als inline laten gedragen). En vervolgens zeg je dat de TS de output van Joomla niet moet aanpassen? Beetje tegenstrijdig. Daarnaast is er geen goede oplossing met de huidige HTML, dus de output moet wel anders.

[kwaakvaak_v2]

uuh maar als het joomla is, moet er toch een manier zijn om een eigen template te gebruiken? Ergens moet dit element op deze manier in elkaar gezet worden, hetzij in php functie of gewoon in een element template..

[q-enf0rcer.1]

margin-left: 12em; op de titel
margin-top: -2em; op de img?