helm: Text linksbündig nach Tabellen

Hallo html-Experten,

ich habe für rein interne Zwecke eine lokale html-Seite erstellt, die jpg- und pdf-Graphiken als Thumbnails anzeigt. Die Struktur ist so:

<table style="float:left;width:10%;"> <tr> <td><iframe src="A.pdf" height="150" ></iframe></td> </tr> <tr> <td>A.pdf</td> </tr> </table>

<table style="float:left;width:10%;"> <tr> <td><iframe src="B.jpg" height="150" ></iframe></td> </tr> <tr> <td>B.jpg</td> </tr> </table>

... usw ... (ca. 100 Rahnen)

<p> Linksbündiger Text unter dem Rahmen. </p>

Der "linksbündige" Text quetscht sich, anders als gewünscht, rechts neben die erste Rahmenzeile, oder auch weiter unten.

Wie bekomme ich den Text, wie bei neuen Abschnitten üblich, linksbündig unter die Thumbnails?

Herzliche Grüße

helm

  1. Hallo

    Gibt es weiteres CSS?

    In wie weit willst du Änderungen am gezeigten Quelltext zulassen?

    Welche HTML-Version benutzt du?

    Gruss

    MrMurphy

    1. Hallo

      Gibt es weiteres CSS? s. unten

      In wie weit willst du Änderungen am gezeigten Quelltext zulassen?

      Nur die Dateinamen werden immer wieder ausgetauscht.

      Welche HTML-Version benutzt du? s. unten

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

      "http://www.w3.org/TR/html4/loose.dtd">

      <html>

      <head>
      
      	<meta   http-equiv="Content-Style-Type" content="text/css">
      
      	<meta   content="text/html; charset=ISO-8859-1" http-equiv="content-type">
      
      	<title>Thumbnails</title>    <!-- Beschriftung des Browser-Reiters -->
      
      </head>
      
      <body 
      	style="color: green; background:#c0c0c0; 
      
      	position: absolute; left: 90px; top: 20px";>  
      	 
      	<h3>Thumbnails</h3>      <!-- Überschrift h3 -->
      
      	<h4>Thumbnails</h4>      <!-- Überschrift h4 -->
      

      Gruß

      helm

  2. Hi,

    <table style="float:left;width:10%;"> <p> Linksbündiger Text unter dem Rahmen. </p>

    Der "linksbündige" Text quetscht sich, anders als gewünscht, rechts neben die erste Rahmenzeile,

    Wieso "anders als gewünscht"? Du schreibst doch per "float: left;" genau dieses Verhalten vor.

    cu,
    Andreas a/k/a MudGuard

    1. Hi,

      <table style="float:left;width:10%;"> <p> Linksbündiger Text unter dem Rahmen. </p>

      Der "linksbündige" Text quetscht sich, anders als gewünscht, rechts neben die erste Rahmenzeile,

      Wieso "anders als gewünscht"? Du schreibst doch per "float: left;" genau dieses Verhalten vor.

      cu,
      Andreas a/k/a MudGuard

      Hallo, nach meinem bisherigen Verständnis beeinflusst "style" in meinem Code nicht, was nach den Tabellen kommen soll. Die Seite soll so strukturiert sein:

      Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle Tabelle

      Text nach der Tabelle

      Mit <br> habe ich es auch schon erfolglos versucht. Ich bitte um einen Tipp.

      Gruß

      helm

      1. Hallo

        Jetzt verstehe ich.

        Du hast dich nicht über die Grundlagen von float informiert.

        Float dient nicht dazu Container links- oder rechts auszurichten.

        Gefloatete Elemente umfließen die restlichen nicht gefloateten Elemente und werden dazu aus dem Dokumentenfluß genommen.

        In deinem Beispiel umfließen die table-Elemente das p-Element.

        Damit das p-Element nicht mehr umflossen wird muss das float durch ein clear beendet werden. Merksatz: Kein floaten ohne clearen.

        Das clear muss dem ersten Element zugewiesen werden, das nicht mehr umflossen werden soll. In deinem Beispiel dem p-Element.

        Mit Inline-CSS kann das so aussehen:

        <p style="clear: left;">Linksbündiger Text unter dem Rahmen.</p>
        

        Float hält sehr viele Fallen bereit. Siehe zum Beispiel

        Little Boxes ab Kapitel 13

        oder

        http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

        oder

        http://www.thestyleworks.de/basics/float-rule.shtml

        Gruss

        MrMurphy

        1. @@MrMurphy1

          Merksatz: Kein floaten ohne clearen.

          Nein.

          Wenn man float entsprechend der ursprünglichen Bestimmung verwendet, ein Objekt (bspw. ein Bild) von Text umfließen zu lassen, dann gibt es i.d.R. nicht zu clearen.

          Der Merksatz heißt eher: Wenn man an clear denkt, liegt das meist daran, dass man float dazu missbraucht, Boxen nebeneinander zu positionieren. Das muss man heutzutage nicht mehr tun; dazu gibt es jetzt Flexbox.

          LLAP 🖖

          --
          „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
          1. Hallo Gunnar Bittersmann,

            Wenn man float entsprechend der ursprünglichen Bestimmung verwendet, ein Objekt (bspw. ein Bild) von Text umfließen zu lassen, dann gibt es i.d.R. nicht zu clearen.

            Mit einer deutlichen Betonung von i.d.R. Etwa in der Konstellation

            gefloatetes Bild
            Text
            Überschrift, die wieder über die gesamte Breite gehen soll

            bei unterschiedlich großen Bildern und unterschiedlich langen Texten.

            Bis demnächst
            Matthias

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
            1. @@Matthias Apsel

              Wenn man float entsprechend der ursprünglichen Bestimmung verwendet, ein Objekt (bspw. ein Bild) von Text umfließen zu lassen, dann gibt es i.d.R. nicht zu clearen.

              Mit einer deutlichen Betonung von i.d.R. Etwa in der Konstellation

              gefloatetes Bild
              Text
              Überschrift, die wieder über die gesamte Breite gehen soll

              bei unterschiedlich großen Bildern und unterschiedlich langen Texten.

              Yep.

              Ich ziehe dann mal mein „Nein“ zu MrMurphy1s Merksatz zurück. Es gelten beide Merksätze.

              Es schadet in obigem Beispiel nicht, h1, h2, h3, h4, h5, h6 { clear: all } (bzw. section { clear: all }) zu setzen. Es wäre schon töricht davon auszugehen, dass der Text in allen Konstellationen genügend lang ist, um die Höhe des zu umfließenden Bildes auszufüllen.

              LLAP 🖖

              PS: Ich habe gerade noch das fehlende Komma ersetzt gesetzt. Obwohl, es hätte auch „Es schadet in obigem Beispiel, nicht h1, h2, h3, h4, h5, h6 { clear: all } (bzw. section { clear: all }) zu setzen“ heißen können.

              --
              „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
        2. Hallo MrMurphy,
          jetzt ist der Fall klar, vielen Dank und ebenso für die weiteren Links!
          Gruß
          helm

      2. @@helm

        Mit <br> habe ich es auch schon erfolglos versucht. Ich bitte um einen Tipp.

        <br> sollte außer in Gedichten/Liedtexten und Adressen nirgends im HTML auftreten.

        Für Abstände sind die CSS-Eigenschaften margin (Außenabstand) und padding (Innenabstand) da.

        LLAP 🖖

        --
        „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe