nicht angemeldet
Probleme mit dem Textumfluss bei Grafiken
Ich arbeite seit langer Zeit an einer XHTML-Version meiner Seite und bin fast komplett auf Container umgestiegen. Soweit so gut. In meinem News-Bereich werden die News ebenfalls in Containern dargestellt. In den Container werden auch Bilder unterschiedlicher Größe geladen. Diese werden per float rechts oder links dargestellt, damit der Text um die Bilder fließen kann. Dies funktioniert jedoch nicht, denn der Container ist nur so hoch wie der Text. Das Bild ist also ein Stück im Container drin, ragt unten heraus und geht in den nächsten Container über. Mit display:block; wurde es auch nicht besser und eine feste Größe kann ich der News-Ausgabe auch nicht zuweisen. Hier ein Link dazu http://www.geosektor.de/beta/index.php?site=essential/news&n=evanews
Da man hier keine Bilder sieht, habe ich um die mit float ausgerichteten Grafiken einen weißen Rahmen gelegt. Hat jemand eine Idee wie ich dieses Problem lösen kann?
-
Hallo Daniel,
hebe das Floating auf, in dem Du nach dem Text ein clear setzt, dann überlappt das Bild nicht mehr.
Gruss city
P.S. Eine Begrüssung tut nicht weh und macht das Forum irgendwie freundlicher ;-)
-
Guten Morgen,
du hast Recht. Eine Begrüßung tut nicht weh. Daher erstmal ein Hallo an alle.
Wie soll ich das genau mit dem clear hinter dem Text machen? Der Text wird in einem neuen Container geladen. Daher bin ich davon ausgegangen, dass ich etwas an dem Container selbst machen werde. Von daher verstehe ich nun nicht genau, wie ich deine Idee umsetzen soll.
-
Hallo Daniel,
ohne Quelltext kann ich Dir nicht weiterhelfen, denn der Link funktioniert nicht.
display:block bei einem Div-Container macht keinen Sinn, weil es sich bereits um ein Blockelement handelt.
Wenn ich Dich richtig verstande habe, dann hast Du einen Container, darin ist Text, ich nehme an mit <p>, und ein gefloatetes <img>.
Das <img> ist aus dem Textfluss herausgenommen und überlappt daher, wenn es höher ist, als der Text. Also muss nach dem Text der Fluss wieder hergestellt werden.Gruss city
-
hi,
Das <img> ist aus dem Textfluss herausgenommen und überlappt daher, wenn es höher ist, als der Text. Also muss nach dem Text der Fluss wieder hergestellt werden.
Oder der Container selbst ebenfalls gefloatet werden, oder die "Wunderwaffe overflow" zum Einsatz kommen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Also, ich poste mal hier meinen Quelltext.
<div class="gb-mainout">
<div class="news-head"></div>
<div class="news-out"><? echo nl2br($inhalt); ?></div>
<div class="news-foot"></div>
</div>news-out ist im Grunde das Problem. Die Grafik wird dort als <img> ausgegeben. Wenn ich am Ende beispielsweise <br style="clear: both;"> einfüge, dann klappt es im Grunde aber der erste Container, wird dann nach unten gezogen. Alle anderen werden richtig dargestellt.
-
-
-
-
-
Also, ich poste mal hier meinen Quelltext.
<div class="gb-mainout">
<div class="news-head"></div>
<div class="news-out"><? echo nl2br($inhalt); ?></div>
<div class="news-foot"></div>
</div>news-out ist im Grunde das Problem. Die Grafik wird dort als <img> ausgegeben. Wenn ich am Ende beispielsweise <br style="clear: both;"> einfüge, dann klappt es im Grunde aber der erste Container, wird dann nach unten gezogen. Alle anderen werden richtig dargestellt.
-
Hallo Daniel
»» <div class="gb-mainout"> > <div class="news-head"></div> > <div class="news-out">[code lang=php]<? echo nl2br($inhalt); ?> ~~~</div> > <div class="news-foot"></div> > </div> [/code] Und was sollen wir mit deinem PHP-Quelltext anfangen? Bei Anzeigeproblemen interessiert das, was beim Browser ankommt, nicht das, was du dem Server zu schlucken gibst. Was liefert der Server aus? Wie sieht das CSS aus? Am besten ist immer ein Link auf die Problemseite. > ... Wenn ich am Ende beispielsweise <br style="clear: both;"> einfüge, ... Ob diese Variante für deine Seite geeignet ist, kann niemand wissen, der das HTML und CSS deiner Seite nicht vollständig kennt. Hast du den [Hinweis von wahsaga](https://forum.selfhtml.org/?t=140985&m=916346) probiert und den von ihm [verlinkten Artikel](http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#wunderwaffe-overflow) durchgearbeitet? Bei Grafiken bekannter Größe gibt es außerdem noch die Möglichkeit, für das Element, welches die gefloatete Grafik enthält, `min-height: Grafikhöhe`{:.language-css} und für IE <=6 `height: Grafikhöhe`{:.language-css} zu definieren. Auf Wiederlesen Detlef -- - Wissen ist gut - Können ist besser - aber das Beste und Interessanteste ist der Weg dahin!-
Mein Quelltext zeigt lediglich einen Teil. Der PHP-Teil interessiert im Grunde nicht, da ich ja erklärt habe, was da ausgegeben wird, nämlich einmal <img> und dann der Text.
Einen Link habe ich ebenfalls angegeben. Der verlinkte Artikel konnte mir auch nicht helfen. Größen kann ich nicht definieren, da diese immer variabel sind. Wobei ich immer die Größe der Grafik mit height und width angebe.
-
-
Hm, irgendwas lief schief und die Ursprungsnachricht verschwand... Hier nochmal den Anganfspost.
Ich arbeite seit langem an einer XHTML-Version meiner Seite und bin fast komplett auf Container umgestiegen. Soweit so gut. In meinem News-Bereich werden die News ebenfalls in Containern dargestellt. In den Containern werden auch Bilder unterschiedlicher Größe geladen. Diese werden per float rechts oder links dargestellt, damit der Text um die Bilder fließen kann. Dies funktioniert jedoch nicht, denn der Container ist nur so hoch wie der Text. Das Bild ist also ein Stück im Container drin, ragt unten heraus und geht in den nächsten Container über. Mit display:block; wurde es auch nicht besser und eine feste Größe kann ich der News-Ausgabe auch nicht zuweisen. Hier ein Link dazu http://www.geosektor.de/beta/index.php?site=essential/news&n=evanews
Man sieht es an der dritten News von oben.-
Hallo Daniel
Hm, irgendwas lief schief und die Ursprungsnachricht verschwand... Hier nochmal den Anganfspost.
... Mit display:block; wurde es auch nicht besser ...
Natürlich nicht, denn das ist ja sowieso die Defaulteigenschaft eines Div-Elements.
... und eine feste Größe kann ich der News-Ausgabe auch nicht zuweisen. ...
Wenn du die Größe der Bilder kennst, um sie als HTML-Attribut beim img einzutragen, könnte das Script diese auch für ein Inlinestyle des umschließenden Elements verwenden.
Das wäre allerdings nicht unbedingt die empfehlenswerte Lösung.... Hier ein Link dazu http://www.geosektor.de/beta/index.php?site=essential/news&n=evanews
Sorry, die unverlinkte URI mitten im Fließtext habe ich übersehen.
So wäre es ein Link: http://www.geosektor.de/beta/index.php?site=essential/news&n=evanews
So, nun aus deinem anderen Posting:
... Der verlinkte Artikel konnte mir auch nicht helfen. ...
Hast du ihn überhaupt gelesen?
Wenn ich das, was dort steht anwende, dann funktioniert es im Firefox auf Anhieb:
.news-out { ... overflow:hidden; }Ich würde allerdings wohl eher
overflow:autoverwenden, hat den selben Effekt, sorgt im Zweifelsfall aber für Scrollbalken statt für abgeschnittene Inhalte.Wie du dies dann auch im IE erreichen kannst, steht auch in dem Artikel.
Noch ein paar Hinweise:
Den Grafiken würde ich noch einen Abstand zum Text geben.
.imgl { ... margin-right:5px; } .imgr { ... margin-left:5px; }Die gesamte Seite oder aber die mittlere Spalte sollte noch eine Mindestbreite bekommen, damit sie bei schmalen Browserfenstern nicht vollständig zusammengequetscht wird.
Außerdem solltest du die Seite mal im Firefox aufrufen und dann die Schrift vergrößern.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Den Artikel habe ich gelesen. Allerdings habe ich ihn nicht ganz verstanden, da ich der Meinung war, wenn ich mit overflow arbeite, dass das Bild abgeschnitten wird und somit nicht komplett dargestellt wird... Ich habe ihn jedoch nochmal gelesen und soweit hat es geklappt. Mit dem Folgeartikel zum Thema hasLayout habe ich mich ebenfalls beschäftigt und die Bugs beim IE behoben. So scheint es zumindest. Wenn ich mir die Seite online im IE6 anschaue, ist alles wie es sein soll. Offline wird der Inhalt mittig unter den Menüs dargestellt. Cache geleert und sogar die gesamte Seite vom Server geladen. Immer noch das gleiche Problem. Der IE7 stellt alles richtig dar. Online und auch offline...
Zum Thema margin-left und margin-right. Wenn die Bilder vorhanden sind, dann ist ein margin-left bzw. margin-right dabei. Ohne die Bilder sieht es anders aus.
Ich persönlich surfe nur mit dem Firefox 2.0 und ich weiß daher nicht was da genau mit der Schrift sein soll. Meiner Meinung nach ist alles in Ordnung.
-
Hallo Daniel
Den Artikel habe ich gelesen. Allerdings habe ich ihn nicht ganz verstanden, da ich der Meinung war, wenn ich mit overflow arbeite, dass das Bild abgeschnitten wird und somit nicht komplett dargestellt wird...
Ja, aber nur, wenn die Größe des Elternelements zu klein ist. Wenn allerdings keine Höhe angegeben ist, richtet sich diese ja nach dem Inhalt. Und, wie ich schon schrieb, verwende ich deshalb auch meist
overflow:auto, es erzeugt auch den Block Formatting Contexts, zeigt aber im Notfall Scrollbalken an, statt etwas abzuschneiden.... Zum Thema margin-left und margin-right. Wenn die Bilder vorhanden sind, dann ist ein margin-left bzw. margin-right dabei.
Du hast ein padding definiert. Wenn ich mich richtig errinnere, wird padding beim img nicht von allen Browsern unterstützt, außerdem - wie du schriebst:
Ohne die Bilder sieht es anders aus.
(Es soll doch tatsächlich auch manchmal vorkommen, dass ein Bild nicht oder nicht sofort geladen wird.)
Ich persönlich surfe nur mit dem Firefox 2.0 und ich weiß daher nicht was da genau mit der Schrift sein soll. Meiner Meinung nach ist alles in Ordnung.
Das finde ich nicht. Mir persönlich ist die Schrift etwas zu klein, also drücke ich die Strg-Taste und drehe ein wenig am Mausrad um die Schrift etwas zu vergrößern.
Tu dies mal und schau dir dann deine Seite an.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-