nicht angemeldet
DIV Überlappungs Probleme mit position: absolute
MarcHallo an alle
Ich hab ein Problem mit nicht IE Browser für das ich gerne eine Lösung hätte.
Ich habe mehrere DIV Layer die ich exakt übereinander lege. In jedem ist ein Link
enthalten. Wie schaffe ich es das alle Links in jeder Eben klickbar werden? Gibt
es da eine Lösung für ? Der IE Explorer sieht das völlig easy und lässt es zu (ob Fehler oder nicht
wäre froh wenns der firefox und der Safari auch so machen würden)
Das Codebeispiel hier unten einfach rauskopieren und im Browser starten dann sieht
man das Problem direkt und der untereste Link ist im NICHT IE Browser klickbar.
Grüße Michael
Code Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<STYLE TYPE="text/css">
#NAVIBOX {
height: 505px;
width: 1000px;
}
#link0 {
height: 500px;
width: 500px;
position: absolute;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="NAVIBOX">
<DIV ID="link0" STYLE="padding: 40px;"><A STYLE="z-index: 100" HREF="test">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung</A></DIV>
<DIV ID="link0" STYLE="padding: 70px; background-color: none;"><A HREF="test">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung</A></DIV>
<DIV ID="link0" STYLE=" padding: 100px;"><A HREF="test">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung</A></DIV>
<DIV ID="link0" STYLE="padding: 130px;"><A HREF="test">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung</A></DIV>
</DIV>
</BODY></HTML>
-
Hallo,
Ich hab ein Problem mit nicht IE Browser für das ich gerne eine Lösung hätte.
wenn Du Deinen Code mal validieren würdest, würdest Du merken, dass du noch ein paar mehr Probleme hast...
Dein Code hat mit XHTML aber auch überhaupt keine Ähnlichkeit - nicht einmal von ferne. Darum: wundere Dich nicht, wenn irgendetwas nicht so aussieht, wie du willst. Wundere Dich lieber darüber, dass die Entwickler des Browsers so gut raten können, was Du meinst und deswegen doch einiges so aussieht, wie von Dir gewünscht.
Entweder Du verwendest einen anderen Dokumententyp, der uralt-HTML erlaubt - oder du räumst Deinen Code auf. In jedem Fall gilt: immer schön validieren (Link siehe ganz, ganz unten)...
Ich habe mehrere DIV Layer die ich exakt übereinander lege. In jedem ist ein Link
enthalten. Wie schaffe ich es das alle Links in jeder Eben klickbar werden? Gibt
es da eine Lösung für ? Der IE Explorer sieht das völlig easy und lässt es zu (ob Fehler oder nicht
wäre froh wenns der firefox und der Safari auch so machen würden)Irgendwie ist das ein gutes Beispiel dafür, wie man es nciht machen sollte: mein Ratschlag: Sag uns, wozu du das so machen möchtest. Vielleicht können wir Dir einen anderen Weg zeigen. Wir werden wohl kaum die standardkonformen Browser (einschließlich IE in der sehr bald aktuellen Version 8) dazu bringen können, sich Dir zuliebe nicht mehr an Webstandards zu halten...
Gott sei dank! - Denn sonst würden alle korrekt entwickelten Seiten nicht mehr funktionieren. Standards machen nämlich durchaus Sinn...
Viele Grüße,
Marc.-
Hallo Marc,
genau das ist eine Antwort die absolut nicht dem entspricht was ich wissen wollte. Das bissel Code was du hier siehst macht in jedem Browser OPTISCH genau das was es soll. Ich hab nur ein Problem damit das übereinander gelegte Ebenen die einen Link enthalten leider nicht in nicht IE Browsern funktionieren.
Der Doctype ist dabei vollkommen egal. Du kannst ihn auch gerne weglassen darum hab ich ja auch einen so trivialen Code reingestellt damit es JEDER ohne Probleme testen kann.
Ich hätte gerne eine Lösung dafür das ich in jeder Ebene auf meinen Links klicken kann ohne das sich was an der Überlappung ändert.
Teste es im IE und im Firefox dann verstehst du direkt was ich meine.
Und ob das jetzt mit css javascript gemacht werden kann bin ich eben am rausfinden
-
-
Hier ist ein validerter Code @Marc.. die Validierung ist nicht das Problem ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#NAVIBOX {
height: 505px;
width: 1000px;
}.link0 {
height: 500px;
width: 500px;
content: after;
position: absolute;
}
</style>
</head>
<body><div id="NAVIBOX">
<div class="link0" style="padding: 40px;"><a style="z-index: 100" href="test">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung</a></div>
<div class="link0" style="padding: 70px; background-color: none;"><a href="test">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung</a></div>
<div class="link0" style=" padding: 100px;"><a href="test">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung</a></div>
<div class="link0" style="padding: 130px;"><a href="test">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung</a></div>
</div></body></html>
-
Hallo,
Hier ist ein validerter Code @Marc.. die Validierung ist nicht das Problem ...
Dann kann man ja mal weitersehen - So ganz ist mir leider auch nicht klar, was Du erreichen möchtest - Du hast hier vier Links, die jeweils etwas weiter eingerückt sind, als der vorherige Link. Egal ob du grafische Links oder Text-Links in der fertigen Version verwenden möchtest: wozu diese riesigen einander überlagernden DIVs?
Gibt es keine andere Möglichkeit?
Viele Grüße,
Marc.-
Ich danke dir das du wenigstens als einziger dir Mühe gibst und mal reinschaust aber ich glaub du hast dazu leider auch keine Lösung :-)
Das was dir da vorliegt an Code ist NUR ein Beispiel die Höhe und Breite der Div ist vollkommen egal. Ich will damit nur zeigen das sobald im firefox ein Layer exakt über einem anderen liegt der darunter liegen LINK nicht mehr anklickbar ist. Ich brauch aber ein Lösung dafür das das geht.
Du kannst also gerne auch zwei Bilder übereinander legen und die Absolut setzen (sollten allerdings soweit auseinander stehen das noch erkennbar ist das es sich um zwei unterschiedliche Layer handelt) Nur müssen beide anklickbar sein ...
lg michael
-
Hi,
Ich will damit nur zeigen das sobald im firefox ein Layer exakt über einem anderen liegt der darunter liegen LINK nicht mehr anklickbar ist.
Natuerlich - wenn du zwei Rubbel-Lose uebereinander legst, kannst du auch nur noch auf dem obersten freirubbeln ...
(Dass der IE "Loecher" in Elementen an den Stellen sieht, wo diese "keinen Inhalt" haben, ist nichts neues - wird dadurch aber auch nicht richtiger.)
Ich brauch aber ein Lösung dafür das das geht.
*Wa*-*rum*?
Marc hat's schon mal geschrieben: Wenn du mal beschreiben wuerdest, was du damit *erreichen* willst - dann koennten wir vielleicht zusammen ueber alternative Moeglichkeiten, dies zu realisieren, nachdenken.
Du kannst also gerne auch zwei Bilder übereinander legen und die Absolut setzen (sollten allerdings soweit auseinander stehen das noch erkennbar ist das es sich um zwei unterschiedliche Layer handelt) Nur müssen beide anklickbar sein ...
Und was sollte dann bei einem Klick darauf passieren - soll der Klick auf beiden registriert und verarbeitet werden, oder was? (Wenn ja: Warum reicht dann nicht das Abfangen des Klicks auf dem obersten?)
Evtl. liesse sich da mit Event Blubbling in JavaScript was basteln (bei den Bildern wohl nicht, weil das unabhaengige Elemente sind, aber bei verschachtelten Elementen schon).
Und sonst koennte man ja immer noch den Klick auf document registrieren, und dann die Koordinaten abfragen, und ermitteln welche Elemente dadurch theoretisch alle "angeklickt" worden waeren ...MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“
-
-
-