image met tekst en titels uitlijnen

[FoBa]

Hallo iedereen

Ik zit met een klein probleempje, waarschijnlijk is het iets klein maar ik vind het helaas niet.

bedoeling(zie afbeelding): een div(blauw) waarin een image(groen), p-tag, h2-tag en h1 tag zitten. De div moet de hoogte aannemen van de afbeelding. De afbeelding heeft een hoogte van bv 30%. De tekst moet rechts van de image komen.


Wat ik te zien krijg: een div waar alles inzit maar de div neemt niet de hoogte van de afbeelding aan.

code:

<div>
<h1>titel</h1>
<h2>subtitel</h2>
<p>
<img src="image.jpg" alt="afbeelding niet beschikbaar"/>
een paragraaf met tekst over de afbeelding...
</p>
</div>

 

[quintoo]

HTML Code.
Je maakt 3 aparte div's.
1 voor de blauwe achtergrond (mainblock)
2 voor je plaatje (image)
3 voor de tekst (teksten)

hoop dat je er zo uit komt! succes

<div class="mainblock">
<div class="image">
 <img src="klajsdflkj.jpg" alt="lalala"/>
</div>
<div class="teksten">
<h1> hier je tekst </h1>
<h2> Subtitel tekst </h2>
<p> En hier je paragraaf tekst </p>
</div>
</div>
<div class="clear"></div>

CSS:

.mainblock{background-color:blue;}
.image{float:left;}
.teksten{float:left;}
.clear{clear:both;}

 

[FoBa]

Helaas, de mainblock in dit geval krijg je niet te zien. Geen blauw block dus.
Toch raar want er zit inhoud in ookal zijn het andere divs

 

[quintoo]

je kan het blok ook een grootte + breedte mee geven. en eventueel eentje die mee groeit

.mainblock {background-color:blue; min-width:1000px;min-height:400px;}

 

[FoBa]

dan krijg je idd een kader te zien, maar als je die wilt laten meegroeien...
Ik zou dan werken met bv. height:40%, maar dat werkt niet :s

 

[csshunter]

Hoi FoBa,
De code van quintoo in reactie nummer #2 hierboven is vrijwel goed, maar er zit een tikfoutje in.
De <div class="clear"></div> mag niet buiten de <div class="mainblock"> staan, want het mainblock zelf heeft geen float.
De floats zitten binnen het mainblock, en dan moet de clearing-div er ook binnen staan, vlak voor het eind ervan:

<div class="mainblock">
    <div class="image">
        <img src="klajsdflkj.jpg" alt="lalala"/>
    </div>

    <div class="teksten">
        <h1>Hier je tekst</h1>
        <h2> Subtitel tekst</h2>
        <p>En hier je paragraaf tekst</p>
    </div>

    <div class="clear"></div>
</div>

Eigenlijk is de clear-div een onzichtbaar lijntje over de volle breedte, dat als opdracht heeft om onder de hoogste te komen van de twee floats erboven.

• In de praktijk gebracht: dubbelfloat.htm
  Zie broncode.

In dit voorbeeld zijn nog de volgende wijzigingen aangebracht:

Weggelaten

• De <div> om het image heen; de image-class met de float kan direct aan het <img> gekoppeld worden.

Toegevoegd

• Een {vertical-align: top} voor het image. Hiermee wordt vermeden dat er zo'n 3px extra onder het image komen. Deze 3px extra zijn voor als een image in een gewone regel staat: dan komt de onderkant van het image gelijk op te lopen met de onderkant van de tekstregel, die die 3px nodig heeft voor de neerhaaltjes van letters als p, j enz. - Hier staat het img niet inline in een tekstregel, en kan die extra onderruimte er af gesloopt worden.
• Een {margin-left: 20px} voor de teksten-div, om de teksten niet knal naast het image te krijgen.

Alternatief!
Het kan ook nog op een andere manier, zonder de clear-div. Dat gaat door het toevoegen van {overflow: hidden} aan het mainblock.

• Test: dubbelfloat-2.htm
  Zelfde resultaat, maar andere broncode.

Met vriendelijke groet,
CSShunter
__________
PS: Als je nog wat wilt spelen met floats en clears, dan kan je hier je gang gaan.