Hi!
Ich bin gerade dabei, eine Webseite für Smartphones zu entwerfen.
In bestimmten Situationen soll ein Div über die Webseite gelegt werden, welches den eigentlichen Inhalt überlagert. (Das brauche ich für individuell designte Alert-Meldungen und ähnliches.) Mit z-Index ist das ja auch weiter kein Problem: Man kann Links in diesem Div anklicken, Felder ausfüllen und so weiter.
Das einzig blöde daran ist die Tatsache, dass Links, die sich auf der ursprünglichen Seite befinden, und durch das Div überlagert wurden, im mobilen Browser noch immer anklickbar sind - auch wenn sie nicht mehr zur Ziel-URL weiterleiten, kann man beim draufklicken immer noch erkennen, dass an der Stelle ein Link versteckt ist. Ausserdem werden diese Links noch als solche erkannt, wenn ich mit der alternativen Maus, die es auf vielen Smartphones gibt, durch die einzelnen Elemente auf der Webseite durchnavigiere.
Hat da jemand eine Idee, wie man dieses Problem lösen könnte?
So schaut meine Testseite momentan aus:
Ich bin gerade dabei, eine Webseite für Smartphones zu entwerfen.
In bestimmten Situationen soll ein Div über die Webseite gelegt werden, welches den eigentlichen Inhalt überlagert. (Das brauche ich für individuell designte Alert-Meldungen und ähnliches.) Mit z-Index ist das ja auch weiter kein Problem: Man kann Links in diesem Div anklicken, Felder ausfüllen und so weiter.
Das einzig blöde daran ist die Tatsache, dass Links, die sich auf der ursprünglichen Seite befinden, und durch das Div überlagert wurden, im mobilen Browser noch immer anklickbar sind - auch wenn sie nicht mehr zur Ziel-URL weiterleiten, kann man beim draufklicken immer noch erkennen, dass an der Stelle ein Link versteckt ist. Ausserdem werden diese Links noch als solche erkannt, wenn ich mit der alternativen Maus, die es auf vielen Smartphones gibt, durch die einzelnen Elemente auf der Webseite durchnavigiere.
Hat da jemand eine Idee, wie man dieses Problem lösen könnte?
So schaut meine Testseite momentan aus:
Code:
<html><head>
<title>Z Index Test</title>
<style type="text/css"><!--
.examplediv
{
border-style:solid #000000 1px;
}
#divid1 {
position:absolute;
left:450px; top:350px; width:300px; height:150px;
z-index:1;
background-color: #000000;
color: #00FF00;
opacity: 1;
}
#divid2 {
position:absolute;
left:450px; top:350px; width:300px; height:150px;
background-color:#000000;
z-index:0;
color: #00FF00;
}
// --></style>
</head>
<body>
<div id="divid1" class="examplediv">
div1
</div>
<div id="divid2" class="examplediv">
das div <a href="http://www.orf.at">div2</a>
</div>
</body>
</html>
Zuletzt bearbeitet:
