helm: Text linksbündig nach Tabellen

SELF-Forum

Text linksbündig nach Tabellen

helm
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Text linksbündig nach Tabellen

    MrMurphy1 (Versionen)
    – Informationen zu den Bewertungsregeln

    Hallo

    Gibt es weiteres CSS?

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

    Welche HTML-Version benutzt du?

    Gruss

    MrMurphy

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Text linksbündig nach Tabellen

      DasFeldNameVerstehIchNicht
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Text linksbündig nach Tabellen

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Text linksbündig nach Tabellen

      helm
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Text linksbündig nach Tabellen

        MrMurphy1 (Versionen)
        – Informationen zu den Bewertungsregeln

        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

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Text linksbündig nach Tabellen

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@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
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Text linksbündig nach Tabellen

            Matthias Apsel Homepage des Autors
            – Informationen zu den Bewertungsregeln

            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.
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Text linksbündig nach Tabellen

              Gunnar Bittersmann Homepage des Autors (Versionen)
              – Informationen zu den Bewertungsregeln

              @@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
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

        2. Text linksbündig nach Tabellen

          helm
          – Informationen zu den Bewertungsregeln

          Hallo MrMurphy,
          jetzt ist der Fall klar, vielen Dank und ebenso für die weiteren Links!
          Gruß
          helm

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. Text linksbündig nach Tabellen

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@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
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln