jobo: Text um Bild floaten lassen - wie danach clearen?

SELF-Forum

Text um Bild floaten lassen - wie danach clearen?

jobo
– Informationen zu den Bewertungsregeln

Hallo,

  
<h2>Bereich</h2>  
<h3>Name1</h3>  
<p>  
<img src="name1.jpg">  
Text und nochmehr Text ...  
</p>  
<h3>Name2</h3>  
<p>  
<img src="name2.jpg">  
Text und nochmehr Text ...  
</p>  
<!-- etc pp -->

Wenn ich dem Bild ein float:left geben (was ich eh nicht verstehe, denn es ist ja ein inline-Element), dann müsste ich den h3 ein clear:left geben. Aber dann haut er mir auch beim ersten h3 einen großen Absatz davor, obwohl es da oder grade weil es da nix zu clearen gab, vermute ich.

Wie mach ich das denn richtig? Das Prinzip konnte ich hoffentlich klar machen, die Aufgabenstellung ja eigentlich auch recht simpel. Habe jetzt ein hässliches <div style="clear:left"></div> dazwischen gepackt. Missbrauch hoch 10 und noch inline-style...; bäh.

Dank und Gruß

jobo

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Text um Bild floaten lassen - wie danach clearen?

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Wie mach ich das denn richtig? Das Prinzip konnte ich hoffentlich klar machen, die Aufgabenstellung ja eigentlich auch recht simpel. Habe jetzt ein hässliches <div style="clear:left"></div> dazwischen gepackt. Missbrauch hoch 10 und noch inline-style...; bäh.

      
img+h3, img+table { clear:left; }

    das sorgt dafür, dass der Textfluss nach floatenden Bildern bei Tabellen oder h3-Überschriften wiederhergestellt wird. Es spricht aber - wenn es das layout erfordert - nichts dagegen, einfach beinhalt bei h3 zu clearen.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Text um Bild floaten lassen - wie danach clearen?

      jobo
      – Informationen zu den Bewertungsregeln

      Hallo,

      Wie mach ich das denn richtig? Das Prinzip konnte ich hoffentlich klar machen, die Aufgabenstellung ja eigentlich auch recht simpel. Habe jetzt ein hässliches <div style="clear:left"></div> dazwischen gepackt. Missbrauch hoch 10 und noch inline-style...; bäh.

      img+h3, img+table { clear:left; }

      
>   
> das sorgt dafür, dass der Textfluss nach floatenden Bildern bei Tabellen oder h3-Überschriften wiederhergestellt wird. Es spricht aber - wenn es das layout erfordert - nichts dagegen, einfach beinhalt bei h3 zu clearen.  
  
Dann haut er mir zwischen h2 und h3 (also das erste, wo noch kein float voran ging) einen riesen Absatz. Frag mich nicht warum ... ???  
  
Gruß  
  
jobo
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Text um Bild floaten lassen - wie danach clearen?

        jobo
        – Informationen zu den Bewertungsregeln

        Hallo,

        Hallo,

        Wie mach ich das denn richtig? Das Prinzip konnte ich hoffentlich klar machen, die Aufgabenstellung ja eigentlich auch recht simpel. Habe jetzt ein hässliches <div style="clear:left"></div> dazwischen gepackt. Missbrauch hoch 10 und noch inline-style...; bäh.

        img+h3, img+table { clear:left; }

        
> >   
> > das sorgt dafür, dass der Textfluss nach floatenden Bildern bei Tabellen oder h3-Überschriften wiederhergestellt wird. Es spricht aber - wenn es das layout erfordert - nichts dagegen, einfach beinhalt bei h3 zu clearen.  
>   
> Dann haut er mir zwischen h2 und h3 (also das erste, wo noch kein float voran ging) einen riesen Absatz. Frag mich nicht warum ... ???  
  
Ich kann es aber nicht reproduzieren:  
  
~~~html
  
<html>  
<body>  
<h2>abc</h2>  
<h3 style="clear:left">clear</h3>  
<h2>abc2</h2>  
<h3>noclear</h3>  
</body>  
</html>

        Wird normal angezeigt ...;

        Gruß

        jobo

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Text um Bild floaten lassen - wie danach clearen?

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@jobo:

    nuqneH

    Wenn ich dem Bild ein float:left geben (was ich eh nicht verstehe, denn es ist ja ein inline-Element)

    Eben, es steht in der (einen!) Zeile.

    dann müsste ich den h3 ein clear:left geben.

    Nicht unbedingt. Es sollte genügen, den p ein overflow: hidden zu geben.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Text um Bild floaten lassen - wie danach clearen?

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Gunnar Bittersmann:

      nuqneH

      Nicht unbedingt. Es sollte genügen, den p ein overflow: hidden zu geben.

      Argl, erst denken! Dann steht (wenn der Absatz weniger Höhe einnimmt als das Bild) der nachfolgende Absatz nicht mehr neben, sondern unterm Bild.

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Text um Bild floaten lassen - wie danach clearen?

        jobo
        – Informationen zu den Bewertungsregeln

        Hallo,

        @@Gunnar Bittersmann:

        nuqneH

        Nicht unbedingt. Es sollte genügen, den p ein overflow: hidden zu geben.

        Argl, erst denken! Dann steht (wenn der Absatz weniger Höhe einnimmt als das Bild) der nachfolgende Absatz nicht mehr neben, sondern unterm Bild.

        Naja, das wäre ja o.k.. Wobei der Nachfolger ja ein <h3> ist. Aber wieso klappt das denn mit dem overflow:hidden. Ich dachte, dass ist dazu da, den overflow zu hiden, also den Überfluss zu verstecken ;-)

        Qapla'

        Gruß

        jobo

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Text um Bild floaten lassen - wie danach clearen?

          Matthias Apsel Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Om nah hoo pez nyeetz, jobo!

          Aber wieso klappt das denn mit dem overflow:hidden. Ich dachte, dass ist dazu da, den overflow zu hiden, also den Überfluss zu verstecken ;-)

          http://forum.de.selfhtml.org/archiv/2010/12/t202270/#m1365894 f.

          Matthias

          --
          1/z ist kein Blatt Papier.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        2. Text um Bild floaten lassen - wie danach clearen?

          molily
          – Informationen zu den Bewertungsregeln

          Aber wieso klappt das denn mit dem overflow:hidden. Ich dachte, dass ist dazu da, den overflow zu hiden, also den Überfluss zu verstecken ;-)

          overflow: hidden erzeugt einen Block Formatting Context
          http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#wunderwaffe-overflow

          overflow:hidden ist schon lange nicht mehr das Mittel der Wahl zum Einschließen von Floats. Der gute alte Clearfix in einer aktuellen Variante bringt am wenigsten Probleme und Nebenwirkungen mit sich.

          Mathias

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Text um Bild floaten lassen - wie danach clearen?

            jobo
            – Informationen zu den Bewertungsregeln

            Hallo,

            overflow:hidden ist schon lange nicht mehr das Mittel der Wahl zum Einschließen von Floats. Der gute alte Clearfix in einer aktuellen Variante bringt am wenigsten Probleme und Nebenwirkungen mit sich.

            also

              
/* For modern browsers */  
.cf:before,  
.cf:after {  
    content:"";  
    display:table;  
}  
  
.cf:after {  
    clear:both;  
}  
  
/* For IE 6/7 (trigger hasLayout) */  
.cf {  
    zoom:1;  
}

            und

              
<p class="cf">  
<img src="bla.jpg" style="float:left">viel Text</p>  
<h3>neu</h3>  
<!-- inline style fürs img jetzt nur zur verdeutlichung-->

            und alles ist gut.

            Merci.

            Gruß

            jobo

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  3. Text um Bild floaten lassen - wie danach clearen?

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    Wenn ich dem Bild ein float:left geben (was ich eh nicht verstehe, denn es ist ja ein inline-Element),

    aus HTML-Sicht ist img immer ein inline-Element. Egal wie es dargestellt wird.

    Aus CSS-Sicht ist img mit float ungleich none ein block-Element.

    Siehe Zusammenhang zwischen display, float, position

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  4. Text um Bild floaten lassen - wie danach clearen?

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Wenn ich dem Bild ein float:left geben (was ich eh nicht verstehe, denn es ist ja ein inline-Element), dann müsste ich den h3 ein clear:left geben. Aber dann haut er mir auch beim ersten h3 einen großen Absatz davor, obwohl es da oder grade weil es da nix zu clearen gab, vermute ich.

    Ich vermute eher, dass das daran liegt, dass du damit eine Voraussetzung für die Aufhebung von adjoining margins schaffst.

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln