Supportnet / Forum / Webseiten/HTML
Firefox/Opera: wo ist der Rahmen des äusseren div?
Frage
Hallo Leute
auf [url] http://www.hblachut.de/corfu-nikos-2/index.htm [/url] sollte eigentlich um das äusserste div (zentriert, 760px breit) ein 1px breiter schwarzer Rahmen sein. Firefox 1.0 und Opera 5.02 stellen diesen aber nicht dar, der IE 5.5 macht es so, wie ich es auch wollte.
@rfb: du hast in einem anderen [url=https://supportnet.de/threads/1024695] Thread in Antwort 1[/url] folgende Erklärung dafür vermutet:
[quote]
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.
[/quote]
Auf den Unterseiten (z.B. [url=http://www.hblachut.de/corfu-nikos-2/zimmer/zimmer.htm] Zimmer [/url])ist ja noch kein content eingefügt, dort lässt sich das Problem am schnellsten nachvollziehen.
Dort habe ich mal folgende Variationen durchgeführt:
- den Titel-div entfernt
- den content-div entfernt
- den Menu-div entfernt
um evtl. Verschachtelungsprobleme zu entdecken. Allerdings zeigen sowohl Firefox als auch Opera den äussersten Rahmen nie an.
Woran kann das liegen?
Irgendwie war mir so, als ob das im Firefox schon funktioniert hätte, ich weiss nur leider nicht mehr, ab welchem Arbeitsschritt das ganze ausgefallen ist.
Das Stylesheet habe ich der Einfachheit halber mal auf die [url=http://www.hblachut.de/corfu-nikos-2/kontakt/kontakt.htm]Kontakt-Unterseite[/url] gelegt, er kann aber auch unter [url]http://www.hblachut.de/corfu-nikos-2/format.css[/url] abgerufen werden.
Na hoffentlich hat da jemand eine Idee. Das ist doch wirklich verzwickt mit diesen Kleinigkeiten, da probiert man stundenlang und kommt einfach nicht auf die Lösung.
Danke für jede Hilfe.
Gruss Heiko
Antwort 1 von Nicolas
Die Lösung hab ich doch schon in dem anderen Beitrag erwähnt (Antwort 8).
einfach eine Zeile einfügen:
der Rahmen wird ja angezeigt, aber die Box ist halt nur 1px hoch, da sie von den ganzen float:left elementen im inneren nicht aufgespannt wird.
Durch das nicht-float element wird die box aufgespannt und das clear sorgt dafür das diese nicht-float box auch unter den content rutscht
einfach eine Zeile einfügen:
<div style="clear:both;"></div>
</div> <!-- Ende divaussen -->
der Rahmen wird ja angezeigt, aber die Box ist halt nur 1px hoch, da sie von den ganzen float:left elementen im inneren nicht aufgespannt wird.
Durch das nicht-float element wird die box aufgespannt und das clear sorgt dafür das diese nicht-float box auch unter den content rutscht
Antwort 2 von derpfleger
@ Nicolas:
Sorry, das habe ich übersehen. Funktioniert so wie du es beschrieben hast.
Ich hatte mich gedanklich in dem anderen Thread so auf das "Text-rutscht-neben-die-Bilder-Problem" konzentriert, dass ich deine Erklärung zum Äusseren Rahmen überlesen hatte.
Ich muss dir aber zustimmen: es ist schon ärgerlich, dass man den Browser mit einem inhaltsleeren div überlisten muss.
Mal ne Zusatzfrage:
wo hätte ich denn das nachlesen können? Selfhtml ist ja sehr gut, aber dort bin ich nicht auf so eine Lösung gestossen, bzw. wurde dieses Problem so nicht beschrieben. CSS4You ist mir in seinen Erklärungen oft zu knapp gehalten, so konnte ich mit der float/clear-Erklärung so wenig anfangen, dass es überhaupt erst zu der Verwirrung bei mir gekommen ist.
Kennst du (oder irgendwer sonst) vielleicht noch eine dritte (und vierte,fünfte...) Referenz-Adresse zu CSS-Fragen?
Es ist ja toll, dass ich hier auf dem Supportnet so schnelle und kompetente Hilfe bekomme, aber es sollte nicht der Eindruck entstehen, ich drücke mich nur vor dem selbst erarbeiten (du kannst mir glauben diese Postings von mir sind alle erst nach zig Stunden fruchtlosen herumprobierens gekommen).
Vielen Dank nochmal und Gruss
Heiko
Sorry, das habe ich übersehen. Funktioniert so wie du es beschrieben hast.
Ich hatte mich gedanklich in dem anderen Thread so auf das "Text-rutscht-neben-die-Bilder-Problem" konzentriert, dass ich deine Erklärung zum Äusseren Rahmen überlesen hatte.
Ich muss dir aber zustimmen: es ist schon ärgerlich, dass man den Browser mit einem inhaltsleeren div überlisten muss.
Mal ne Zusatzfrage:
wo hätte ich denn das nachlesen können? Selfhtml ist ja sehr gut, aber dort bin ich nicht auf so eine Lösung gestossen, bzw. wurde dieses Problem so nicht beschrieben. CSS4You ist mir in seinen Erklärungen oft zu knapp gehalten, so konnte ich mit der float/clear-Erklärung so wenig anfangen, dass es überhaupt erst zu der Verwirrung bei mir gekommen ist.
Kennst du (oder irgendwer sonst) vielleicht noch eine dritte (und vierte,fünfte...) Referenz-Adresse zu CSS-Fragen?
Es ist ja toll, dass ich hier auf dem Supportnet so schnelle und kompetente Hilfe bekomme, aber es sollte nicht der Eindruck entstehen, ich drücke mich nur vor dem selbst erarbeiten (du kannst mir glauben diese Postings von mir sind alle erst nach zig Stunden fruchtlosen herumprobierens gekommen).
Vielen Dank nochmal und Gruss
Heiko
Antwort 3 von Nicolas
ich hatte halt ein ähnliches Problem (eine Fusszeile rutschte immer in den Text rein anstatt unter dem content zu bleiben)
mein Lösungsweg ist halt in solchen Fällen fast immer, dass möglichst viel aus der Seite rausnehme um den Kern des Problems zu finden. Das endet dann normal mit einer leeren seite die nur einige farbige rahmen enthält. Dann mit etwas nachdenken und der Spezifikation findet man dann oft relativ schnell eine Lösung.
In diesem Fall ist das http://www.w3.org/TR/CSS1
und dort
4.1.4 Floating elements
"outside the normal flow of elements" habe ich dann so verstanden das es gewollt ist, das diese Elemente sich in keinster weise auf das umfassende div ausworken sollen, weil es ja heraus gelöst wird.
Daraus folgt schonmal das man das Problem nicht im umgebenden oder dem betroffenem div lösen kann sondern ein weiteres nicht rausgelöstes element braucht andem sich der "auto" wert der umgebenden div Box orientieren kann, das clear:both ist dann halt durch die Überlegung entstanden das dieses Element nicht neben dem float:left element positioniert werden soll.
mein Lösungsweg ist halt in solchen Fällen fast immer, dass möglichst viel aus der Seite rausnehme um den Kern des Problems zu finden. Das endet dann normal mit einer leeren seite die nur einige farbige rahmen enthält. Dann mit etwas nachdenken und der Spezifikation findet man dann oft relativ schnell eine Lösung.
In diesem Fall ist das http://www.w3.org/TR/CSS1
und dort
4.1.4 Floating elements
"outside the normal flow of elements" habe ich dann so verstanden das es gewollt ist, das diese Elemente sich in keinster weise auf das umfassende div ausworken sollen, weil es ja heraus gelöst wird.
Daraus folgt schonmal das man das Problem nicht im umgebenden oder dem betroffenem div lösen kann sondern ein weiteres nicht rausgelöstes element braucht andem sich der "auto" wert der umgebenden div Box orientieren kann, das clear:both ist dann halt durch die Überlegung entstanden das dieses Element nicht neben dem float:left element positioniert werden soll.