19.11.2007, 22:02
|
|||
|
|||
Problem mit Z Index
Hallo bin am verzweifeln:
Seite ist Online unter ra.punzel.info. Probleme gibt es mit Inhalten die einen Link enthalten. Im IE7 ist es anclickbar. Im Firefox 2 nicht. Bsp siehe hier: Kiten | ra.punzel Erklörung zum HtmlCode: Das <Div> Container kann nicht im <Div> Navcont liegen, da sonst das Scrollen nicht funktioniert..... Code:
body { background-color: #9acd32; font-family: "Segoe Script", "Palatino Linotype"; font-size: 0.8em; }
#navcont { margin: -300px 0 0 -300px; padding: 0 0 0 0; height: 600px; width: 600px; background-color: transparent; position: fixed; left: 50%; top: 50%; border-bottom: 2px solid #393939; border-right: 2px solid #393939; z-index: 2; }
#links { position: absolute; width: 150px; height: 600px; top: 0%; left: 0%; z-index: 20; }
#rechts { position: absolute; width: 150px; height: 600px; top: 0%; right: 0%; z-index: 20; }
ul { list-style: none; }
.ol, .olm, .orm, .or, .lmo, .rmo, .lmu, .rmu, .ul, .ulm, .urm, .ur { width: 150px; height: 150px; }
li:hover { background-color: white; border-top: 2px solid #909090; border-left: 2px solid #909090; }
li.ol:hover a, li.olm:hover a, li.orm:hover a, li.or:hover a, li.lmo:hover a, li.rmo:hover a, li.lmu:hover a, li.rmu:hover a, li.ul:hover a, li.ulm:hover a, li.urm:hover a, li.ur:hover a { display: inline; text-decoration: none; line-height: 150px; padding: 55px; color: #a0522d; font-weight: 800; letter-spacing: 2px; }
li.ol a, li.olm a, li.orm a, li.or a, li.lmo a, li.rmo a, li.lmu a, li.rmu a, li.ul a, li.ulm a, li.urm a, li.ur a { display: none; width: 150px; height: 150px; }
/* Linker Block */
.ol, .lmo, .lmu, .ul { position: absolute; left: 0px; }
.ol { background-color: #48d1cc; top:0px; }
.lmo { background-color: #ff4500; top: 150px; }
.lmu { background-color: #d2691e; top: 300px; }
.ul { background-color: gray; top: 450px; }
/* Rechter Block */
.or, .rmo, .rmu, .ur { position: absolute; left: 0px; }
.or { background-color: #bc8f8f; top: 0px; }
.rmo { top: 150px; background-color: #5f9ea0; }
.rmu { top: 300px; background-color: #3cb371; }
.ur { top: 450px; background-color: #7b68ee; }
/* Unten Oben */
.olm, .orm, .ulm, .urm { position: absolute; }
.olm { left: 150px; top: 0px; background-color: orange; }
.orm { left: 300px; top: 0px; background-color: #ee82ee; }
.ulm { left: 150px; top: 450px; background-color: #8b4513; }
.urm { left: 300px; top: 450px; background-color: yellow; }
/* Inhalte */
#container { height: 320px; width: 160%; position: absolute; left: 50%; top: 50%; margin: -165px auto 0 -150px; background-color: white; z-index: 1; }
#content { padding: 20px 100px 0 25px; width: 110%; height: 320px; background-color: transparent; }
#content p { width: 250px; height: 250px; text-align: justify; float: left; margin: 0 0 0 0; padding: 20px 80px 20px 0; }
.clear { clear: both; }
/* Footer */
#footer { width: 200px; height: 50px; position: fixed; bottom: 10%; right: 3%; line-height: 50px; text-align: center; }
/* optisches Beiwerk */
.cl { height: 400px; width: 100%; position: fixed; top: 50%; right: 50%; margin: -200px 299px; background-color: #9acd32; z-index: 50; }
.cr { height: 400px; width: 100%; position: fixed; top: 50%; left: 50%; margin: -200px 0 0 302px; background-color: #9acd32; z-index: 50; }
.galerie { padding: 20px 20px 20px 20px; background-color: black; }
|
| Sponsored Links |
|
19.11.2007, 22:19
|
|||
|
|||
|
Home und Kiten sind hier anklickbar. Beschreib doch bitte das Problem genauer, Danke.
|
| Sponsored Links |
|
19.11.2007, 22:20
|
||||
|
||||
|
Ich kann im FF2.0.0.9 alles anklicken und bekomme dann auch den "Dummy-Text" bzw. den Surfer gezeigt. Wo genau ist jetzt das Problem? Kannst du das mal genauer beschreiben?
Edit: 
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ
|
|
19.11.2007, 22:26
|
|||
|
|||
|
Schwarzer Falke, die Seite verlangt vom Nutzer, dem Spieltrieb zu folgen und überall draufzuklicken. Ich glaube mittlerweile, das Problem ist, dass das Bild in der Mitte mit dem Surfer nicht anklickbar ist.
Wenn, dann wird es nicht beruhigen, dass Safari sich auch weigert, auf den Mausklick zu reagieren. Opera reagiert wie IE7. Das Problem ist, dass der Link im Element mit z-index tiefer liegt. Links müssen nach der Spezifikation nicht anklickbar sein, wenn ein transparentes Objekt darüber zu liegen kommt. Geändert von IChao (19.11.2007 um 22:31 Uhr)
|
|
19.11.2007, 22:39
|
|||
|
|||
|
Zitat:
Das Problem ist Mozilla kapierts nur wenn das Div mit dem Content innerhalb dem Div von der Navi liegt. dann funzt es aber nicht mehr mit dem horizontalen scrollen vom text
|
|
19.11.2007, 22:46
|
|||
|
|||
|
Zitat:
Geändert von IChao (19.11.2007 um 22:49 Uhr)
|
|
19.11.2007, 22:56
|
|||
|
|||
|
Muss denn #navcontent überhaupt ein z-index tragen? Könnte nicht jedes Quadrat außen rum für sich erst im Stack per z-index hochbubbeln?
|
| Sponsored Links |
|
19.11.2007, 23:04
|
|||
|
|||
|
muessen nein.
ohne gehts auch mit ein paar kleinen optischen reperaturen im firefox. nur dann steigt mir der IE aus der kapiert dann nicht mehr, dass der content unter allen anderen elementen wieder verschwinden soll. aber ist zumindest ein ansatz das ganze mit conditional comments hin zu bekommen........
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Font der Überschrift ändern (Problem) | artist | CSS | 2 | 07.12.2007 10:01 |
| Design zu CSS/HTML verarbeiten - Problem häufen sich. | Grafikamateur | CSS | 2 | 06.08.2007 09:57 |
| Problem mit WordPress und dem Bilder Upload | Maxefix | Serveradministration und serverseitige Scripte | 0 | 19.12.2006 14:58 |
| Problem bei Div's - zwei mal das gleiche und doch nicht ... | Niriel | CSS | 10 | 09.06.2005 17:39 |
| Problem mit einem CSS Layout | nARC | CSS | 20 | 21.05.2005 06:28 |
Linear-Darstellung
