bari: figcaption und Zeilenumbruch

Guten Tag,

Ich habe folgende Situation:

<div classe="kleinbild">
<figure><img src... width="200" height="100">
<figcaption>

Beschriftung Kleinbilder unterhalb des Bildes, die breiter als die 200px des Kleinbildes ist, die ich aber nicht breiter haben moechte, sondern dass sie je nach Laenge einen oder zwei Zeilenumbrueche bei 200px Breite (am Ende des Bildes) macht

</figcaption></figure></div>

Ich versuchte, figcaption mit max-width: 200px; zu definieren, doch wird der Text einfach gestaucht und nicht umgebrochen.

Muss ich das "manuell" mit einem br schreiben, oder gibt es eine elegantere Loesung im CSS?

Vielen Dank fuer Tipps und Hilfe,
bari.

P.S. welches ist die oder eine der empfohlenen html5-Website-Tutorials?

  1. Hi,

    Ich versuchte, figcaption mit max-width: 200px; zu definieren, doch wird der Text einfach gestaucht und nicht umgebrochen.

    Nicht nachvollziehbar – weder, was „gestaucht“ in diesem Zusammenhang exakt bedeuten soll, noch warum der automatische Umbruch ausbleiben sollte (sofern du ihn nicht explizit unterbunden hast).

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Nicht nachvollziehbar

      Ebenfalls nicht nachvollziehbar.

      Weder mit FF 17 noch Chrome 23 noch mit IE 10.

      1. Hallo 1UnitedPower,

        Ebenfalls

        <div classe="kleinbild">

        immer dieses denglisch :) (SCNR)

        Gruß, Jürgen

        1. immer dieses denglisch :) (SCNR)

          Ich schiebe die Schuld auf Copy&Paste.

        2. Hallo,

          da hagelt es gleich von aufmerksamen und guten Antworten...(man kommt nicht mal nach mit Lesen, geschweige denn mit rechtzeitig Antworten  ;-)

          Ja, das nehme ich auf meine Kappe, da hat sich wohl auch das französische "classe" eingeschlichen...

          Grüsse an alle Helfer.

          bari.

        3. @@JürgenB:

          nuqneH

          <div classe="kleinbild">

          immer dieses denglisch :) (SCNR)

          Immer diese Divitis!

          Der div-Container dürfte vollkommen überflüssig sein, da das figure-Element selbst schon ein Container ist, den man stylen kann. Und der auch eine Klasse "kleinbild" bekommen kann, um beim Denglisch zu bleiben.

          Qapla'

          --
          „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
          1. Und der auch eine Klasse "kleinbild" bekommen kann, um beim Denglisch zu bleiben.

            ich tät ja "smallbild" als Denglish-Mutterspeaker vorschlägen tun...

            Gruß
            Kalk

            1. versteh jetzt die diversen Bemerkungen zum "denglish" nicht ganz (dachte, JürgenB zielte auf "classe" ab).

              Sollten die Klassennamen generell in englisch geschrieben sein?

              das Andere mit der divitis schaue ich mir noch an, ob ich solche weglassen kann. danke für den Tipp

              Gruss
              bari.

              1. versteh jetzt die diversen Bemerkungen zum "denglish" nicht ganz (dachte, JürgenB zielte auf "classe" ab).

                Sollten die Klassennamen generell in englisch geschrieben sein?

                Ich persönlich bevorzuge es meine Konstrukte immer in Englisch zu verfassen. In vielen Software-Firmen ist es außerdem Konvention, bei OpenSource-Projekten sowieso. Außerdem ist es gutes Training.

                1. Hallo,

                  Sollten die Klassennamen generell in englisch geschrieben sein?
                  Ich persönlich bevorzuge es meine Konstrukte immer in Englisch zu verfassen. In vielen Software-Firmen ist es außerdem Konvention, bei OpenSource-Projekten sowieso. Außerdem ist es gutes Training.

                  wenn man seinen Code auch einem internationalen Publikum zugänglich machen will -und das ist im Web bestimmt der Fall- dann ist es sicher ein feiner Zug, auch selbst gewählte Bezeichner konsequent in Englisch zu formulieren.

                  Ansonsten bin ich der Meinung, das liegt im Ermessen des Autors und ist damit abhängig von dessen Vorlieben. Was ich aber nicht mag, ist ein Mix von deutschen, englischen und pdeudo-englischen Bezeichnern, womöglich noch gemischt in *einem* Wort: GetNextTermin().

                  Ich selbst bevorzuge übrigens auch konsequent englische Bezeichner und formuliere auch Kommentare in Englisch - meistens ohne dass es mir überhaupt bewusst ist Es kostet mich eine Menge Selbstdisziplin, in Deutsch zu kommentieren.

                  Ciao,
                   Martin

                  --
                  Soziologen sind nützlich, aber keiner will sie haben.
                  Bei Informatikern ist es gerade umgekehrt.
                  Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                  1. Du hast das ganze nochmal besser auf den Punkt gebracht. Wie so oft: depends ;)

                  2. Hallo,

                    wenn man seinen Code auch einem internationalen Publikum zugänglich machen will -und das ist im Web bestimmt der Fall- dann ist es sicher ein feiner Zug, auch selbst gewählte Bezeichner konsequent in Englisch zu formulieren.

                    Vielen Dank, ich nehme das mal so zur Kenntnis, und mache mich gegebenenfalls später daran, meine Klassen u ä durch englische Ausdrücke zu ersetzen.

                    Gute Nacht,
                    bari.

                2. ... Außerdem ist es gutes Training.

                  ...stimmt, kann ich nur zustimmen. Bezüglich Schreiben von html-code ist leider (oder zum Glück-?) zwischen Sprachen nicht alles 1:1 nach gleichem Muster ableitbar (z.B. fr classe, en class, de Klasse, aber fr figure, en figure, de Figur).

                  ...und es ist, besonders wenn es eine Sprache ist, die der Muttersprache nicht sehr ähnlich ist, bei gutem Training gewiss ein probates Mittel gegen das Verdummen - im Zeitalter des unbegrenzten elektronischen Konsums.

                  Gruss
                  bari.

              2. @@bari:

                nuqneH

                versteh jetzt die diversen Bemerkungen zum "denglish" nicht ganz (dachte, JürgenB zielte auf "classe" ab).

                Jetzt, wo du’s sagst … Ja, das tat er wohl. Hatte ich glatt übersehen.

                Qapla'

                --
                „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
    2. Salut ChrisB

      Nicht nachvollziehbar – weder, was „gestaucht“ in diesem Zusammenhang exakt bedeuten soll, noch warum der automatische Umbruch ausbleiben sollte (sofern du ihn nicht explizit unterbunden hast).

      So sieht's aus. Mit gestaucht meine ich den Text unterhalb den Kleinbildern, der zusammengerückt wird. Beim letzten Bild ist der Text normal lesbar.

      Im Prinzip würde ich diesen freien Platz unter den Kleinbildern für eine Beschriftung des Bildes nutzen.

      Der Raum links der Kleinbilder sollte dann für allgemeinere Informationen zu den jeweiligen Beispielen dienen.

      mit Gruss
      bari.

      1. Hi,

        So sieht's aus. Mit gestaucht meine ich den Text unterhalb den Kleinbildern, der zusammengerückt wird.

        Wenn du eine Zeilenhöhe von 0 angibst, musst du dich nicht wundern, wenn Text, der mehr als eine Zeile erfordert, anschließend nicht als mehrere „Zeilen“ dargestellt wird.

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        1. Hallo,

          Wenn du eine Zeilenhöhe von 0 angibst, musst du dich nicht wundern, wenn Text, der mehr als eine Zeile erfordert, anschließend nicht als mehrere „Zeilen“ dargestellt wird.

          Wenn du dadurch den Abstand zum Bild regulieren wolltest, entferne stattdessen das padding-top für div.kleinbild figcaption.

          vg ichbinich

          --
          Kleiner Tipp:
          Tofu schmeckt am besten, wenn man es kurz vor dem Servieren durch ein saftiges Steak ersetzt...
          1. Hello,

            Wenn du dadurch den Abstand zum Bild regulieren wolltest, entferne stattdessen das padding-top für div.kleinbild figcaption.

            ja, jetzt ist so, wie ich es mir vorgestellt habe.

            Voilà...

            Besten Dank für diesen zusätzlichen Tipp!

            Gruss
            bari.

        2. Hallo,

          Wenn du eine Zeilenhöhe von 0 angibst, musst du dich nicht wundern, wenn Text, der mehr als eine Zeile erfordert, anschließend nicht als mehrere „Zeilen“ dargestellt wird.

          Ja, das war der Fehler. Hätte ich mit dem Firebug auch sehen können, wie ich jetzt sehe. Doch war mir der Zusammenhang nicht klar, da ich nicht von einer Stauchung in der Höhe ausging, sonder von einer in der Breite. Zudem bin ich mir jeweils nicht sicher, ob html4.01 und html5 elemente ohne weiteres miteinander kompatibel harmonieren.

          Besten Dank und Gruss
          bari.

      2. Hi,

        setz die line-height nicht auf 0.

        ~dave