nicht angemeldet
Problem mit overflow:auto
0 0 0 0 0 0 0 Nachtrag
0
0
0
Problem mit overflow:auto
ich habe einen fix und fertige Code den ihr bequem per Copy&Paste austesten könnt.
Situation:
Das ganze soll später mal so ein Pull-Down Menü werden. Die div#box wäre dann das Menü-Teil welches nach unten ausklappt.
Das Problem:
Wenn ihr den Code mal ausführt werdet ihr sehen, dass der div#content die grüne div#box verdeckt. Das soll natürlich nicht sein.
Kurz: div#box soll nicht von div#content verdeckt werden, sondern umgekehrt! Die div#box gehört ganz nach oben!
Schuld am ganzen ist overflow:auto auf das ich aber leider nicht verzichten kann. z-index scheint ebenfalls nicht zu klappen.
Hier mal der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body {
background-color:red;
}
div#menuleiste {
background-color:white;
overflow:auto;
}
div#box {
background-color:green;
position:absolute;
top:1em;
height:5em;
}
div#content {
overflow:auto;
}
</style>
</head>
<body>
<div id="menuleiste">Dies ist ein Menue mit <div id="box">Ueberhang</div></div>
<div id="content">Dieser Text soll von #box verdeckt werden!</div>
</body>
</html>
-
.... oder kennt jemand vielleicht ein forum wo css-profis sind?
-
Hi,
.... oder kennt jemand vielleicht ein forum wo css-profis sind?
Das wird _sehr_ schwierig zu finden sein. Ich wünsch dir viel Glück.
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
Danke für den hilfreichen Beitrag. Das war auch das, was ich in diesem Forum erwartet hatte ;)
Mehr als Tipps wie man bei google suchen kann findet man hier _sehr_selten ;)
Von einigen wenigen Helfern mal ganz abgesehen.-
Hi,
Mehr als Tipps wie man bei google suchen kann findet man hier _sehr_selten ;)
Tschuldigung, hatte garnicht bemerkt, das ich dich auf Google verlinkt hatte. Kommt nicht nochmal vor :)
Von einigen wenigen Helfern mal ganz abgesehen.
Wenige sind es sicherlich nicht. Hätte ich dein Problem verstanden, hätte ich dir sicherlich zumindest versucht zu helfen.
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
Im Beispiel überlappt der graue Block den Gelben. Eigentlich soll der graue aber KOMPLETT IM GELBEN DRIN SEIN, ohne dass der grüne block vom gelben verdeckt wird.
hier nochmal den Copy&Paste-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> body { background-color:red; } div#menuleiste { background-color:white; overflow:auto; } div#box { background-color:green; position:absolute; top:1em; height:5em; } div#content { background-color:yellow; padding:2em; border:2px solid blue; } dl { float:left; width:10em; background-color:gray; margin:0.5em; } </style> </head> <body> <div id="menuleiste">Dies ist ein Menue mit <div id="box">Ueberhang</div></div> <div id="content"> <dl> <dt style="float:left">Foto</dt> <dd style="float:left">Beschreibung des Fotos</dd> </dl> </div> </body> </html>-
Hi,
hier mal mein Copy&Paste-Code versuch:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> body { background-color:red; } div#menuleiste { background-color:white; overflow:auto; } div#box { background-color:green; position:absolute; top:1em; height:5em; } div#content { background-color:yellow; padding:0.4em; border:2px solid blue; } dl { width:10em; background-color:gray; margin:0em; } </style> </head> <body> <div id="menuleiste">Dies ist ein Menue mit <div id="box">Ueberhang</div></div> <div id="content"> <dl> <dt style="float:left">Foto</dt> <dd style="float:left">Beschreibung des Fotos</dd> </dl> </div> </body> </html>So vielleicht?
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
Hi,
Der IE stellte es "richtig" dar, jetzt im FF sah´s anders aus, ich guck nochmal.
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben. -
hm, jetzt ist die Definitionsliste komplett aus div#content raus.
Ich teste übrigens grundsätzlich immer auf irgendeinem Mozilla Derivat. Es ist einfacher, einen in der moz-bin kompatiblen Code für IE zugänglich zu machen, als umgekehrt.
-
-
Hi,
und nochmal Copy&Paste-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> body { background-color:red; } div#menuleiste { background-color:white; } div#box { background-color:green; position:absolute; top:1em; height:5em; } div#content { background-color:yellow; padding:0.4em; width:100%; height: 10em; border:2px solid blue; } dl { overflow: auto; width:12em; background-color:gray; margin:0.5em; } </style> </head> <body> <div id="menuleiste">Dies ist ein Menue mit <div id="box">Ueberhang</div></div> <div id="content"> <dl> <dt style="float:left">Foto</dt> <dd style="float:left">Beschreibung des Fotos</dd> </dl> </div> </body> </html>Da ich so ein Menu noch nie Probiert hab, kenn ich mich damit nicht aus. Was ich weiss ist, das du ein Problem mit der absoluten positionierung hast. Im IE sieht es halbwegs anständig aus.
Du kannst ja hier gucken, ob du was für dich passendes findest.Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
Sorry, aber wasn das für ne Strategie: Einfach allen möglichen Elementen overflow:auto geben...
Das ist ein bisschen unprofessionell finde ich ;)-
Hi,
Sorry, aber wasn das für ne Strategie: Einfach allen möglichen Elementen overflow:auto geben...
Weiss ja nicht, ob´s an deinem TFT oder deinen Augen liegt, aber ich habe nur diesem
dl {
overflow: auto;
width:12em;
background-color:gray;
margin:0.5em;ein overflow gegeben, dein code war mit reichlich mehr overflows bestückt.
Das ist ein bisschen unprofessionell finde ich ;)
Wenn man verstehen könnte, was das ziel mit diesem
}
div#menuleiste {
background-color:white;
overflow:auto;
}div#box {
background-color:green;
position:absolute;
top:1em;
height:5em;könnte man dir ja vielleicht helfen, wenn es da nur um die Navigation der Seite geht hast du auch ein link bekommen, wo du vergekautes zu hauf findest.
Aber man ist ja kein unmensch also:Google
Dr Web
Styleworks
nochmal alvitViel Spass.
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
Hi,
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.
-
-
-
-
-
-
-
-
-
Yerf!
Schuld am ganzen ist overflow:auto auf das ich aber leider nicht verzichten kann. z-index scheint ebenfalls nicht zu klappen.
Interessantes Verhalten, vor allem, da die Hintergrundfarbe dargestellt wird, nur der Text wird nicht verdeckt... aber benötigst du wirklich *beide* overflow:auto? Eines der beiden weg und schon funktionierts.
Gruß,
Harlequin
-
Auf die Idee bin ich natürlich auch schon gekommen. Dann bekomme ich aber Probleme mit gefloateten Objekten (im Beispiel die Definitionslisten).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> body { background-color:red; } div#menuleiste { background-color:white; overflow:auto; } div#box { background-color:green; position:absolute; top:1em; height:5em; } div#content { background-color:yellow; padding:2em; border:2px solid blue; } dl { float:left; width:10em } </style> </head> <body> <div id="menuleiste">Dies ist ein Menue mit <div id="box">Ueberhang</div></div> <div id="content"> <dl> <dt>Foto</dt> <dd>Beschreibung des Fotos</dd> </dl> <dl> <dt>Foto</dt> <dd>Beschreibung des Fotos</dd> </dl> </div> </body> </html>Die Listen erscheinen zwar wie gewünscht nebeneinander, jedoch überlappen dann die Listen den div#content-Kontainer.
Wer mir nicht glaubt, kann ja einfach mal ein overflow:auto in den div#content einfügen.
Scheinbar erzeugt overflow auch so eine Art z-index der auch ohne position-Angaben funktioniert.-
Hallo Kuno
Auf die Idee bin ich natürlich auch schon gekommen. Dann bekomme ich aber Probleme mit gefloateten Objekten (im Beispiel die Definitionslisten).
Und was wäre, wenn du
#menuleistekeinoverflow:autogibst?Die Listen erscheinen zwar wie gewünscht nebeneinander, jedoch überlappen dann die Listen den div#content-Kontainer.
Wer mir nicht glaubt, kann ja einfach mal ein overflow:auto in den div#content einfügen.
Ist
overflow:autodenn wirklich die einzige Möglichkeit?Es ist in vielen Fällen wohl die eleganteste, aber nicht die einzige Möglichkeit.
Wenn nicht alle Elemente innerhalb von
#contentgefloatet sind, sondern ungefloateter Inhalt höher wird, als diese, wäreoverflow:autonicht mehr nötig.Wenn die gefloateten Elemente nicht die letzten in
#contentsind, sondern Elemente noch unter diesen angezeigt werden sollen, musst du das Float sowieso für das erste dieser Elemente aufheben (clear).Oder probiere mal:
div#content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } ~~~(aus "[How To Clear Floats Without Structural Markup](http://www.positioniseverything.net/easyclearing.html)") Oder `float:left`{:.language-css} für `#content`{:.language-css} und einen passenden Wert für `width`{:.language-css}. Es gibt fast immer mehrere Möglichkeiten ein gewünschtes Ziel zu erreichen. Allerdings ist je nach weiteren Umständen nicht immer jede der Möglichkeiten geeignet und auch nicht immer die anscheinend beste oder/und einfachste. Auf Wiederlesen Detlef -- - Wissen ist gut - Können ist besser - aber das Beste und Interessanteste ist der Weg dahin!
-
-
