<div> in Fließtext

[Gunnar Bittersmann]

Hello out there!

also einen (recht-/links-) bündiges Bild mit einer (zum Bild) zentrierter Unterschrift in der Mitte eines Blocksatz-Absatzes. Eigentlich ganz einfach. Wie mache ich das dann?

Dass HTML nicht zulässt, div in p zu verschachteln, heißt nicht, dass es mit CSS nicht möchlich wäre, innerhalb der Box des p-Elements weitere Boxen zu haben.

Du musst also dein Bild und dessen Bildtitel in ein HTML-Element tun, das in p vorkommen darf, z.B. span:

<p>  
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy  
  <span class="BildImText Rechts">  
    <img src="foo" alt="foo">  
    Bild 42. foo  
  </span>  
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
</p>

Dieses kann zu nun wie ein Blockelement dargestellt werden:

.BildImText {  
  display: block;  
  text-align: center;  
}

Die 'text-align'-Angabe dient der Zentrierung des Bildtitels. Damit dieser unter dem Bild steht, muss dieses auch ein Block sein:

.BildImText img {  
  display: block;  
}

Für die Bilder links:

.Links {  
  float: left;  
  margin: 1em 2em 1em 0;  
}

Entsprechend rechts:

.Rechts {  
  float: right;  
  margin: 1em 0 1em 2em;  
}

Möglich wäre auch, den Bildtitel nicht zu zentrieren (also keine 'text-align'-Angabe für '.BildImText', sondern für die Bilder links linksbündig und die Bilder rechts rechtsbündig auszurichten:

.Links {  
  text-align: left;  
}  
.Rechts {  
  text-align: right;  
}

Unschön ist allerdings die Darstellung für Clients ohne CSS. Da bietet sich zumindest an, Bild samt Bildtitel in Klammern zu setzen:

<p>  
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy  
  <span class="BildImText Rechts">  
    <span class="Klammer">(</span>  
    <img src="foo" alt="foo">  
    Bild 42. foo  
    <span class="Klammer">)</span>  
  </span>  
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
</p>

und die Klammern mit CSS auszublenden:

.BildImText .Klammer {  
  display: none;  
}

See ya up the road,
Gunnar