<div> in Fließtext

[Willi]

Hallo,

ich versuche in einen längeren Bericht (Blocksatz) rechts und links Bilder einzusortieren. Die Texte sind mit <p> strukturiert, die Bilder stecken in einem <div>, weil unter den Bilder noch ein zentrierter Unterschrift soll. Das funktioniert bei Konstrukten der Art:

<div>
  <img>
  <p>Unterschrift</p>
</div>
<p>
  text1
  text2
  text3
  text4
</p>

ganz gut. Der Text fließt um den <div> Container mit dem Bild im Blocksatz, die Unterschrift ist zentriert. Bei dieser Konstruktion

<p>
  text1
  text2
  <div>
    <img>
    <p>Unterschrift</p>
  </div>
  text3
  text4
</p>

funktioniert das auch gut, allerdings sind dann text3 und text4 ebenfalls zentriert, wie die Unterschrift auch.

Wie bekomme ich das hin, dass die Formatierung im <div> Container tatsächlich auch nur im Container gültig ist?

Gruß
Willi

[Der Martin]

Moin Willi,

<div>
  <img>
  <p>Unterschrift</p>
</div>
<p>
  text1
  text2
  text3
  text4
</p>
[...]
Der Text fließt um den <div> Container mit dem Bild im Blocksatz, ...

Dann zeig uns bitte auch das für die Darstellung entscheidende CSS. Denn ohne besondere Formatierungen (z.B. float) würde in deinem Beispiel das div-Element die ganze Breite einnehmen (als Blockelement ist das sein übliches Verhalten), und der Textabsatz steht darunter.

<p>
  text1
  text2
  <div>
    <img>
    <p>Unterschrift</p>
  </div>
  text3
  text4
</p>

Das ist kein valides HTML. Ein Absatz (p-Element) darf keine Blockelemente enthalten. Bei diesem Beispiel würde ein validierender Parser das p-Element vor dem <div> wieder schließen, weil's die Syntax zwingend verlangt.
Was dabei rauskommt, wenn man CSS auf fehlerhaftes Markup anwendet, ist fraglich. Vielleicht zeigt's der eine oder andere Browser wirklich so an, wie du es dir vorstellst, aber das wäre Glückssache.

funktioniert das auch gut, allerdings sind dann text3 und text4 ebenfalls zentriert, wie die Unterschrift auch.

Das könnte eine Konsequenz davon sein, dass der Browser hier krampfhaft versucht, etwas Sinnvolles daraus zu machen.

Wie bekomme ich das hin, dass die Formatierung im <div> Container tatsächlich auch nur im Container gültig ist?

Die beiden Elemente (Fließtextabsatz und div) auf keinen Fall verschachteln. Notiere zuerst das div mit dem Bild und der Bildunterschrift, dann den Fließtext-Absatz. Nimm dann das div mit float aus dem Fluss. Das dürfte deinem ursprünglichen Ansatz entsprechen. Was gefällt dir daran nicht?

So long,
 Martin

[Willi]

Hallo Martin,

danke für die Antwort. Wusste ich nicht, dass das nicht valide ist. Was ich will ist folgendes:

Text text text text text t
               ext text text text text te
               xt text tex +------------+
               t text text |            |
               text text t |  b i l d   |
               ext text te |            |
               xt text tex +------------+
               t text text  unterschrift
               text text t
               ext text text text text.

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?

Gruß
Willi

[Der Martin]

Hi Willi,

danke für die Antwort. Wusste ich nicht, dass das nicht valide ist.

tja, man lernt ja nie aus. Es ist aber auch kein Fehler, bei solchen Konstruktionen -vor allem, wenn man es selbst nicht genau weiß- den W3C-Validator zu fragen.

Text text text text text t
               ext text text text text te
               xt text tex +------------+
               t text text |            |
               text text t |  b i l d   |
               ext text te |            |
               xt text tex +------------+
               t text text  unterschrift
               text text t
               ext text text text text.

also einen (recht-/links-) bündiges Bild mit einer (zum Bild) zentrierter Unterschrift in der Mitte eines Blocksatz-Absatzes.

Oha. Ich sehe ein kleines Problem. ;-)
Ich hab's mal zum Test so gelöst:

• CSS --- 8< ------------
  p
   { text-align: justify;
   }
  div.bildblock
   { float:right;
     width:80px;
     height:64px;
     margin: 8px;
     margin-top: 80px;
     border: 1px solid #F00;
     background-color: #FF0;
     text-align: center;
   }
  div.bildblock p
   { text-align: center;
   }

• HTML -- 8< ------------
  <div class="bildblock">
  <img ...>
  <p>Bildunterschrift</p>
  </div>
  <p>
  Fließtext Fließtext Fließtext Fließtext Fließtext Fließtext
  Fließtext Fließtext Fließtext Fließtext Fließtext Fließtext
  Fließtext Fließtext Fließtext Fließtext Fließtext Fließtext
  Fließtext Fließtext Fließtext Fließtext Fließtext Fließtext
  </p>

Das kleine Problem, das ich noch sehe, ist die vertikale Zentrierung: Du wolltest den Bildblock vertikal innerhalb des Absatzes zentrieren. Das bekomme ich nicht ohne weiteres hin. Aber sonst ...

So long,
 Martin

[Der Martin]

Hallo,

ich sehe gerade, dass ich in meinem Beispielcode noch sämtliche Angaben drin habe, mit denen ich rumgespielt hatte.

div.bildblock
{ float:right;
   width:80px;
   height:64px;

Breite und Höhe hatte ich nur als Hilfskonstruktion. Im realen Fall kannst du das auch weglassen, dann richtet sich die Größe des div-Elements nach seinem Inhalt, also in erster Linie nach dem Bild.

margin-top: 80px;

Damit habe ich versucht, den Block vom oberen Rand des Absatzes etwas nach unten zu versetzen. Das geht zwar, aber der Rand oberhalb des Bildes bleibt dann auch frei und wird nicht vom umfließenden Text genutzt.

border: 1px solid #F00;
   background-color: #FF0;

Das war natürlich auch nur zu Testzwecken.

Ciao,
 Martin

[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

[Willi]

hallo Gunnar,

ich habe es gerade ausprobiet: Das Ergebnis ist genau so, wie ich mir das vorgestellt habe. Super :-)

Vielen Dank noch mal.

Willi

[Willi]

Hallo Martin und Gunnar,

vielen Dank für ausführlichen Information, das hat mir schon mal sehr weitergeholfen.

Gruß
Willi