✔ Text umfließt Bild

H

Hardi82

Mitglied
Hallo Leute,

heute habe ich ein kleines Layout-Problem bezüglich eines Umfießen von Text zu einem Bild. Dazu erst einmal der Quellcode:

HTML: 
<div class="news view" style="border:1px dashed silver">
  <h2>Überschrift</h2>
  <p>
    <img width="150" height="60" src="images/bild.gif" style="float:right;">
   [Text des Inhaltes verschiedener Länge]
  </p>
</div>

An sich funktioniert das schon recht gut. Das Problem liegt darin, wenn das Bild von der Höhe mehr Platz ausfüllt, als Text vorhanden ist. Das Div-Element hat dann die Höhe des Textes und das Bild geht über den Rand des Div-Elementes hinaus. Woran liegt das? Ich hätte gern, dass alles, sowohl Text als auch Bild und eventuell andere im Div-Element definierten Elemente vom gesamten Div eingeschlossen und somit der Rahemen um alle Elemente herum geht. Wie kann ich das bewerkstelligen?

Grüße
Hardie
 
Moin,

das Floaten muß mittels der clear-Eigenschaft wieder aufgehoben werden - siehe meinen "Webmaster FAQ"-Artikel CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?.

Die in dem Artikel genannte CSS-Klasse clearfix wird demnach im übergeordneten DIV aufgerufen:
Code: 
<div class="news view clearfix" style="border:1px dashed silver">...</div>


mfg Maik
 
Okay, auf den ersten Blick war alles wie gewünscht, nun hat sich aber eine andere unschöne Sache des Designs ergeben. Ich habe ein dreispaltiges Layout ganz nach dem Tutorial von selfhtml auf meiner Seite. Wenn ich nun für den Contentbereich die clearfix-Klasse angebe, passt sich die Contentgröße nicht mehr dem Inhalt an. Das bedeutet, wenn kein Bild vorhanden ist oder es kleiner als der Textinhalt ist, wird das Content-Div auf eine fixe Größe gesetzt und ich erhalte dann einen gewissen Freiraum zwischen dem Inhalt und dem unterem Rand des Content-Div. Es scheint so, als ob sich das Div an der Höhe der seitlichen Divs orientiert. Das sollte aber nach Möglichkeit nicht so sein, sondern dynamisch die Größe nach dem Inhalt erhalten. Gibt es dazu auch eine Lösung?

Grüße
 
Wenn ich deinen Seitenaufbau im Detail jetzt richtig deute, müsste in diesem Fall entgegen der SELFHTML-Vorlage der mittlere Content-Block mit einer float-Deklaration oder absoluten Positionierung aus dem Textfluß genommen werden, damit sich das "Clearing" nicht an der Höhe der benachbarten Spaltenblöcken orientiert.

mfg Maik
 
Hallo Maik,

also ich habe mir deinen Tipp angeschaut und mal versucht, den Inhalt mit "float:left" aus dem Dokumentenfluß herauszunehmen und gleichzeitig vor die Info-Box gesetzt. Dabei ergibt sich aber ungefähr folgendes Bild:

Code: 
|----------------------------------Header------------------------------------|
|----Navi----|
               |-----------------Inhalt----------------|
                                                           |------News------|
|-----------------------------------Footer-------------------------------------|
Der Quelltext sieht folgend aus:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }

  h1 {
    font-size: 1.5em;
    margin: 0 0 0.7em; padding: 0.3em;
    text-align: center;
    background-color: #fed;
    border: 2px ridge silver;
  }

  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0 0 1.2em; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0 0 1.1em; padding: 0;
    background-color: #eee; border: 1px dashed silver;
  }
  div#Info h2 {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }

  div#Inhalt {
    margin: 0 12em 1em 16em;
    padding: 0 1em;
    border: 1px dashed silver;
    float:left;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }

  p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #fed; border: 1px solid silver;
  }
  
  .clearfix:after {
    content:".";
    display:block;
    height:0;
    font-size:0;
    clear:both;
    visibility:hidden;
  }
    
  .clearfix {display:inline-block;}
  
  /* Hides from IE-mac \*/
  * html .clearfix {height:1%;}
  .clearfix {display:block;}
  /* End hide from IE-mac */
</style>
</head>
<body>

  <h1>CSS-basierte Layouts</h1>

  <ul id="Navigation">
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
  </ul>

  <div id="Inhalt" <!--class="clearfix"-->>
    <h2>3-spaltiges Layout mit Kopf- und Fußzeile</h2>
     <img src="bild.jpg" alt="Bild zum Text" style="float:right"/>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
      sed diam voluptua. At vero eos et accusam et 
  </div>
  
  <div id="Info">
    <h2>Info-Box</h2>
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  </div>

  <p id="Fusszeile">Diese Fußzeile stellt über die CSS-Eigenschaft 'clear'
     den Elementenfluss wieder her.</p>

</body>
</html>

Die clearfix-Anweisung habe ich erst einmal auskommentiert, da sie in dieser Konstellation keine Wirkung zeigt. Dennoch bekomme ich nicht die erwünschte Wirkung. Hast du vielleicht noch eine Idee, wo ich was übersehen habe?

Grüße
Hardie
 
Zuletzt bearbeitet:
Hi,

das kann und wird in diesem "Float-Modell" so nicht funktionieren - mein Tipp mit der float-Deklaration war auf den aufgetretenen Problemfall mit der "Clearing"-Methode eher grundsätzlich bezogen.

Alternativ-Vorschlag, der ohne die clearfix-Klasse auskommt:
HTML: 
<body>

  <h1>CSS-basierte Layouts</h1>

  <ul id="Navigation">
    ...
  </ul>

  <div id="Info">
    ...
  </div>

  <div id="Inhalt">
    ...
  </div>

  <p id="Fusszeile">...</p>

</body>
Code: 
  div#Inhalt {
    margin: 0 1em 1em 1em;
    padding: 0 1em;
    border: 1px dashed silver;
    overflow: hidden;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
    overflow: visible;
  }
Code: 
<style type="text/css">
/* Bestehendes Stylesheet */
</style>
<!--[if lte IE 7]>
<style type="text/css">
div#Inhalt {
    margin: 0 12em 1em 16em;
  }
</style>
<![endif]-->


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück