Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Firefox: div-darstellung strange





Frage

@all: warum stellt der firefox 1.0 Browser diese Seite falsch dar: [url]http://www.hblachut.de/corfu-nikos-2/haus/haus.htm[/url] ? Es sollte eigentlich um das äussere div ("divaussen") ein 1px solid black-Rahmen sein, und die Bilder sollen jeweils mit dem dazugehörigen Text auf einer Ebene stehen. Mit dem IE 5.5 klappt das so hervorragend, dort wird es genau so dargestellt, wie ich es gerne hätte. Auch Opera 5.02 stellt es nicht so dar, wie ich es gerne hätte. Ein div schliesst das Bild + den dazugehörigen Text ein, dann das nächste div mit dem nächsten Bild + Text usw..., warum bleibt der Text nicht neben dem dazugehörigen Bild? Die css-Datei liegt hier: [url]http://www.hblachut.de/corfu-nikos-2/format.css[/url] Jemand ne Idee? Danke und Gruss Heiko

Antwort 1 von rfb

Zitat:
warum bleibt der Text nicht neben dem dazugehörigen Bild?
weil du mit float:left den Browser anweist, genau das nicht zu tun. Abhilfe:
#content div {clear:left}
weist jedes div in #content an, float:left aufzuheben. Der IE macht das scheinbar falsch (welch Wunder ;-) wenn auch diesmal in deinem Sinne.

Die Verschachtelung von float:left und float:right führt übrigens zu dem border-Problem: der Rahmen wird nur um das oberste div gelegt, was nicht auffällt, da dort schon einer ist.
So spontan hab ich da keine Abhilfe.

Antwort 2 von derpfleger

@rfb:

dann habe ich wohl "float" vollkommen falsch verstanden:
float:left in einem Element platziert dieses Element gemessen an seinem Elternelement linksbündig und lässt den folgenden Text rechts an sich vorbeifliessen (anstatt ihn darunter zu platzieren).
Ist das nicht so?

Gruss Heiko

Antwort 3 von derpfleger

@rfb:

Hmmm. Also wenn ich das float:left aus den styles der Bilder (innerhalb des img-Tag) herausnehme (was deinem Vorschlag wohl gleichkommt), dann passiert eben genau das, was ich ja nicht will: der Text wird unterhalb der Bilder gesetzt.

Mich juckt ja schon wieder der Finger, einfach eine Tabelle anzulegen, aber eigentlich will ich dieses Projekt ja dazu nutzen, endlich css und die Anwendung von div-Boxen für Tabellen- und Frame-freie Seiten zu verstehen.
Mist, davon bin ich noch ein gutes Stück entfernt. Grmblwx...

Trotzdem Danke für die Hilfen bislang.

Gruss Heiko

Antwort 4 von Nicolas

Das Problem hatte ich auch als ich eine Bildergalerie gemacht hatte, Das Problem ist das wenn du dem img tag float:left hinzufügst dieser vom Text Umflossen wird. Mozialla ist dann der Ansicht das ein umgebendes div sich dann nichtmehr an der Höhe des Bildes orientieren sollte (finde ich nicht sonderlich sinnvoll, das umgebende div sollte wenn Höhe und Breite auf auto steht auf jeden Fall so gross sein das nix herraus ragt).

Soviel zur dem Problem, nun die lösung:


<div style="clear:both;"></div>


diese Zeile einfach direkt vor dem

</div>

der Bilder einfügen. durch das clear:both kann dise Box nicht neben dem Bild dargestellt werden und rutscht unter das Bild, dadurch wird das Umgebende div auf die richtige Grösse skaliert und alles ist gut :D

Beispiel:

     <div>
     <a href=...><img ... style="...; float:left;..." /></a>
     <p>Sie wohnen im Ha...</p>
     <div style="clear:both;"></div>
     </div>


Antwort 5 von rfb

@Nicolas u. Heiko:
habt ihr meinen Lösungsansatz übersehen??
Läuft in die gleiche Richtung wie der von Nicolas, ist aber, da nur einmalig im stylesheet nötig, wesentlich elganter (siehe A1).
@Heiko: natürlich fließt der folgende Text neben dem mit float aus dem Textfluss genommenen Element, aber eben alles, bis die Anweisung widerrufen wird.

Antwort 6 von Nicolas

@rfb, wenn ich deinen Ansatz ausführe (natürlich kann ich dies anders gemacht haben als von dir beabsichtigt) dann wird durch das "clear" der gesamte Bereich des img auf der rechten Seite reserviert, der Text rutscht also unter die Bilder, da Im ersten Beitrag steht das IE die Seite wie gewünscht darstellt habe ich sie mir auch darin angeschaut und gesehen das die Beschriftung der Bilder rechts von diesen stehen soll, dafür ist es zwingend erforderlich das der img tag ein float:left hat.

Ich verwende auch firefox (kürzlich umgestiegen von Opera) aber ich halte es für eine sehr ungünstige interpretation das Umgebende Boxen vollständig einfallen wenn in ihnen eine float:left box ist. Ich konnte in den Spezifikationen nix genaues dazu finden an welchen elementen sich die automatische Höhe einer Box ausrichten soll und an welchen nicht, ich bin jedoch der Ansicht das eine Box (solange nicht anders erzwungen) immer alle enthaltenen Elemente einschliessen sollte.

Antwort 7 von rfb

@heiko:
ich habe mal meine eine Zeile in (eine lokale Version) dein Stylesheets gepackt (ans Ende als letzte Zeile) und Opera und Firefox machen bei mir das brav genau so, wie es der IE auch ohne die Zeile macht.

Antwort 8 von Nicolas

@rfb
ok ich muss wohl irgendwie blödsin gemacht haben, jedenfalls funktioniert jetzt auch deine Variante.

aber irgendwie ist das beides ja nur ne relativ unsauber art das ganze irgendwie passend aussehn zu lassen, dieses <div> welches ja eigendlich das Bild und den Text einschliessen soll ist bei der einen Variante ja nur noch 0 hoch und bild und Text rutschen dann unter das div, kann man bei dem Rahmenlosen ja noch verwenden, sobald man aber dise äussere Box auch noch sichbar machen möchte muss man dann doch zu der hässlichen Version von mir greifen wo man eigendlich sinnlose leere elemente einfügen muss :(

Damit funktioniert dann auch der Schwarze Rahmen ganz aussen.

Antwort 9 von derpfleger

@rfb und Nicolas:

Vielen Dank für die Hilfe. Ich habe nun die Zeile am Ende des Stylesheets eingefügt, es funktioniert. Aber verstanden habe ich das Ganze immer noch nicht so richtig. Komme allerdings gerade von einem anstrengenden Dienst nach Hause und werde mich erst mal damit begnügen, dass es so funktioniert. Hoffentlich kommt die Erkenntnis noch irgendwann. Ein bischen Selfhtml- und CSS4You-Lektüre schadet sicher nicht.

Danke und Gruss
Heiko

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: