Thomas Schmieder: Textumfluss um DIV

Hallöle,

kann man bei DIV kein float:xxxx angeben?

Das funktioniert einfach nicht mkit dem Textumfluss um das DIV. Ich konnte aber auch bisher nix gegenteiliges finden.

Liebe Grüße aus http://www.braunschweig.de

Tom

--
Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen.
  1. Hallo Tom,

    kann man bei DIV kein float:xxxx angeben?
    Das funktioniert einfach nicht mkit dem Textumfluss um das DIV. Ich konnte aber auch bisher nix gegenteiliges finden.

    bei dem div-Element handelt es sich um ein Block-Level-Element, d.h.
    mit der float-Eigenschaft erreichst Du da nicht viel, es sei denn,
    Du biegst Dir das div-Element zu einem Inline-Level-Element um.

    Viele Grüße,
    Stefan

    1. bei dem div-Element handelt es sich um ein Block-Level-Element, d.h.
      mit der float-Eigenschaft erreichst Du da nicht viel, es sei denn,
      Du biegst Dir das div-Element zu einem Inline-Level-Element um.

      obigen Absatz bitte aus dem Protokoll streichen ...

      gib dem DIV eine feste Breite und dann funktioniert es da natürlich.
      Standardmäßig ist es, weil es eben ein Block-Level-Element ist, 100%
      breit und da hilft dann float nicht viel.

      Viele Grüße,
      Stefan

      1. Hallo Stefan,

        die Breite haben wir mit CSS auch über width:260px (Bsp.) festgelegt. Aber der Text wollte trotzdem nicht fließen, so wie er das z.B. bei <h1 style="float:left; width:200">bla bla</h1> tun würde...

        Bei den DIVs haben wir es mit inline-Style und mit seitenzentralen Definitionen und ID="definition" versucht. Nix klappt. Auch das Spielen mit dem z-index hat nichts gebracht.

        Entweder, das ganze team ist zu blöd, oder es funktioniert wirklich nicht. Beides wäre nicht gut...

        Liebe Grüße aus http://www.braunschweig.de

        Tom

        --
        Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen.
        1. Hi Thomas,

          <h1 style="float:left; width:200">bla bla</h1>

          200 was? Eier? Bananen? ;)

          Bei den DIVs haben wir es mit inline-Style und mit seitenzentralen Definitionen und ID="definition" versucht. Nix klappt.

          <div style="width:100px; border:1px solid #f00; float:right;">
           <div style="width:100px; border:1px solid #f00; float:right;">
           <div style="width:100px; border:1px solid #f00;>

          Das funktioniert, hast du etwas Quelltext zur Hand? Bist du etwa mit left/right durcheinandergekommen? Das passiert mir hin und wieder.

          Auch das Spielen mit dem z-index hat nichts gebracht.

          Der ist hier auch irrelevant.

          Entweder, das ganze team ist zu blöd, oder es funktioniert wirklich nicht. Beides wäre nicht gut...

          Öhm. Das musst du wissen *fg*

          LG Roland

          1. Hi Rolando, *gg*

            <div style="width:100px; border:1px solid #f00; float:right;">
             <div style="width:100px; border:1px solid #f00; float:right;">
             <div style="width:100px; border:1px solid #f00;>

            Das funktioniert, hast du etwas Quelltext zur Hand? Bist du etwa mit left/right durcheinandergekommen? Das passiert mir hin und wieder.

            Auch sowas hatten wir schon probiert. Ich kopier mir das gelich nochmal in meinen Testordner...

            "etwas" Quelltext...  Das Bild fehlt dann natürlich.

            <html>

            <head>

            <title> CSS Möglichkeiten    </title>

            <style type="text/css">
            <!--
            /*body { }*/
            #Ueberschrift { position:absolute; top:20px; left:20px; z-index:3;}
            #Unterschrift { position:absolute; top:170px; left:20px; z-index:6;}
            #Schatten { position:absolute; top:60px; left:24px; width:253; height:103; z-index:4;}
            #Grundkoerper { position:absolute; top:50px; left:15px; width:250; height:100; z-index:5;}
            #1 { position:absolute; top:0px; left:0px; z-index:1;}
            #2 { position:absolute; top:200px; left:50px; width:300px; height:200; z-index:2; float:left; background-color:aqua}
            #Seitentext {z-index:7;}
            -->
            </style>

            </head>

            <body bgcolor="white" text="black">

            <div id="1">   <!-- 1 -->

            <div id="2"style="float:left; width:300px;"> <!-- 2 -->

            <div id="Ueberschrift" style="background:white; border:solid 0px yellow;">Überschrift</div>
                    <div id="Schatten" style="background:gray;">Schatten</div>
                    <div id="Grundkoerper" style="background:white; border:solid 2px yellow;">
                      <img src="../Carsten Klein/Testbild.gif" width="250" height="100"> </div>
                    <div id="Unterschrift" style="background:white; border:solid 0px yellow;">Unterschrift</div>

            </div>       <!-- 2 -->

            <div id="Seitentext" style="font-family:'Times New Roman',Times,serif"; "font-size:15pt">

            Seitentext <br>
              Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!!
              Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!!
               Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!!
              Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!!
              Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!!
               Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!! Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!!
              Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!!
               Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!! Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!!
              Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!!
               Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!! Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!!
              Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!!
               Hier steht dann, was mit
              dem Bild optisch
              wahrgenommen wird,
              in Textform.
              Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
              Darum diese sinnlosen Zeilen !!!

            </div>

            </div>         <!-- 1 -->

            </body>

            </html>

            Liebe Grüße aus http://www.braunschweig.de

            Tom

            --
            Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen.
            1. Hi Tom,
              falls du meine Mail nicht rechtzeitig bekommst oder nicht dran glaubst (*g*):

              Nein, _absolut_ positionierte Blockelemente (die anderen kann man nicht positionieren) _floaten nicht_!

              Du kannst ja einem Block nicht sagen, "fange da an, aber bitte floate den da drüben trotzdem"...

              Insofern: Wir müssen uns mit dem Block-Modell und der Positionierung vertraut machen, das tolle Sachen ermöglicht, wenn man's verstanden hat. ;-)

              Fabian

              1. Hi Fabian,

                Nein, _absolut_ positionierte Blockelemente (die anderen kann man nicht positionieren) _floaten nicht_!

                Der Text ist ja auch gar nicht absolut positioniert.

                Insofern: Wir müssen uns mit dem Block-Modell und der Positionierung vertraut machen, das tolle Sachen ermöglicht, wenn man's verstanden hat. ;-)

                Ja, dringend. Ich kann aber nicht alles zur gleichen Zeit vorbereiten. Das wär toll, wenn Du was für Sonnabend vorbereiten könntest.

                Liebe Grüße aus http://www.braunschweig.de

                Tom

                --
                Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen.
                1. Hallo,

                  dass das zu umfließende Element nicht "absolut" positioniert werden darf, ist ja wohl ein schlechter Witz von CSS. Dass der Fließtext ringsherum nicht festgenagelt werden darf, würde mir ja noch einleuchten.

                  Wenn man dann postition:relative nimmt, umfließt der Text ganz brav die Ursprungspostition des zu umfließenden Objektes und das Objekt steht irgendwo verschoben im Raum. Wofür braucht man denn sowas?

                  Je tiefer ich in diese Materie vordringe, desto mehr bin ich der Meinung, dass die Browsertechnik Kinderkacke ist. Die haben es tatsächlich verstanden, das Rad der EDV-Entwicklung durch diesen Mist um mehr als 15 Jahre zurückzudrehen!

                  to be continued...

                  Liebe Grüße aus http://www.braunschweig.de

                  Tom

                  Liebe Grüße aus http://www.braunschweig.de

                  Tom

                  --
                  Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen.
            2. Hallo Tom,

              #Ueberschrift { position:absolute; top:20px; left:20px; z-index:3;}

              wenn Du uns nur die Hälfte sagst und _relevante_ Infos nicht, dann
              können wir nur raten bzw. unsere Vorschläge werden Dir nicht helfen.

              http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-float:

              "This property specifies whether a box should float to the left, right,
               or not at all. It may be set for elements that generate boxes that are
               not absolutely positioned."

              Diese Aussage ist eindeutig (und auch sehr logisch).

              Viele Grüße,
              Stefan

            3. Hi Thomas,

              Hi Rolando, *gg*

              häh? ;) Wenn schon, dann bitte Ronaldo *g*

              Von mir gibt's übrigens auch gleich eine auf'n Deckel:

              #1 { ... }
              #2 { ... background-color:aqua }
              <div id="2"style="float:left; width:300px;"> <!-- 2 -->

              IDs dürfen nicht mit Ziffern beginnen und trenne bitte deine Attribute sauberer... Kennen alle Browser 'aqua'?

              <img src="../Carsten Klein/Testbild.gif" width="250" height="100"> </div>

              Funktioniert das mit dem Leerzeichen im Pfad zuverlässig? Ich wäre da vorsichtig.

              <div id="Unterschrift" style="background:white; border:solid 0px yellow;">Unterschrift</div>

              Kennen alle Browser 'yellow'?

              Liebe Grüße aus http://www.braunschweig.de

              Dito aus <http//wien.at/>

              Roland

              1. Hallihallo Roland, *na dann anständig*

                Von mir gibt's übrigens auch gleich eine auf'n Deckel:

                #1 { ... }
                #2 { ... background-color:aqua }

                Das könnte natürlich was ausmachen...

                <div id="2"style="float:left; width:300px;"> <!-- 2 -->

                IDs dürfen nicht mit Ziffern beginnen und trenne bitte deine Attribute sauberer... Kennen alle Browser 'aqua'?

                Da kommen nachher nur #xxyyzz-Farbangaben rein

                <img src="../Carsten Klein/Testbild.gif" width="250" height="100"> </div>

                Funktioniert das mit dem Leerzeichen im Pfad zuverlässig? Ich wäre da vorsichtig.

                Als ich es eben für meinen Arbeitsplatz umgebaut habe, habe ich auch erst gestutz. Das soll aber angeblich immer anständig funktionieren, das der Path-String ja gebunden übergeben wird. Für die harte Praxis würde ich das allerdings auch nicht durchgehen lassen.

                <div id="Unterschrift" style="background:white; border:solid 0px yellow;">Unterschrift</div>

                Kennen alle Browser 'yellow'?

                Gute Frage, weiß ich nicht. Siehe oben.

                Liebe Grüße aus http://www.braunschweig.de

                Tom

                --
                Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen.
              2. Hallo, Thomas und Roland,

                Kennen alle Browser 'yellow'?

                http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/443.html
                http://www.w3.org/TR/REC-CSS1#color-units
                http://www.w3.org/TR/REC-html32#colors
                http://www.w3.org/TR/html401/types.html#h-6.5
                http://www.w3.org/TR/CSS21/syndata.html#color-units
                ...
                http://lists.w3.org/Archives/Public/www-style/1998Aug/0114.html

                Die Antwort lautet: Nein. *Alle* Browser nicht. *smirk*

                Mit hoher Wahrscheinlichkeit kennen alle Browser, welche fähig sind, die Farben der VGA 16-Palette anzuzeigen, auch den Farbnamen »yellow«, sofern sie ein wenig CSS oder HTML verstehen.

                Grüße,
                Mathias

                --
                Mein Leben, ein Leben ist es kaum, / Ich gehe dahin als wie im Traum.
                Wie Schatten huschen die Mensch hin, / Ein Schatten dazwischen ich selber bin.
                Und im Herzen tiefe Müdigkeit - / Alles sagt mir: Es ist Zeit ...
                (Theodor Fontane, Mein Leben)
                1. Hi Motz, [1]

                  Kennen alle Browser 'yellow'?

                  [...] Die Antwort lautet: Nein. *Alle* Browser nicht. *smirk*

                  Ups, du hast glatt 'aqua' unterschlagen. Dabei wollte ich doch Prinzipien reiten und sanft auf 'saubere' Farbdefinitionen hinweisen.

                  Mit hoher Wahrscheinlichkeit kennen alle Browser, welche fähig sind, die Farben der VGA 16-Palette anzuzeigen, auch den Farbnamen »yellow«, sofern sie ein wenig CSS oder HTML verstehen.

                  Junger Mann, lesen sie doch bitte zwischen den Zeilen! *g*

                  LG Roland

                  [1] de-AT, du wolltest es nicht anders...