[HTML/CSS] Tekst rondom een afbeelding laten lopen

[yok]

Goedenavond GoT'ers,

Ik werk met cutenews en kan hierin de templates van het nieuws aanpassen. Ik wil graag zoals geenstijl.nl plaatjes rechts aligned hebben, en tussen de tekst door. Alleen krijg ik dit niet werkend. Het zal zeer makkelijk zijn voor de meesten, maar ik probeer het nu al een uur en het lukt me niet.
Dit is de code:

PHP:

<table width="100%" border="0">
  <tr> 
    <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">{title}</font></td>
  </tr>
  <tr> 
    <td height="21"> <p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><div align="right">{avatar}</div>{full-story}</p> 
      <div align="left"></div></td>
  </tr>
  <tr> 
    <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">{author} | {date} 
      | [full-link]Lees verder[/full-link] | [com-link]al {comments-num} keer gelikt![/com-link]</font></td>
  </tr>
</table>

Dit heb ik tot nu toe, en dat {avatar} is de link naar de avatar zelf. Iemand die mij kan helpen?

Alvast bedankt!

[Verwijderd]

Een <div> heeft geen propertie genaamd "align"*, dit zal je met <div style="..."> of <div class="..."> moeten oplossen, en op de puntjes vul je de juiste CSS code in.
http://www.mijnhomepage.nl/csscursus/les5.php (vanaf les 1 beginnen is wel aan te raden trouwens)

Succes .

* niet helemaal zeker, maar CSS is succes verzekerd in ieder geval .

[ Voor 15% gewijzigd door Verwijderd op 11-01-2007 20:43 ]

[NMe]

Wat let je om in de broncode van Geenstijl te duiken? Daarnaast zul je hiervoor toch echt met CSS moeten gaan werken (opmaak moet je zoveel mogelijk uit je HTML proberen te houden).

Verder had je in Waar hoort mijn topic? kunnen lezen dat je in Programming nogal verkeerd zit met je vraag, en je in Webdesign, Markup & Clientside Scripting moet zijn. Ook kun je in *** Over topictitels in PRG - lezen voor topic openen!!! *** lezen dat je topictitel ook niet echt voldoet aan wat wij ervan verwachten. Ik zal je topic even verplaatsen en de titel aanpassen, maar zorg de volgende keer liever zelf even dat het klopt.

[Leedbek]

Wow, hoeveel slechte markup kun je in 13 regels proppen?
Om je een advies te geven: verdiep je eens in semantiek van html en schone markup technieken zoals XHTML en CSS. Een goede site met tips, naslag en tutorials hiervoor is www.w3schools.com. Sorry dat ik het zeg, maar je code lijkt nergens op. Lege div's, <font> tags (bah!), tabelgebruik terwijl dat ongetwijfeld totaal niet nodig is.

Overigens heeft slindenau de oplossing al min of meer gegeven, al mag een <div> officieel niet in een <p> tag geplaatst worden. Je zult die <p> tag er dus uit moeten slopen of moeten vervangen.

[yok]

Ik weet dat het een slechte code is, maar hij werkte wel voor mij. Alleen jammergenoeg weet ik niet meer hoe.

Als je het met een imgtag doet gaat het super, alleen dan kan ik de {avatar} niet includen.

PHP:

<table width="40%" border="0">
  <tr> 
    <td><h5>{title}</h5></td>
  </tr>
  <tr> 
    <td height="21"><div align="left"><img width="100" height="100" align="right">{full-story}</div>
      </td>
  </tr>
  <tr> 
    <td>{author} | {date}  | [full-link]Lees verder[/full-link] | [com-link]al {comments-num} keer gelikt![/com-link]</td>
  </tr>
</table>

[Leedbek]

yok schreef op donderdag 11 januari 2007 @ 21:01:
Ik weet dat het een slechte code is, maar hij werkte wel voor mij. Alleen jammergenoeg weet ik niet meer hoe.

Als je het met een imgtag doet gaat het super, alleen dan kan ik de {avatar} niet includen.

Wat voor jou werkt, hoeft voor een ander niet te werken. Zeker met slechte code is dat een serieus risico. Maar goed... een div tag ondersteunt geen property align. Dus probeer het eens met CSS:
<div style="text-align:right">{avatar}</div>

[yok]

Dan komt het plaatje eronder of erboven, niet ertussenin.

Het is trouwens geen tekst, maar een code voor een plaatje. Het is eigenlijk gewoon een link. Volgens mij lukte het met een img-tag. Alleen ik kan deze niet meer werkend krijgen.

[ Voor 61% gewijzigd door yok op 11-01-2007 21:16 ]

[Leedbek]

Niet elegant, zou wel moeten werken:

<div style="text-align:right;display:inline">{avatar}</div>

[yok]

Lukt niet, blijft gewoon eronder of erboven.

[NMe]

Luuk-Online schreef op donderdag 11 januari 2007 @ 20:55:
Om je een advies te geven: verdiep je eens in semantiek van html en schone markup technieken zoals XHTML en CSS.

Als je dat zo zegt lijkt het net alsof HTML totaal ondergeschikt is aan XHTML terwijl het naast elkaar bestaande standaarden zijn. Het lijkt me dus dat jij je feiten ook niet helemaal op een rijtje hebt.

[Setragasj]

<img style="float:left"> ?

[yok]

Lukt ook niet. Ik probeer de {avatar} code in het img src="-" te krijgen, maar dit lukt nog niet echt.

[Setragasj]

doe je dat niet gewoon zo dan

HTML:

<img src="{avatar}">

[yok]

Ben eruit gekomen!

<td height="21"><img align="right" alt="{avatar}">{full-story}</td>

[Setragasj]

dus je img heeft dan geen source...?
Maar goed... Je bent er uit..