nicht angemeldet
Hilfe, margin-bottom geht nicht im IE!!
Hallo zusammen,
Habe folgenden Quelltext, in dem zwei <div>-Kästen in einem übergeordnete liegen. Der linke der beiden innere soll 'margin' zu allen Seiten haben, wie im Text ersichtlich. Nur der IE und Opera ignorieren anscheinend den margin-bottom...leicht zu sehen, daran, dass der linke Kastan von einem Rahmen in der Hintergrundfarbe des übergeordneten Kastens umgeben sein sollte...in Netscape/Mozilla kein Problem...
<html>
<head>
<title>Test</title>
<style type="text/css">
#content{
background-color:#FFCC00;
width:765px;
float:left;
}
#main{
background-color: #014901;
margin:4px;
float:left;
width:485px;
}
#right{
margin-top:5px;
margin-right:0px;
float:right;
width:150px;
}
</style>
</head>
<body>
<div id="content">
<div id="main">
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
</div>
<div id="right">
rechte seite
</div>
</div>
</body>
</html>
Kann mit jemand helfen???
(Die vielen <br>'s nur, damit sich der Kasten dehnt, wie wenn text drin waere)
Viele Dank für Hilfe !
-
Hallo zusammen,
Habe folgenden Quelltext,
Peete,
Ein Link auf die HTML-Datei wär hilfreicher gewesen.dass der linke Kastan von einem Rahmen in der Hintergrundfarbe des übergeordneten Kastens umgeben sein sollte...in Netscape/Mozilla kein Problem...
Woran's liegt, weiß ich auch grad nicht. Hab aber die Lösung.
Du willst, dass der linke Kastan (?) ;-) wovon umgeben ist? Einem Rahmen? border?
Also weg mit dem margin für #main und statt dessen:
border:solid 4px #FFCC00;Gunnar
PS. Ach so, und den DOCTYPE nicht vergessen.
--
"(Der Student) kann sich so völlig dem hingeben, was er naiv für die Computerwissenschaft hält, also der bloßen Verfeinerung seiner Programmiertechniken, daß er sich auf diese Weise effektiv daran hindert, etwas wirklich Wesentliches zu studieren."
(Joseph Weizenbaum in "Die Macht der Computer und die Ohnmacht der Vernunft")-
Ja, der border wär auch ein gute Idee, eigentlich die beste... Muss mir mein Tabellendenken erstmal abgewöhnen ;)
Frag ich mich nur, wieso es keinen Abstand macht wenn ichs doch ausdrücklich angebe...Danke dir
PS: Doctype ist drin, nur der Übersicht wegen rausgenommen.
Und nächstes Mal auch mit Link :)-
Hi,
PS: Doctype ist drin, nur der Übersicht wegen rausgenommen.
Ganz schlechte Idee. Der Doctype ist wichtig, weil die Browser anhand des Doctypes zwischen verschiedenen Darstellungsmodi (Quirks Mode, Standard Mode, ...) umschalten. Also sollte der vorhanden sein, damit man beurteilen kann, in welchem Modus sich der Browser befindet.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-
Der linke der beiden innere soll 'margin' zu allen Seiten haben, wie im Text ersichtlich. Nur der IE und Opera ignorieren anscheinend den margin-bottom...leicht zu sehen, daran, dass der linke Kastan von einem Rahmen in der Hintergrundfarbe des übergeordneten Kastens umgeben sein sollte...in Netscape/Mozilla kein Problem...
1. Beim Arbeiten mit CSS immer den Browser in den Standardmodus schalten. Dies gilt insbesondere für den IE.
2. In die Berechnung der Höhe eines Elements fließen Kindelemente mit gesetztem float nicht ein (CSS2, Abschnitt 10.6.3: "floating boxes and absolutely positioned boxes are ignored"). Insofern ist es eigentlich ein Wunder, dass der gelbe Kasten seine Höhe überhaupt an den grünen anpasst, dem Anschein nach machen hier alle drei Browser einen Layoutfehler (ich lasse mich da aber gerne eines besseren belehren).
3. Mozilla hatte in der Vergangenheit Probleme mit float. Du solltest eventuell eine aktuelle Version ausprobieren.
4. Ein float-Element, in dem weitere float-Elemente liegen. Finde ich rein dem Gefühl nach sehr gewagt.
5. Elemente lassen sich nicht nur mit float links und rechts positionieren, sondern auch durch Setzen von left respektive right.
Gruß,
soenk.e-
Hi,
- In die Berechnung der Höhe eines Elements fließen Kindelemente mit gesetztem float nicht ein (CSS2, Abschnitt 10.6.3: "floating boxes and absolutely positioned boxes are ignored"). Insofern ist es eigentlich ein Wunder, dass der gelbe Kasten seine Höhe überhaupt an den grünen anpasst, dem Anschein nach machen hier alle drei Browser einen Layoutfehler (ich lasse mich da aber gerne eines besseren belehren).
aber gern: http://www.w3.org/TR/CSS21/visudet.html#root-height: "[...] floats inside absolutely positioned descendants or other floats are not."
(Ist zwar ein ganz leicht anderer Kontext, stimmt aber zufällig als Ergänzung zu obigem Satz :-)
- Ein float-Element, in dem weitere float-Elemente liegen. Finde ich rein dem Gefühl nach sehr gewagt.
Im Gegenteil, das macht absolut Sinn.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
- In die Berechnung der Höhe eines Elements fließen Kindelemente mit gesetztem float nicht ein (CSS2, Abschnitt 10.6.3: "floating boxes and absolutely positioned boxes are ignored"). Insofern ist es eigentlich ein Wunder, dass der gelbe Kasten seine Höhe überhaupt an den grünen anpasst, dem Anschein nach machen hier alle drei Browser einen Layoutfehler (ich lasse mich da aber gerne eines besseren belehren).
aber gern: http://www.w3.org/TR/CSS21/visudet.html#root-height: "[...] floats inside absolutely positioned descendants or other floats are not."
Egal, ob nun theoretisch überhaupt zulässig ist oder nicht, was wäre denn die 'feine' Art so einen Rand zu zaubern...? :)
-
- In die Berechnung der Höhe eines Elements fließen Kindelemente mit gesetztem float nicht ein (CSS2, Abschnitt 10.6.3: "floating boxes and absolutely positioned boxes are ignored").
aber gern: http://www.w3.org/TR/CSS21/visudet.html#root-height: "[...] floats inside absolutely positioned descendants or other floats are not."
(Ist zwar ein ganz leicht anderer Kontext, stimmt aber zufällig als Ergänzung zu obigem Satz :-)
Nicht zufällig, es stimmt exakt. Abschnitt 10.6 wurde geändert, in meiner (alten) Version heißt es unter 10.6.3 "Block-level, non-replaced elements in normal flow, and floating, non-replaced elements", im neuen 10.6.3 hingegen "Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'" - das "floating" ist also rausgefallen. Stattdessen sind jetzt 10.6.6 und der von Dir zitierte 10.6.7 hinzugekommen, unter anderem speziell für float-Elemente.
Kurzum: Mein Zitat ist irrelevant.Das richtige Verhalten ist nach 10.6.6 und 10.6.7 wie von Peetes Mozilla ausgeführt, d.h. der margin-Bereich des inneren, grünen <div>s erweitert die Höhe des äußeren, orangen <div>s, so dass sich ein oranger Rahmen rundum um das grüne <div> bildet.
Der IE und diesmal auch Opera machen es falsch.- Ein float-Element, in dem weitere float-Elemente liegen. Finde ich rein dem Gefühl nach sehr gewagt.
Im Gegenteil, das macht absolut Sinn.
Habe ja nicht gesagt, dass es keinen Sinn macht. Ich finde es nur irgendwie gewagt :)
Gruß,
soenk.e
-
- Elemente lassen sich nicht nur mit float links und rechts positionieren, sondern auch durch Setzen von left respektive right.
Danke für die Tipps ! Was meinst du hier mit
left bzw. right, ich meine als Attribut von was kann ich das einsetzten zum positionieren?-
- Elemente lassen sich nicht nur mit float links und rechts positionieren, sondern auch durch Setzen von left respektive right.
Danke für die Tipps ! Was meinst du hier mit
left bzw. right, ich meine als Attribut von was kann ich das einsetzten zum positionieren?Als Attribute der inneren beiden <div>s. Obwohl ich mir im Moment gar nicht so sicher bin, ob Dir das weiter hilft, da left und right nur funktionieren, wenn position auf absolute (oder relative) gesetzt ist - dies wiederum erlaubt aber nicht, dass Dein äußeres <div> seine Höhe an die inneren anpasst.
Es scheint, dass Du mit den Browserfehlern leben oder Deine Layoutidee abändern musst.
Gruß,
soenk.e-
Hi,
Als Attribute der inneren beiden <div>s. Obwohl ich mir im Moment gar nicht so sicher bin, ob Dir das weiter hilft, da left und right nur funktionieren, wenn position auf absolute (oder relative) gesetzt ist - dies wiederum erlaubt aber nicht, dass Dein äußeres <div> seine Höhe an die inneren anpasst.
Bei relative sollte die Höhe schon angepaßt werden.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Als Attribute der inneren beiden <div>s. Obwohl ich mir im Moment gar nicht so sicher bin, ob Dir das weiter hilft, da left und right nur funktionieren, wenn position auf absolute (oder relative) gesetzt ist - dies wiederum erlaubt aber nicht, dass Dein äußeres <div> seine Höhe an die inneren anpasst.
Bei relative sollte die Höhe schon angepaßt werden.
Schon, nur bekommt er damit nicht das rechte <div> in die rechte Hälfte ohne unter dem linken <div> den leeren Platz des rechten <div>s zu haben. Ohne float und mit position:relative folgen die beiden inneren <div>s ganz normal aufeinander, nur dass das :relative-Element anschließend verschoben wird und an der ursprünglichen Stelle ein Loch hinterlässt.
Und obendrein weiß er ja nicht, um wieviel er das rechte <div> nach oben schieben muss - top ist bei position:relative relativ zur normalen Position des jeweiligen Elements, nicht wie bei :absolute zur Position des übergeordneten.Was doch noch funktionieren könnte: Sofern in das äußere <div> nicht noch andere Sachen rein sollen, ist ein float bei den beiden inneren Elementen überflüssig, sinnigerweise beim linken, weil dort momentan das Problem auftaucht.
Noch 'ne Variante, klang hier schon von jemand anderem an: Beiden inneren Elementen statt eines Außenabstands einen orangen Rahmen verpassen.
Gruß,
soenk.e
-
-