nicht angemeldet
Internetexplorer, Problem mit Floats und absoluter Positionierun
Hallo,
Ich stehe vor einem Problem und weiss einfach nicht wie ich es lösen soll/kann.
Und zwar will ich einfach in einem Div, mehrere Divs haben die hintereinander angezeigt werden. Diese Divs sollen "Phasen",des Elternelements darstellen. Sowie ein Text über dem ganzen. Der folgende HTMLcode zeigt im Firefox genau daswas ich haben will, im Internetexplorer allerdings nicht (welch wunder...)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
</head>
<body>
<div style="position:absolute; top:100px; left:100px; width:200px; height:50px; border:1px solid #888; background:#f88;">
<div style="position:absolute; width: 100%; text-align: center;" >stuff</div>
<div style="float:left; width:100px; height: 100%; background:blue;"></div>
<div style="float:left; width:70px; height: 100%; background:green;"></div>
</div>
</body>
</html>
Für Hilfe wär ich sehr dankbar. Es wär schön wenn das funktionieren würde ohne die Domstruktur zu ändern.
Tom
-
Für Hilfe wär ich sehr dankbar. Es wär schön wenn das funktionieren würde ohne die Domstruktur zu ändern.
<ratemodus>
im internet explorer ist das div-element mit inhalt "stuff" unsichtbar
</ratemodus>-
Für Hilfe wär ich sehr dankbar. Es wär schön wenn das funktionieren würde ohne die Domstruktur zu ändern.
<ratemodus>
im internet explorer ist das div-element mit inhalt "stuff" unsichtbar
</ratemodus>Bei mir ist "stuff" zu sehen (benutze IE7).
Es ist, in diesem Beispiel, genau 170 px zu weit rechts und ist in der Tat genauso breit wie das Elternelement, also 200px. Bei normaler Fontgröße ist also "stuff" ausserhalb des Elternelements.
-
Ich denke ich weiss warum es unsichtbar ist. der Z-index muss auf größer null gesetzt werden vom Textelement.
Allerdings bedeutet das, das es bei dir funktioniert ...
-
Allerdings bedeutet das, das es bei dir funktioniert ...
nein - es war wie gesagt "ratemodus" interessant wäre ein online-beispiel (zum anschauen im browser) und eine beschreibung, was genau dein problem ist
-
Allerdings bedeutet das, das es bei dir funktioniert ...
nein - es war wie gesagt "ratemodus" interessant wäre ein online-beispiel (zum anschauen im browser) und eine beschreibung, was genau dein problem istAlso der von mir gepostete Code kann man direkt in eine plain-text datei einfügen und in html umbennenen. hier nochmal mit dem Z-indexfehler behoben
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
</head>
<body><div style="position:absolute; top:100px; left:100px; width:200px; height:50px; border:1px solid #888; background:#f88;">
<div style="position:absolute; z-index: 1; width: 100%; text-align: center;" >stuff</div>
<div style="float:left; width:100px; height: 100%; background:blue;"></div>
<div style="float:left; width:70px; height: 100%; background:green;"></div></div>
</body>
</html>Fehlerbeschreibung:
Es soll so aussehen wie im FF, d.h. eine Box mit 200x100 px größe wird angezeigt. Darin befinden sich 3 Elemente, ein Textelement und 2 leere Elemente die nur dazu da sind ihre Hintergrundfarbe darzustellen.
Rauskommen soll also ein rotes, großes Element, welche 2 Elemente (teilweise) verdecken, nämlich die ersten 100 px vom zweiten, blauem Kindelelement und die darauffolgenden 70 px vom dritten, grünen Kindelement (also von pixel 101 - 170 in der Breite). Das erste Element (mit Stuff drin) soll über dem ganzen, mittig im Elternelement sitzen, als Überschrift quasi.Im IE sieht es allerdings so aus als ob die statisch positionierten Kindelemente (die farbigen Kästen) die Positionierung des Textes beeinflussen obwohl es absolut positioniert ist. Sprich, das div mit "stuff" ist 170px zuweit rechts.
-
Also der von mir gepostete Code kann man direkt in eine plain-text datei einfügen und in html umbennenen. hier nochmal mit dem Z-indexfehler behoben
natürlich kann man das machen - aber warum sollte ich das tun, wenn ein blinder mit hacklstecken sehen kann, dass der code nie und nimmer valide ist und den ie sowieso in den quirksmode zwingt
-
Also der von mir gepostete Code kann man direkt in eine plain-text datei einfügen und in html umbennenen. hier nochmal mit dem Z-indexfehler behoben
natürlich kann man das machen - aber warum sollte ich das tun, wenn ein blinder mit hacklstecken sehen kann, dass der code nie und nimmer valide ist und den ie sowieso in den quirksmode zwingt
HTML 4.01 Strict valide. Macht bezüglich des Problems allerdings keinen Unterschied und ist beim kopieren passiert.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head><title></title></head>
<body><div style="position:absolute; top:100px; left:100px; width:200px; height:50px; border:1px solid #888; background:#f88;">
<div style="display: inline-block ; position:absolute; z-index: 1; width: 100%; text-align: center;">stuff</div>
<div style="display: inline-block; float:left; width:100px; height: 100%; background:blue;"></div>
<div style="display: inline-block ;float:left; width:70px; height: 100%; background:green;"></div></div>
</body>
</html>
-
-
Hi,
nein - es war wie gesagt "ratemodus"
apropos Ratemodus... hierdurch:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
versetzt Du die Browser in einen solchen.
Darin befinden sich 3 Elemente, ein Textelement
ich sehe kein Textelement. Wie wäre es mit sinnvollen Elementen wie <p>?
und 2 leere Elemente die nur dazu da sind ihre Hintergrundfarbe darzustellen.
warum dann float und nicht position:absolute?
freundliche Grüße
Ingo-
Hallo Ingo,
Danke das mich jemand aufklärt was Ratemodus heißt, ich bin davon ausgegangen das sein Kommentar selbst "geraten" war. Davon ab, es funktioniert auch mit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> oder ganz ohne Doctype
nicht (wenn du mir sagst das dies auch Ratemodus ist, würde ich gerne wissen wie man dem Webbrowser in den Nichtratemodus versetzt. Habe nämlich davon relativ wenig Ahnung.Zum <p> Vorschlag. Kann man machen, funktioniert allerdings nicht was mich auch stark gewundert hätte. Wenn es ein Hinweis auf allgemeinen Codestyle ist, dies ist nur ein Beispiel welches ich schnell zusammengebastelt hab ums hier reinzustellen (sollte ich da Feinheiten übersehen, bitte sagen!).
Die farbigen Divs möchte ich nicht per absolute positionieren weil ich zwar die Breite der Elemente habe, müßte ich die absolute Position basierend auf den vorangegangenen Elementen berechnen. Es kostet nicht viel Zeit, da es aber eigentlich mit Float funktionieren sollte scheint mir das unnötig. (und unnötige Sachen im Code schreiben will ich tunlichst vermeiden)
-
Danke das mich jemand aufklärt was Ratemodus heißt, ich bin davon ausgegangen das sein Kommentar selbst "geraten" war.
nein - mein kommentar war geraten - den "ratemodus" des browers hab ich in einem meiner posts aber dediziert als quirksmode bezeichnet
würde ich gerne wissen wie man dem Webbrowser in den Nichtratemodus versetzt.
guckst du in der suchmaschine deiner wahl mit den begriffen "doctype switch" und "quirksmode"
Wenn es ein Hinweis auf allgemeinen Codestyle ist, dies ist nur ein Beispiel welches ich schnell zusammengebastelt
wenn du für ein schnelles beispiel gleich ordentlichen code lieferst und dir das angewöhnst, machst du dir selbst weniger arbeit, da du das fertige beispiel nicht erst umbauen musst sondern gleich produktiv verwenden kannst
Die farbigen Divs möchte ich nicht per absolute positionieren weil ich zwar die Breite der Elemente habe, müßte ich die absolute Position basierend auf den vorangegangenen Elementen berechnen. Es kostet nicht viel Zeit, da es aber eigentlich mit Float funktionieren sollte scheint mir das unnötig. (und unnötige Sachen im Code schreiben will ich tunlichst vermeiden)
mit dem hier und deiner beschreibung hier in diesem thread kann ich aber immer noch nichts anfangen - du willst ein element in dem drei elemente mit fixen größen sind nur wegen ihrer hintergrundfarbe wegen haben? was spricht gegen ein hintergrundbild?
-
guckst du in der suchmaschine deiner wahl mit den begriffen "doctype switch" und "quirksmode"
Mach ich
wenn du für ein schnelles beispiel gleich ordentlichen code lieferst und dir das angewöhnst, machst du dir selbst weniger arbeit, da du das fertige beispiel nicht erst umbauen musst sondern gleich produktiv verwenden kannst
Danke für den Hinweis, aber das Beispiel irgendwie produktiv einsetzen war sowieso nicht gegeben. Diente nur der Illustration
mit dem hier und deiner beschreibung hier
kann ich aber immer noch nichts anfangen - du willst ein element in dem drei elemente mit fixen größen sind nur wegen ihrer hintergrundfarbe wegen haben? was spricht gegen ein hintergrundbild?
Du meinst also jedes einzelne farbige Div mit einem Div mit einem Hintergrundbild derjenigen Farbe zu unterlefen oder meinst du ein Bild wo die mehreren farbigen Kästchen "drin" sind uzm sich die vielen Elemente zu sparen? Die farbigen Divs haben (oft) bei jedem Aufruf der Seite andere Breiten, jedes mal ein neues Bild zu zeichen ist da nicht sinnvoll.
Was auch nicht weiter ins Gewicht fällt oder? Ich will einfach ein bisschen Text absolut positionieren in einem Element wo ein paar Elemente per Floatleft aneinandergereiht sind.
-
Du meinst also jedes einzelne farbige Div mit einem Div mit einem Hintergrundbild derjenigen Farbe zu unterlefen oder meinst du ein Bild wo die mehreren farbigen Kästchen "drin" sind uzm sich die vielen Elemente zu sparen? Die farbigen Divs haben (oft) bei jedem Aufruf der Seite andere Breiten, jedes mal ein neues Bild zu zeichen ist da nicht sinnvoll.
Was auch nicht weiter ins Gewicht fällt oder? Ich will einfach ein bisschen Text absolut positionieren in einem Element wo ein paar Elemente per Floatleft aneinandergereiht sind.
nein, das halte ich für nicht sinnvoll - aber wir kommen der sache näher - wenn du einfach sagst, WAS du tun willst und nicht WIE du es bisher NICHT zustande gebracht hast, hilft das weiter
ein screenshot, ein bild oder eine beschreibung was welcher teil dieser kästchen aussagt wärde klüger
ich frage mich immer noch, warum du float, absolute oder sonstwas verwendest - ggf ist eine andere lösung besser geeignet für dich
aber es ist schwierig, irgend einen rat zu geben, weil ich nicht kapiert habe, was du eben willst
-
aber es ist schwierig, irgend einen rat zu geben, weil ich nicht kapiert habe, was du eben willst
Ich will: In einem Element mehrere Unterelemente links aneinandergepappt darstellen mit einer Überschrift in dem besagtem Element. Das ganze ohne die Domstruktur zu verändern wenn es geht.
Zum Beispiel könnte das Element ein Projekt mit maximaler zeitlicher Ausdehnung sein, wobei 200px, um bei dem Beispiel von vorhin zu bleiben, vielleicht 200 Tage entspricht. Die ersten 100 Tage sind meinetwegen Entwicklung (A) und die anderen 70 sind Qualitätsicherung (B). Diese sind voneinander abhängig, B kann nicht vor dem Ende A anfangen. Sollte A jetzt nur noch 50 Tage dauern, soll B praktisch schon am Tag 51 beginnen. Das Beispiel ist etwas konstruiert, das Fallbeispiel allerdings noch viel mehr. Was ich will ist aber das gleiche (also Unterelemente linksbündiog darstellen).
Ich hoffe ich konnte mich jetzt klarer ausdrücken.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Habe ich als "Nichtratemodus" gefunden, ist das richtig? (hilft bei dem Problem auch nicht weiter)
Im FF liefert wie gesagt das Codebeispiel was ich hoffe zu erreichen und im IE sieht man, wenn es so ist wie bei mir, ein ganz anderes Ergebnis
-
Zum Beispiel könnte das Element ein Projekt mit maximaler zeitlicher Ausdehnung sein, wobei 200px, um bei dem Beispiel von vorhin zu bleiben, vielleicht 200 Tage entspricht. Die ersten 100 Tage sind meinetwegen Entwicklung (A) und die anderen 70 sind Qualitätsicherung (B). Diese sind voneinander abhängig, B kann nicht vor dem Ende A anfangen. Sollte A jetzt nur noch 50 Tage dauern, soll B praktisch schon am Tag 51 beginnen. Das Beispiel ist etwas konstruiert, das Fallbeispiel allerdings noch viel mehr. Was ich will ist aber das gleiche (also Unterelemente linksbündiog darstellen).
Ich hoffe ich konnte mich jetzt klarer ausdrücken.
ich hoffe, ich habs verstanden - annahme 1 pixel ist 1 tag, drei bereiche (a , b und c) - bewusst als div-suppe-gelöst - hilft dir das?
<div style="width: 200px; height: 100px;"> <div class="phase" style="width: 100px; background: red;">a</div> <div class="phase" style="width: 70px; background: blue;">b</div> <div class="phase" style="width: 30px; background: green;">c</div> </div>.phase { float: left; height: 100px; }nicht getestet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Habe ich als "Nichtratemodus" gefunden, ist das richtig? (hilft bei dem Problem auch nicht weiter)
sieht gut aus - wenns dir bei deinem problem auch nicht weiterhilft, du gehst zumindest bei jedem browser von gleichen voraussetzungen aus (wenn man die eigenheiten mal weglässt)
den aktuellen rendermodus kann man mittels javascript übrigens auslesen (eine suche nach "javascript" und "compatMode" wird dir weiterhelfen)
-
Wie gesagt, das ist kein Problem. Die Überschrift in dem Element ist aber an der vollkommen falschen Position im IE. (die Überschriften in den einzelnen Elementen sind kein Problem, ich will aber ein darüberliegendes.
Um auf mein vorherieges Beispiel zurückzukommen. Wenn das ganze Projekt z.B. "Entwicklungszyklus" ist und Phase 1 Entwicklung von Dauer 100 Tagen und Phase 2 Qualitätsicherung von 70 Tage ist, dann möchte ich nicht nur die Unterüberschriften haben, sondern vor allem einmal über das ganze Element "Entwicklungszyklus".
Um deinen Vorschlag zu verwenden.
<div style="width: 200px; height: 100px;">
<p style="width:100%; position:absolute; text-align: center;">Entwicklungszklus<p>
<div class="phase" style="width: 100px; background: red;">a</div>
<div class="phase" style="width: 70px; background: blue;">b</div>
<div class="phase" style="width: 30px; background: green;">c</div>
</div>Dieser Code zeigt die Phasen übrigens untereinander an. Mit float:left z.B. würde es richtig aussehen aber die Position von "Entwicklungszyklus" durcheinanderbringen.
-
<div style="width: 200px; height: 100px;">
<p style="width:100%; position:absolute; text-align: center;">Entwicklungszklus<p>
<div class="phase" style="width: 100px; background: red;">a</div>
<div class="phase" style="width: 70px; background: blue;">b</div>
<div class="phase" style="width: 30px; background: green;">c</div>
</div>Dieser Code zeigt die Phasen übrigens untereinander an. Mit float:left z.B. würde es richtig aussehen aber die Position von "Entwicklungszyklus" durcheinanderbringen.
p { float: left; width: 100%; margin: 0; padding: 0; text-align: center; }das sollte eigentlich nix durcheinander bringen
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Hi!
ohne die Domstruktur zu ändern.
Das solltest Du auch unterlassen, sonst steigen die ca. eine Million Kölner 'auf`s Dach'!
off:PP
--
"You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)