[CSS] Verschiebung von Elementen

Dieses Thema im Forum "Webdesign" wurde erstellt von gmarked, 23. Juni 2009 .

  1. 23. Juni 2009
    Verschiebung von Elementen

    Ich habe ein Problem:
    Ich möchte gern Bildern in <div> Tags von Text umfließen lassen.
    Funktioniert auch.
    Aber: Sobald der Text nicht lang genug ist, um das Bild bis unten hin zu umfließen, und nach dem <div> Tag ein weiteres folgt, setzt dieses auch mitten im 1. <div> Tag ein, obwohl das nicht so sein sollte.
    Natürlich soll der folgende <div> Tag erst beginnen, wenn der erste abgeschlossen ist, auch, wenn der Text nicht reicht, um das Bild bis unten hin zu umfließen.

    Bilder:
    {bild down}


    {bild down}
     
  2. 23. Juni 2009
    AW: Verschiebung von Elementen

    Stichwort: Containing Floats
    Mach einfach ein unsichtbares Element mit clear-Funktion ans Ende deines divs.
     
  3. 24. Juni 2009
    AW: Verschiebung von Elementen

    Das müsstest du näher erläutern, das sagt mir alles nichts!
    Aber schonmal danke!
     
  4. 24. Juni 2009
    AW: Verschiebung von Elementen

    Floats gehören nicht zum normalen Seitenfluss, d.h. dein static-positioniertes div kümmert sich nicht darum, wie groß es wird. Das Problem, dass man i.d.R. möchte, dass das div das gefloatete Element mit einschließt, wird oft als "containing floats" bezeichnet.
    Die einfachste Lösung ist, ganz ans Ende deines divs ein unsichtbares Element zu stellen, dem du die Eigenschaft "clear" gibst. Dieses Element wird dann unter dein Float angeordnet, und da dieses Clear-Element im Gegensatz zum gefloateten Element vom div umschlossen wird, vergrößert sich auch das umschließende div auf die gewünschte Größe.


    Hier ein Bsp:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
     <title>Containing Floats</title>
     <style type="text/css">
     <!--
     #container{
     background-color:#FFAA2A;
     }
     #floated{
     float: left;
     width: 200px;
     height: 400px;
     background-color:#5555FF;
     }
     .clear{
     clear: both;
     visibility: hidden;
     }
     -->
     </style>
    
    </head>
    
    <body>
     <div id="container">
     <div id="floated">gefloatetes div</div>
     <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     <hr class="clear"/>
     </div>
    </body>
    </html>
    Wenn du das <hr> auskommentierst, erhälst du das Problem, das du hast, nämlich, dass das gefloatete Element aus dem div herausragt. Mit dem clear wird es dann (scheinbar) umschlossen.
     
  5. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.