Design ohne Tabellen

[Andreas]

Hallo,

wie kann ich dieses Design ohne Tabellen realisieren?

<table>
<tr><td><img src='SEHR KLEINES BILD'></td><td>CA. 255 ZEICHEN TEXT</td></tr>
</table>

Von mir aus gesehn kann man das so machen:

<p>
  <img src='SEHR KLEINES BILD'>
  <span>CA. 255 ZEICHEN TEXT</span>
</p>

Aber ich habe keine Ahnung, wie man das dann formatieren soll, dass der Text neben den Bild steht und dann nicht drumherum und nur die erste Zeile.

Grüße
Andi

[MudGuard]

Hi,

<table>
<tr><td><img src='SEHR KLEINES BILD'></td><td>CA. 255 ZEICHEN TEXT</td></tr>
</table>

Von mir aus gesehn kann man das so machen:

<p>
  <img src='SEHR KLEINES BILD'>
  <span>CA. 255 ZEICHEN TEXT</span>
</p>

position:relative und ausreichendes padding-left für p,
position:absolute für das img

Das span um den Text ist nicht erforderlich.

cu,
Andreas

[Andi]

Hallo,

hier mal meine Testseite:

http://extranet.idealnet.com/andreas/xslt/index.php?sk=23

Unten links das beschriebene Problem.

<p>
  <img src='SEHR KLEINES BILD'>
  <span>CA. 255 ZEICHEN TEXT</span>
</p>

position:relative und ausreichendes padding-left für p,
position:absolute für das img

Leider funktioniert das nicht, da immer noch das Bild über dem Text liegt.

Grüße
Andi

[MudGuard]

Hi,

position:relative und ausreichendes padding-left für p,
position:absolute für das img

Leider funktioniert das nicht, da immer noch das Bild über dem Text liegt.

Doch, natürlich funktioniert das.

So viel Unselbständigkeit, daß Du nicht auf die Idee kommst, die Position (insbes. left) anzugeben, hatte ich nicht erwartet ...

cu,
Andreas

[afra]

Hallo Andi!

Beschäftige Dich mit float und wie sich Blockelemente dabei verhalten.

<p>
  <img src='SEHR KLEINES BILD'>
  <span>CA. 255 ZEICHEN TEXT</span>
</p>

Lass Dein Bild floaten. Packe den Text in ein semantisches <p>

Schönen Gruß

Afra

[Andi]

Hallo Afra,

Beschäftige Dich mit float und wie sich Blockelemente dabei verhalten.

<img src='SEHR KLEINES BILD' style='float:left'></a>
<p style='width:50px;'><xsl:value-of select="shorttext"/></p>

Leider will der Absatz aber nicht um das Bild floaten. Mach ich was falsch?

Freundliche Grüße
Andi

[afra]

Hallo Andi!

<img src='SEHR KLEINES BILD' style='float:left'></a>
<p style='width:50px;'><xsl:value-of select="shorttext"/></p>

Leider will der Absatz aber nicht um das Bild floaten. Mach ich was falsch?

Ich sehe hier nur einen Ausschnitt aus Deinem XSL Stylesheet, das Du anscheinend verwendest. VIelleicht waere ein _gerenderter_ Quelltext hilfreicher. Meine Vermutung wäre die, dass Du jetzt versucht ein <p> in einem <p> zusetzen, das öffnende <p> schließt aber das vorherige. Daher dürfte das nicht funktionieren. Eventuell benötigst Du einen Container in dem Du Deine Elemente darstellst. Eine Definitionlist könnte auch semantisch und damit sinnvoll sein. Wie gesagt, mit hingeworfnen Brocken ist es schwer eine Lösung zu erarbeiten.

Schönen Gruß

[Gunnar Bittersmann]

Hello out there!

<p>
  <img src='SEHR KLEINES BILD'>
  <span>CA. 255 ZEICHEN TEXT</span>
</p>

Aber ich habe keine Ahnung, wie man das dann formatieren soll, dass der Text neben den Bild steht und dann nicht drumherum und nur die erste Zeile.

Mit
  ~~~css img {
    float: left;
    margin-right: 10px; /* Zwischenraum zum Text */
  }

erreichst du, dass der Text das Bild umfließt, also mehr als die erste Zeile neben dem Bild steht (entprechende Bildhöhe vorausgesetzt).  
  
So der Text nicht unter dem Bild weiterlaufen, sondern in sich linksbündig, erreichst du das mit  
  ~~~css
span {  
    display: block;  
  }

Eine andere Möglichkeit wäre, dem 'p' genügend linken Abstand zu geben und das Bild aus dem Elementfluss zu nehmen und links neben dem Text zu plazieren (dann brauchst du auch kein 'span'):
  ~~~css p {
    margin-left: 100px;  /* Bildbreite und Zwischenraum /
  img {
    position: absolute;
    left: 10px;          / Abstand vom linken Rand */
  }

  
See ya up the road,  
Gunnar

-- 
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)

[Andi]

Hallo,

deine Hinweise funktionieren.
Leider möchte ich, dass das Bild bis zum Ende umflossen wird und nicht sobald es aufhört:

Hier mein Beispiel:
Beispiel

Unten links sollte der Text immer neben dem Bild stehen zudem das Bild noch mittig.

Grüße
Andi