nicht angemeldet
float: left|right nur im Netscape 7 und Opera 6 richtig?
0 0 0 0
0
0 0 Zusatzfrage: Welche(r) Browser ist denn nun 'standardkonform' ?
0 0 Nachtrag
float: left|right nur im Netscape 7 und Opera 6 richtig?
Hallo zusammen!
Dem 'Trend' zum CSS-Layout folgend, tüfftel ich gerade an verschiedenen Ansätzen herum. Dabei bin ich u.a. auf folgendes Problem gestoßen, wozu ich im Archiv keine hinreichende Antwort gefunden habe (wohl einige Beiträge zu Teilproblemen).
Doch hier zunächst einmal der Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>float-problem</title>
<style type="text/css">
<!--
html,body {height: 100%; width: 100%; margin: 0px; padding: 0px; background-color: #fff; color: #000;}
#div1 {width: 25%; background-color: #ccc; color: #000; margin: 0px; padding: 0px; float: left;}
#div2 {width: 75%; height: 300px; background-color: #999; color: #000; margin: 0px; padding: 0px;}
-->
</style>
</head>
<body>
<div id="div1">
Innerhalb von DIV-1
</div>
<div id="div2" style="">
Außerhalb von DIV-1,<br>
dafür aber innerhalb von DIV-2
</div>
</body>
</html>
Ich habe extra mal die ganze Datei gepostet, damit auch ersichtlich wird, dass der MSIE 6 in den Standard-compliant Mode geschaltet wird (dazu gleich noch etwas).
Getestet habe ich die Datei mit folgenden Browsern auf einem Windows-System:
- MSIE 6 SP1
- NS 7.0 rv 1.0.1 de
- Opera 6.04 B 1135
- Opera 7.02 B 2668
Die angezeigten Ergebnisse erstaunen mich ein wenig. Beim MSIE 6 gibt es 2 verschiedene Varianten. Im Standard-compliant Mode (also mit obigem Code) liefert er als Anzeige beide DIV's untereinander am linken Fensterrand. Ohne in den Standard-compliant Mode umzuschalten, zeigt er DIV 2 zwar neben DIV 1 am oberen Rand an, aber dafür mit einer 'Lücke' zwischen den DIV's (gibt's im Archiv schon mal, aber IMHO ohne ausreichende Antwort), und DIV 2 hat nur noch eine Breite von ca. 50%.
Opera 7 zeigt beide DIV's in der vorgegebenen Größe nebeneinander am oberen Fensterrand an (wobei 25% plus 75% auch nicht gleich 100% zu sein scheint -> Rundungsfehler?).
Nur Opera 6 und Netscape 7 zeigen es IMHO richtig an.
Habe ich etwas falsch gemacht, falsch verstanden, oder ist es einfach ein Browser-Problem?
Es wäre auch nett, wenn mir jemand bitte sagen könnte, wie es auf anderen Plattformen und/oder in anderen Browsern angezeigt wird.
Vielen Dank für euer Feedback -
Gruß Gunther
-
Hallo Gunther,
html,body {height: 100%; width: 100%; margin: 0px; padding: 0px; background-color: #fff; color: #000;}
#div1 {width: 25%; background-color: #ccc; color: #000; margin: 0px; padding: 0px; float: left;}
#div2 {width: 75%; height: 300px; background-color: #999; color: #000; margin: 0px; padding: 0px;}Hier ist alles richtig, so wie ich sehe.
<div id="div1">
Innerhalb von DIV-1
</div>
<div id="div2" style="">
Außerhalb von DIV-1,<br>
dafür aber innerhalb von DIV-2
</div>Hier ist etwas falsch, du solltest die divs verschachteln, damit sie richtig floaten, denn so werden sie untereinander dargestellt.
Wenn du jedoch
<div id="div1">
Innerhalb von DIV-1
<div id="div2" style="">
Innerhalb von DIV-1,<br>
dafür aber auch innerhalb von DIV-2. Ich floate in div-1 herum.
</div>
</div>
schreibst, so funktioniert dein Floating.Fabian
-
moin,
html,body {height: 100%; width: 100%; margin: 0px; padding: 0px; background-color: #fff; color: #000;}
#div1 {width: 25%; background-color: #ccc; color: #000; margin: 0px; padding: 0px; float: left;}
#div2 {width: 75%; height: 300px; background-color: #999; color: #000; margin: 0px; padding: 0px;}
Hier ist alles richtig, so wie ich sehe.vielleicht nicht ganz:
1. wozu height: 100%;?
2. würde ich für div1 und div2 weniger als 100% (also 25%+75%) in der breite nehmen (rundungsfehler, scrollleisten, etc...)
<div id="div1">
Innerhalb von DIV-1
</div>
<div id="div2" style="">
Außerhalb von DIV-1,<br>
dafür aber innerhalb von DIV-2
</div>
Hier ist etwas falsch, du solltest die divs verschachteln, damit sie richtig floaten, denn so werden sie untereinander dargestellt.floating heisst ja aber, dass div2 um div1 fließt und nicht innerhalb. es sollte also auch ohne dieses workaround funktionieren.
füge spassenshalber beim 2. div auch noch ein float:left an.
FaB
-
Hi Franka,
vielleicht nicht ganz:
- wozu height: 100%;?
Um den _Anzeigebereich_ exakt 100% hoch zu machen, was er sonst _nicht_ wäre?
- würde ich für div1 und div2 weniger als 100% (also 25%+75%) in der breite nehmen (rundungsfehler, scrollleisten, etc...)
Warum? Benutzt du minderwertige CSS-Interpreter?
floating heisst ja aber, dass div2 um div1 fließt und nicht innerhalb. es sollte also auch ohne dieses workaround funktionieren.
Nein, in meiner Interpretation ist es umgekehrt. Wenn div1 _in_ div2 liegt kann es natürlich floaten, wie es möchte, wenn du es lässt.
Fabian
-
- wozu height: 100%;?
Um den _Anzeigebereich_ exakt 100% hoch zu machen, was er sonst _nicht_ wäre?
dann lies nochmal genau: body {height: 100% ...} ein body kann nur 100% sein, oder was soll darunter kommen? die angabe hat (hier) keine auswirkung auf die darstellung der seite.
- würde ich für div1 und div2 weniger als 100% (also 25%+75%) in der breite nehmen (rundungsfehler, scrollleisten, etc...)
Warum? Benutzt du minderwertige CSS-Interpreter?
wieso ich, die seite ist doch sicher für mehr menschen als nur für mich gemacht. nicht alle browser addieren hier 25% und 75% zu 100%, es könnte auch 101% werden (rundungsfehler). manche browser rechnen ihre scrollleisten nicht mit in die 100% ein und dann wirds auch mehr.
floating heisst ja aber, dass div2 um div1 fließt und nicht innerhalb. es sollte also auch ohne dieses workaround funktionieren.
Nein, in meiner Interpretation ist es umgekehrt. Wenn div1 _in_ div2 liegt kann es natürlich floaten, wie es möchte, wenn du es lässt.siehe selfhtml: Mit float: können Sie bestimmen, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen.
also nachfolgend!
FaB
-
Hi Franka,
- wozu height: 100%;?
Um den _Anzeigebereich_ exakt 100% hoch zu machen, was er sonst _nicht_ wäre?
dann lies nochmal genau: body {height: 100% ...} ein body kann nur 100% sein, oder was soll darunter kommen? die angabe hat (hier) keine auswirkung auf die darstellung der seite.
Das ist nicht ganz richtig. Der body muß nicht gleich 100% sein. Er kann seine Höhe auch von seinem Inhalt erhalten. Heutzutage bezieht sich der 'canvas' auf das html-Element. Ändere mal die Style-Anweisungen in:
html {width: 100%; margin: 0px; padding: 0px; background-color: #000; color: #000;}
body {width: 100%; margin: 0px; padding: 0px; background-color: #fff; color: #000;}und du wirst den Unterschied sehen.
Gruß Gunther
-
... die angabe hat (hier) keine auswirkung auf die darstellung der seite.
Das ist nicht ganz richtig. Der body muß nicht gleich 100% sein. Er kann seine Höhe auch von seinem Inhalt erhalten. Heutzutage bezieht sich der 'canvas' auf das html-Element. Ändere mal die Style-Anweisungen in:
html {width: 100%; margin: 0px; padding: 0px; background-color: #000; color: #000;}
body {width: 100%; margin: 0px; padding: 0px; background-color: #fff; color: #000;}und du wirst den Unterschied sehen.
wenn Du hier (wie ich oben in klammern geschrieben habe) die höhenangabe wegläßt, passiert überhaupt nix anderes als mit höhenangabe.
Dein 2. beispiel ist ja etwas abgewandelt, dort hat aber height:100% ebenfalls keinerlei auswirkung.FaB
-
Hi Franka,
wenn Du hier (wie ich oben in klammern geschrieben habe) die höhenangabe wegläßt, passiert überhaupt nix anderes als mit höhenangabe.
Dein 2. beispiel ist ja etwas abgewandelt, dort hat aber height:100% ebenfalls keinerlei auswirkung.lass' mich raten..., du benutzt einen MSIE <= 5.5! Stimmt's?
Im MSIE 6, NS 7, OP 6/7 würdest du einen Unterschied sehen ;-)Gruß Gunther
-
lass' mich raten..., du benutzt einen MSIE <= 5.5! Stimmt's?
Im MSIE 6, NS 7, OP 6/7 würdest du einen Unterschied sehen ;-)auf die schnelle getestet mit:
msie 6, opera 7, ns 4, phoenixvielleicht reden wir ja von verschiedenen dingen.
bei mir gibts jedenfalls keinen unterschied, ob ich height:100% drin hab oder nicht.
natürlich (leider) sieht es in jedem browser etwas anders aus.FaB
-
-
- wozu height: 100%;?
- wozu height: 100%;?
-
Hallo Franka,
vielleicht nicht ganz:
- wozu height: 100%;?
weil einige Browser sonst Probleme mit height:100% bei Elementen innerhalb des roots haben
- würde ich für div1 und div2 weniger als 100% (also 25%+75%) in der breite nehmen (rundungsfehler, scrollleisten, etc...)
warum? AFAIK zeigt z.B. kein Browser, außer dem MSIE, bei diesen Angaben Scrollleisten an. Sorry, ich hätte das aber etwas präzisieren sollen, da dieses 'Problem' nur im OP 7 auftaucht.
füge spassenshalber beim 2. div auch noch ein float:left an.
das vereinheitlicht zwar die Anzeige in allen von mir genannten Browsern (DIV 2 neben DIV 1 am oberen Fensterrand mit den angegebenen Größen), ist aber nicht das gewünschte Ergebnis, denn es soll ja DIV 2 um DIV 1 herum floaten, und nicht nachfolgende Elemente (die es in meinem Beisiel ja auch nicht gibt) um DIV 2. Oder anders formuliert: Dadurch erhält DIV 1 automatisch dieselbe Höhe wie DIV 2, was ja nicht gewollt ist.
Gruß Gunther
-
Hi Gunther,
das vereinheitlicht zwar die Anzeige in allen von mir genannten Browsern (DIV 2 neben DIV 1 am oberen Fensterrand mit den angegebenen Größen), ist aber nicht das gewünschte Ergebnis, denn es soll ja DIV 2 um DIV 1 herum floaten, und nicht nachfolgende Elemente (die es in meinem Beisiel ja auch nicht gibt) um DIV 2. Oder anders formuliert: Dadurch erhält DIV 1 automatisch dieselbe Höhe wie DIV 2, was ja nicht gewollt ist.
ich habe jetzt etwas gebastelt, schau mal ob das deine Idee ist:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Fliessende Divs</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15" />
<style type="text/css">
html,body {height: 100%; width: 100%; margin: 0px; padding: 0px; background-color: #fff; color: #000;}
#div1 {width: 25%; background-color: #ccc; color: #000; margin: 0px; padding: 0px; float:left;}
#div2 {width: 75%; height: 300px; background-color: #999; color: #000; margin: 0px; padding: 0px; display:inline;}
</style>
</head>
<body>
<div id="div1">
Innerhalb von DIV-1
</div>
<div id="div2" style="">
Außerhalb von DIV-1,<br>
dafür aber innerhalb von DIV-2
</div>
</body>Fabian
-
Hallo, Fabian,
Nebenbei...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
(...)
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15" />Es gibt keine Spezifikation, die eine Verknüpfung von XHTML 1.1-Dokumenten mit dem Medientyp text/html vorsieht.
http://lists.w3.org/Archives/Public/www-html/2003Mar/0050.html ff.
http://www.w3.org/TR/xhtml-media-types/Übrigens, bitte mache zwischen zitierten und kommentierenden Text eine Leerzeile Abstand, das erleichtert das Lesen deiner Postings ungemein.
Grüße,
Mathias-
Hi, molily,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
(...)
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15" />Dieser Link sagt u.a. aber Folgendes:
"[XHTML1] defines a profile of use of XHTML which is compatible with HTML 4.01 and which may also be labeled as text/html."
Wo ist also dein Problem? Des Weiteren sehen der Validator und alle von mir getesteten Bentuzerageneten keine Probleme damit.
Übrigens, bitte mache zwischen zitierten und kommentierenden Text eine Leerzeile Abstand, das erleichtert das Lesen deiner Postings ungemein.
Hmm? Mir war, als täte die Forumssoftware das automatisch. *grübel*
Ich _habe_ dort sehr oft eine Leerzeile, die ich nicht selbst einfügen muss. Kann aber auch an meinem CSS liegen... ich schaue aber mal nach ;-)Fabian
-
Hallo Fabian,
"[XHTML1] [...]"
XHTML1 bezieht sich auf XHTML 1.0, XHTML11 bezieht sich auf XHTML 1.1.
Wo ist also dein Problem?
In der Tabelle weiter unten auf der Seite steht ein klares "SHOULD NOT". (zwar kein "MUST NOT", aber immerhin ein "SHOULD NOT", d.h. man sollte es nur dann so machen, wenn es wirklich _sehr_ gute Gründe dafür gibt)
Kann aber auch an meinem CSS liegen...
Tut es. Bei mir ist auch kein Abstand vorhanden.
Viele Grüße,
Christian--
Hast Du einen Beitrag? Nur her damit!
http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm
SELF-Code: (http://emmanuel.dammerer.at/selfcode.html)
sh:) fo:) ch:] rl:( br:> n4:& ie:% mo:) va:) de:] zu:) fl:( js:| ss:) ls:[ -
Hallo,
Dieser Link sagt u.a. aber Folgendes:
"[XHTML1] defines a profile of use of XHTML which is compatible with HTML 4.01 and which may also be labeled as text/html."
Ja, der XHTML 1.0-Standard sieht vor, dass XHTML 1.0-Dokumente gemäß den Kompatibilitätsrichtlinien (http://www.w3.org/TR/xhtml1/#guidelines) als text/html ausgeliefert werden können. Ein paar Sätze weiter: »The use of 'text/html' for XHTML SHOULD be limited for the purpose of rendering on existing HTML user agents, and SHOULD be limited to [XHTML1] documents which follow the HTML Compatibility Guidelines.« Für XHTML 1.1 ist dies nicht vorgesehen; »'application/xhtml+xml' SHOULD be used for serving XHTML documents to XHTML user agents.«
Wo ist also dein Problem?
Sagte ich doch:
Es gibt keine Spezifikation, die eine Verknüpfung von XHTML 1.1-Dokumenten mit dem Medientyp text/html vorsieht.
Siehe auch http://lists.w3.org/Archives/Public/www-html/2003Mar/0054.html, erster Absatz: »The Internet and WWW are based on RFCs and Recommendations. If you don't follow all (currently valid) of them, why follow them at all?
The MIME Type text/html is for SGML based HTML. XHTML 1.0 is an exception for that rule. This exception is made only to enable a smoother transition from old SGML based HTML / tag soup HTML to well-formed XML based valid XHTML.«Des Weiteren sehen der Validator
Siehe Link, der Validator überprüft nicht, ob Dokumenttyp und den Medientyp zusammenpassen.
und alle von mir getesteten Bentuzerageneten keine Probleme damit.
Ja, weil sie XHTML 1.1 als text/html genauso als Tag Soup parsen wie HTML 2.0 oder HTML 4.01 Transitional, sie kennen XHTML 1.1 nicht, sie interessieren sich nicht für die Dokumenttyp-Deklaration, die Namespace-Angabe und andere XML-Parseranweisungen et cetera. Das geht folglich eher als Fehlertoleranz durch (wie bei manchen Browsern bei HTML als text/plain), weil wie ich sagte kein Standard existiert, der aussagt, dass XHTML 1.1 als text/html gesendet werden kann. XHTML 1.0 erlaubt es, HTML-kompatibel zu sein, XHTML 1.1 kann dies per se nicht, weil beispielsweise die Attribute name- und lang an den relevanten Stellen fehlen, folglich ist es nicht möglich, dass ein HTML-Benutzeragent ein XHTML 1.1-Dokument problemlos verarbeiten kann, weshalb einzig und allein sinnig ist, HTML 4.01 als text/html oder XHTML 1.0 als text/html unter Beachtung der Kompatibilitätsrichtlinien zu verwenden. Im Übrigen basiert die Kompatibilität von XHTML zu HTML nur darauf, dass HTML-Browser in der Regel nicht alle SGML-Features von HTML unterstützen, siehe </archiv/2002/12/32305/#m175242>.
Übrigens, bitte mache zwischen zitierten und kommentierenden Text eine Leerzeile Abstand, das erleichtert das Lesen deiner Postings ungemein.
Hmm? Mir war, als täte die Forumssoftware das automatisch. *grübel*
Nein. Ich könnte natürlich mein Benutzerstylesheet anpassen, aber dann würde ich bei allen anderen, die standardmäßig diese Leerzeilen einfügen, zu große Abstände sehen.
Ich _habe_ dort sehr oft eine Leerzeile, die ich nicht selbst einfügen muss.
Schau dir die öffentliche Ansicht an. Ich verstehe aber nicht, welche Relevanz das haben sollte, die Leerzeilen, die ich meine, können nur im Eingabefeld beim Verfassen des Postings eingefügt werden.
Grüße,
Mathias
-
-
-
-
-
Hallo Fabian,
Wenn du jedoch
<div id="div1">
Innerhalb von DIV-1
<div id="div2" style="">
Innerhalb von DIV-1,<br>
dafür aber auch innerhalb von DIV-2. Ich floate in div-1 herum.
</div>
</div>
schreibst, so funktioniert dein Floating.Fabian
das ist aber nicht das, was beabsichtigt ist. Und ich habe die Angabe " 'float' - Applies to: all but positioned elements and generated content" vom W3C (siehe http://www.w3.org/TR/REC-CSS2/visuren.html#floats unter Punkt 9.5.1) so verstanden, dass also auch 2 Blockelemente einander 'umfliessen' können (eben genau so wie bspw. im NS7).
Gruß Gunther
-
Hi Gunther,
das ist aber nicht das, was beabsichtigt ist. Und ich habe die Angabe " 'float' - Applies to: all but positioned elements and generated content" vom W3C (siehe http://www.w3.org/TR/REC-CSS2/visuren.html#floats unter Punkt 9.5.1) so verstanden, dass also auch 2 Blockelemente einander 'umfliessen' können (eben genau so wie bspw. im NS7).
Ja, das stimmt - aber die "zu umfliessenden" Blockelemente _müssen_ innerhalb der umfliessenden sein. Siehe das Beispiel (gut, ist ein Bild, aber das lässt sich ja übertragen.)
Fabian
-
-
-
Hallo,
#div1 {width: 25%; background-color: #ccc; color: #000; margin: 0px; padding: 0px; float: left;}
#div2 {width: 75%; height: 300px; background-color: #999; color: #000; margin: 0px; padding: 0px;}alos ich mache es meistens so:
#div1 {width: 25%;float: left;}
#div2 {margin-left:25%;}der <div> an sich hat ja normal 100% breite, so breit wie platz ist, ich gebe dem linken <div> keine breite sondern nur ein margin nach links so kann er sich frei entfalten und braucht nicht zu umbrechen, dass funktioniert auch in älteren browsern gut.
Gruss, Jan aus Dresden
-
Hallo nochmal,
ich gebe dem linken <div> keine breite
ich meine natürlich den rechten welcher keine breite bekommt
Gruss, Jan aus Dresden
-
Hallo Jan,
dein Vorschlag löst das Problem aber auch nicht, denn mal davon ausgegangen, dass DIV 1 eine geringere Höhe als DIV 2 hat, soll DIV 2 ja den 'freien' Platz unter DIV 1 ausfüllen (z.B. mit dem für DIV 2 angegebenen Background-Image). Das ist bei deiner Variante (leider) nicht der Fall.
Sonst ist sie sicher ganz praktikabel... ;-)
Gruß Gunther
-
-
-
Hallo nochmal!
Vielen Dank zunächst einmal an alle, die sich bisher schon mit dem Problem beschäftigt haben.
Ich habe da noch eine Zusatzfrage:
Da der Code ansich ja valide ist - welche(r) Browser zeigt es denn nun eigentlich 'standardkonform' an? *etwasverwirrtsein*Gruß Gunther
-
Tag auch
Mozilla zeigt es standardkonform an, Opera 6 auch, Opera 7 dagegen nicht.
Thomas J.
-
Ich nochmal
Mozilla zeigt es standardkonform an, Opera 6 auch, Opera 7 dagegen nicht.
Um für diese drei eine einheitlich Darstellung zu erreichen, tut's z.B.:
<style type="text/css">
<!--
html, body {margin:0; padding:0;}
#divlinks {width:30%;float:left; background:white}
#divrechts {width:100%; height:300px; background:green;}
-->
</style>
</head>
<body>
<div id="divrechts">
<div id="divlinks">
Das steht links oben.
</div>
Und dieser Text<br>
umfließt die weiße Box.
</div>Thomas J.
-
Ich auch nochmal,
Mozilla zeigt es standardkonform an, Opera 6 auch, Opera 7 dagegen nicht.
Um für diese drei eine einheitlich Darstellung zu erreichen, tut's z.B.:
<style type="text/css">
<!--
html, body {margin:0; padding:0;}
#divlinks {width:30%;float:left; background:white}
#divrechts {width:100%; height:300px; background:green;}
-->
</style>
</head>
<body>
<div id="divrechts">
<div id="divlinks">
Das steht links oben.
</div>
Und dieser Text<br>
umfließt die weiße Box.
</div>ja danke dir Thomas! Das funktioniert auch mit dem MSIE 6.
Also funktioniert 'float' nur dann, wenn die Elemente ineinander verschachtelt sind?
Müsste denn nicht laut W3C Standard die andere (meine ursprüngliche) Variante auch funktionieren, oder ist sie in sich falsch?Gruß Gunther
-
Moin
Also funktioniert 'float' nur dann, wenn die Elemente ineinander verschachtelt sind?
Theoretisch Nein, theopraktisch Ja.
Müsste denn nicht laut W3C Standard die andere (meine ursprüngliche) Variante auch funktionieren, oder ist sie in sich falsch?
Deine ursprüngliche Variante war auch richtig. In Mozilla und Opera 6 wird sie ja auch richtig dargestellt.
Normalerweise dürfte es zwischen Deiner Variante und meiner Verschachtelung (bis auf die Breitenangaben) keinen Unterschied geben.
Das steht auch so in der CSS2-Spezifikation, aus der Du ja vorhin schon zitiert hast (Punkt 9.5/3. Absatz):
"Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for the floated box."Thomas J.
-
-
-
-