[html] speciale vorm van wordwrap rond een afbeelding

[mahi]

Hoi mensen,

Ik ben wat aan het experimenteren met HTML en CSS. Nu vroeg ik me iets af. Stel

code:

[img]"afbeelding.png">
<p>tekst[/img]

Dat geeft (ASCII art):

code:

+------------+  tekst tekst te
|            |  kst tekst teks
|            |  t tekst tekst 
| afbeelding |  tekst tekst te 
|            |  kst tekst teks 
|            |  t tekst tekst  
+------------+  tekst tekst te 
                kst tekst teks 
t tekst tekst tekst tekst teks
t tekst tekst tekst tekst teks
t tekst tekst tekst tekst teks

Waarbij de tekst rond de afbeelding 'wrapt'.

Nu mijn vraag is: is het mogelijk onderstaand effect te bekomen zonder gebruik te maken van een table:

code:

+------------+  tekst tekst te
|            |  kst tekst teks
|            |  t tekst tekst 
| afbeelding |  tekst tekst te 
|            |  kst tekst teks 
|            |  t tekst tekst  
+------------+  tekst tekst te 
                kst tekst teks 
                t tekst tekst 
                tekst tekst te 
                kst tekst teks 
                t tekst tekst

Dus de tekst springt mee in met de afbeelding zoals in het bovenstaande voorbeeld, maar gaat niet terug naar de linkse rand aan het einde van de afbeelding. Is dit mogelijk zonder tables te gebruiken? Desnoods met CSS.

[Willem]

Gewoon eerst de < img class="bach" > neerzetten met als class bv

Cascading Stylesheet:

.bach {
  padding:15px 15px 15px 15px;
}

[Verwijderd]

Bijv:

code:

<div style="width: 300px; float: right;">lap tekst</div>
<div style="width: 300px; float: right;"><img></div>

[syllaz]

je kunt ook gewoon een align in je <img> tag zetten, met margin styles kun je de tekstomloop regelen.

[Arnaud]

Even wat informatie bij elkaar gesprokkeld, verder mag je zelf experimenteren (maar volgens mij moet dit met een table, div of span):

<img>

align deprecated 4.0
The align attribute is used to control the position of the image with respect to the text and other elements. The permitted values are absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, and top. This attribute is deprecated effective with version 4.0. However, most browsers continue to recognize this attribute.

[mahi]

Bedankt voor jullie hulp mensen! De methode van "Milkman_Dan" is wat ik eigenlijk zocht.

[Verwijderd]

Volgens mij moet dit ook mogelijk zijn met de css-property clear...maar hoe weet ik zo gauw even niet.

[Verwijderd]

Verwijderd schreef op 24 oktober 2002 @ 18:36:
Volgens mij moet dit ook mogelijk zijn met de css-property clear...maar hoe weet ik zo gauw even niet.

http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-clear

Ik heb het even opgezocht... Je kunt left, right en both clearen, top en bottom zijn niet-bestaande waarden

[mahi]

Ik had al met "clear" en dergelijke liggen spelen in de stylesheets maar ik kwam er maar niet uit. Vaag herinnerde ik me echter dat het mogelijk was zonder tables. Natuurlijk was ik <div> vergeten waarmee het wel kan