Autor |
Nachricht |
efeqtif
Threadersteller
Dabei seit: 18.06.2007
Ort: Berlin
Alter: -
Geschlecht: -
|
Verfasst Di 27.11.2007 16:20
Titel z-index:-1 im IE |
|
|
hej hej
ich finde grad die lösung für ein problem nicht, und hoffe, ihr könnt mir helfen.
folgendes :
ich habe eine navigation, der ich runde ecken zuweisen möchte. durch einfache schmale grafiken oben und unten kann ich diesen effekt nicht erzeugen, da die navipunkte bei mouseover ihre hintergrundfarbe ändern. die navi wird dynamisch erstellt, somit kann ich dem oberen und unteren navipunkt keine eigene klasse geben, würden die genannten schmalen grafiken oben und unten die runden ecken erzeugen, würde deren hintergrundfarbe (grau) sich bei mousover nicht ändern.
jetzt habe ich versucht, es mit relativen divlayern zu umgehen, einer, der im div der navi liegt, mit z-index:2, dass er über dem ersten navi punkt die runden ecken erzeugt (transparentes gif mit weißen runden links und rechts) und der eigentliche div layer, in dem die navi ist, mit z-index:1, als hintergrund das transparente gif für die unteren ecken und background-position:bottom. die navi punkte werden mit display:block zu kästen und bekommen den z-index:-1, damit sie unter den divs liegen, die die runden ecken erzeugen. navi punkte und das div um den navi für die unteren runden ecken haben dazu noch ein position:relative.
im firefox funktioniert es wunderbar, nur der internet explorer macht mucken. die unteren ecken werden nicht angezeigt. die oberen ecken hingegen wunderbar.
hier css und html code :
Code: |
div#navigation {
background-image:url(bilder/rund_oben.gif);
background-repeat:no-repeat;
z-index:2;
width:200px;
position:absolute;
}
div#navigation_add {
background-image:url(bilder/rund_unten.gif);
background-repeat:no-repeat;
background-position:bottom;
z-index:3;
position:relative;
}
a.navi, a.navi:LINK, a.navi:ACTIVE, a.navi:VISITED {
display:block;
padding-left:10px;
padding-top:4px;
padding-bottom:4px;
background-color:#e3e4e5;
font-size:12px;
border-bottom:1px solid #cdced0;
color:#000;
position:relative;
text-decoration:none;
z-index:-1;
}
a.navi:HOVER {
display:block;
padding-left:10px;
padding-top:4px;
padding-bottom:4px;
background-color:#cdced0;
font-size:12px;
border-bottom:1px solid #cdced0;
font-weight:bold;
color:#000;
position:relative;
text-decoration:none;
z-index:-1;
}
|
Code: |
<div id="navigation_add">
<div id="navigation"><img src="bilder/rund_oben.gif" /></div>
<a href="#" class="navi">Startseite</a>
<a href="#" class="navi">Das Unternehmen</a>
<a href="#" class="navi">Unsere Mission</a>
<a href="#" class="navi">Projekte</a>
<a href="#" class="navi">Kontakt</a>
</div>
|
hat jemand von euch erfahrung damit gemacht? ich hab gelesen, dass der internet explorer nur bei position:fixed auf static zurück geht, und somit den z-index ignoriert. aber relativ müsste es doch gehen?
hoffe ich hab mich verständlich ausgedrückt.
danke
ef
Zuletzt bearbeitet von efeqtif am Di 27.11.2007 16:20, insgesamt 1-mal bearbeitet
|
|
|
|
|
joe
Dabei seit: 28.06.2005
Ort: berlin
Alter: -
Geschlecht:
|
Verfasst Di 27.11.2007 16:51
Titel
|
|
|
Ich verstehe noch nicht ganz wie du das umsetzen willst und wie es dann letztlich aussehen soll. Hast du einen Link zu dem Menü? Nur der Code bringts nicht ganz, da es ja gerade um die Grafiken geht, die in deinem Beispiel aber nicht absolut verlinkt sind.
Außerdem: sind negativ-Werte in z-index erlaubt? Warum nicht einfach 15, 10, 5 oder so?
|
|
|
|
|
Anzeige
|
|
|
efeqtif
Threadersteller
Dabei seit: 18.06.2007
Ort: Berlin
Alter: -
Geschlecht: -
|
Verfasst Di 27.11.2007 16:58
Titel
|
|
|
hm. mir sind negativ werte schon oft über den weg gelaufen, und demnach bin ich der ansicht, dass es erlaubt ist. vllt ist es aber auch ein CSS versions problem? ich hab versucht, den navi punkten den z-index:1 zu geben, und entsprechend den darüber liegenden divs 2 und 3, das wars aber auch nicht.
jedenfalls, hier der link : http://300l600.de/_ablage/navi/navi.html
|
|
|
|
|
sidisinsane
Dabei seit: 30.01.2006
Ort: Hamburg
Alter: 52
Geschlecht:
|
Verfasst Di 27.11.2007 17:34
Titel
|
|
|
Ich habe Deinen Post nur bis ungefähr "runde Ecken" gelesen. Sofern es für Dich keinen zwingenden Grund gibt nicht auf Javascript zurückzugreifen, würde ich Dir die Nifty Cube Methode empfehlen. Ist sicherlich eleganter und unproblematischer.
Falls ich jetzt doch hätte weiterlesen sollen, dann vergiss meine Empfehlung einfach.
|
|
|
|
|
EnterYourName
Dabei seit: 14.06.2007
Ort: Hamburg
Alter: 36
Geschlecht:
|
Verfasst Mi 28.11.2007 11:04
Titel
|
|
|
Ich hatte neulich auch akute Probleme mit'm Z-index... Hab bei CSS4you nachgelesen, dass der z-index nur auf absolute-positionierte elemente anwendbar ist.
Wenn absolute-positionen für dich nicht in Frage kommen musst du wohl nach ner anderen lösung suchen :/
|
|
|
|
|
efeqtif
Threadersteller
Dabei seit: 18.06.2007
Ort: Berlin
Alter: -
Geschlecht: -
|
Verfasst Mi 28.11.2007 19:01
Titel
|
|
|
vielen dank!
habe jetzt nifty genommen (danke für den tipp), leider hat es im IE nur die unteren ecken gerundet. aber mit if IE habe ich die oberen dann wieder über den absoluten div erzeugt.
|
|
|
|
|
|
|
|
Ähnliche Themen |
index-Datei
Index.php abfragen
Pop-up beim Index
css z-index ebenen
z-index und flash
Problem mit z-index
|
|