Michael: Text um Grafik mit Kommentar fließen lassen

Guten Morgen,

wie man Text um Grafik fließen lassen kann, wird hier beschrieben:

http://de.selfhtml.org/html/grafiken/ausrichten.htm@title=http://de.selfhtml.org/html/grafiken/ausrichten.htm

Wie könnte es (flexibel) kodiert werden, wenn sich unter der Grafik noch eine kleine Beschreibung (in etwas anderer Formatierung) als Text (nicht als Grafik) befinden soll, um die der übrige Text ebenfalls fließen soll?

Gruß Michael

  1. Wie könnte es (flexibel) kodiert werden, wenn sich unter der Grafik noch eine kleine Beschreibung (in etwas anderer Formatierung) als Text (nicht als Grafik) befinden soll, um die der übrige Text ebenfalls fließen soll?

    Gruppiere die Grafik und den Text mit einem gemeinsamen Element um das der Inhalt fließen kann.

    1. Hallo!

      suit schrieb:

      Gruppiere die Grafik und den Text mit einem gemeinsamen Element um das der Inhalt fließen kann.

      Ich komm auf keinen grünen Zweig, weder mit div noch fieldset noch Tabelle. Hat jemand vielleicht ein Beispiel für Text, der um eine Grafik mit Kommentar darunter fließt? ;)

      1. Hi!

        Ich komm auf keinen grünen Zweig, weder mit div noch fieldset noch Tabelle. Hat jemand vielleicht ein Beispiel für Text, der um eine Grafik mit Kommentar darunter fließt? ;)

        Span scheinst Du ja noch nicht probiert zu haben. Was ist denn das Problem mit einem Div? Grafik und Beschreibung in ein Div und den Text darum fliessen lassen. Divs und Spans sind als Containerelemente fuer solche Zwecke das geeignete Mittel.

        --
        "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
              - T. Pratchett
      2. @@Michael:

        Hat jemand vielleicht ein Beispiel für Text, der um eine Grafik mit Kommentar darunter fließt? ;)

        http://gundi.de/, http://gundi.de/2005/halle.shtml

        Live long and prosper,
        Gunnar

        --
        Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
        1. @@Gunnar Bittersmann:

          »» Hat jemand vielleicht ein Beispiel für Text, der um eine Grafik mit Kommentar darunter fließt? ;)

          http://gundi.de/, http://gundi.de/2005/halle.shtml

          <quote cite="otto">Ich hab noch einen. Einen hab ich noch, einen hab ich noch!</quote>

          http://cechomor.de/juliane/ufajfky

          Live long and prosper,
          Gunnar

          --
          Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
          1. Gunnars Beispiele helfen weiter, geht jetzt, dankeschön! ;)

        2. Lieber Gunnar,

          http://gundi.de/, http://gundi.de/2005/halle.shtml

          anstatt eines
          <div class="Left"><img src="http://gundi.de/bilder/20050305/LW4I0064.jpg" alt="" width="240" height="160" /><br />Foto: Steffen Schipke</div>
          hätte es doch auch das hier getan:

          <p class="illustration linksbuendig">  
              <img src="http://gundi.de/bilder/20050305/LW4I0064.jpg" alt="" />  
              Foto: Steffen Schipke  
          </p>
          

          Liebe Grüße,

          Felix Riesterer.

          --
          ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
          1. @@Felix Riesterer:

            anstatt eines
            <div class="Left"><img src="http://gundi.de/bilder/20050305/LW4I0064.jpg" alt="" width="240" height="160" /><br />Foto: Steffen Schipke</div>
            hätte es doch auch das hier getan:

            <p class="illustration linksbuendig">

            <img src="http://gundi.de/bilder/20050305/LW4I0064.jpg" alt="" />
                Foto: Steffen Schipke
            </p>

              
            Hm, ist ein Bild mit Bildunterschrift wirklich ein Textabsatz?  
              
            (In HTML 5 wird’s dafür das ['figure'-Element](http://dev.w3.org/html5/spec/Overview.html#the-figure-element) geben. Na, irgendwas Gutes muss HTML 5 ja bringen.)  
              
            @width und @height sind dazu gut, dass ein Browser schon vor dem Laden der Bilder den Platz bereitstellt und nicht dann, wenn die Bilder nacheinander(!) geladen sind, den Text anders umbrechen und neu darstellen muss.  
              
            Das 'br'-Element könnte man durchaus durch Whitespace ersetzen, aber so falsch finde ich es an der Stelle gar nicht.  
              
            Und ob die Klasse nun "Links" oder "linksbuendig" heißt … – Und ja, der Klassenname bezieht sich wirklich auf die Ausrichtung. Je nach Bildinhalt muss das betreffende Bild entweder links bzw. rechts (Klasse "Rechts") stehen, damit bspw. kein Gesicht aus der Seite „herausschaut“.  
              
            Live long and prosper,  
            Gunnar
            
            -- 
            Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)