z-index im IE?

info · 14. Juli 2007, 14:55

hallo alle zusammen!

ich code gerade meine website und bin dabei auf ein sehr blödes problem gestoßen.

meine navigation besteht aus per z-index überlagerten elementen.

der effekt ist der folgende:

wenn eine elemente ge"hovert" wird, dann rückt es gegenüber den anderen in den vordergrund im css wechselt das element den z-wert von "z-index:0" auf "z-index:20", die zahl ist willkürlich gewählt, sie sollte nur wesentlich höher sein als die anderen und das ist sie.

im firefox 2.0.x, sowie opera 9.21 und safari (beta-version für win) funktioniert das optimal. nur der IE 6 macht zicken.

denn er highlighted das element mit dem gewünschten effekt aber ohne den z-index zu beachten!?

..hat jemand vllt schon mal diese erfahrung gemacht und weiß wie das zu lösen ist? das wäre echt super.. denn der effekt ist einfach klasse.

mfg

Torben Brodt · 14. Juli 2007, 17:42

wie sieht denn der entsprechende Code-Ausschnitt aus?
Handelt es sich um ein Blockelement wie DIV? Hast du eine position definiert?

z-index (Schichtposition bei Überlappung)

Diese Eigenschaft wirkt nur in Verbindung mit einer Angabe zu position. Wenn Sie mehrere Elemente positionieren, deren Anzeigebereiche sich überlappen, werden die Elemente normalerweise in der Reihenfolge übereinander angezeigt, in der sie definiert werden. Im Quelltext später notierte Elemente überdecken vorhergehende. Sie können die Reihenfolge ändern, indem Sie für die einzelnen Elemente Werte vergeben. Elemente mit höherem Wert überdecken Elemente mit niedrigerem.

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index

info · 14. Juli 2007, 18:40

hi donut!

also es handelt sich um ein inline-element

ich poste mal den code eines navi-elementes

Quellcode

<a href="index2.html">
<ul id="box_startseite">
<li class="spacer"><h2><a href="index2.html">  Startseite</a></h2></li>
</ul>
</a>

und hier der css code:

Quellcode

#box_startseite{
position: absolute;
width: 152px;
height: 153px;
margin-top: 50px;
z-index: 0;
background-color: transparent;
}
.test123{
}
.spacer{
padding-top: 133px;
padding-left: 0px;
list-style-type: none;
}
.spacer h2{
font-size: 17px;
text-decoration: none;
}
.spacer a {
border: 0px solid black;
padding-top: 133px;
padding-right: 60px;
padding-bottom:2px;
padding-left:0px;
background-image:url(../images/navi/startseite_normal.gif);
background-position:center;
background-attachment:scroll;
background-repeat:no-repeat;
color: #0c5259;
text-decoration: none;
}
.spacer a:hover {
color: black;
border: 0px solid black;
padding-top: 133px;
padding-right: 60px;
padding-left:0px;
background-image: url(../images/navi/startseite_hover.gif);
background-position:center;
background-attachment:scroll;
background-repeat:no-repeat;
color: #0c5259;
text-decoration:none;
}
#box_startseite:hover{
position: absolute;
z-index: 100;
}

Alles anzeigen

..ich habe jez position: absolute hinzugefügt aber das hat leider nix gebracht.

..ich hoffe dass es nicht daran liegt, dass es keine block elemente sind. weil ich hab es zuerst mit block-elementen versucht, den gewünschten effekt aber nicht hinbekommen.

gruß

Torben Brodt · 14. Juli 2007, 18:56

Ein Link um einen <ul> ? Das gehört sich aber wirklich nicht.

für den IE-Test müsste ich neustarten. Also probiers einfach mal selber als Blockelement aus.

Quellcode

#box_startseite{
position: absolute;
display:block;
.....
}

Auch wenns anders ausschaut, so haben wir das Problem wenigstens eingeschränkt.

Testest du den Code eigentlich seperat oder in deiner Website? Ich will nur verhindern, dass es vielleicht ein DOM Fehler außenrum ist, der die Browser unterschiedlich handeln lässt. Und teste am besten auch ohne die ganzen zusätzlichen Tags wie <a> und <h2>.

info · 14. Juli 2007, 19:55

hi!

also das mit display: block;

hat leider nichts gebracht.

ich weiß dass sich das nich gehört aber ich hab es trotzdem gemacht wegen diesem hier:

ich wollte folgende navi bauen

verschieden bilder mit dem navitext wie zb "startseite"

der navi text sollte von SUMAs trotzdemgelsen werden köönnenn..un wenn der in bildern steht können die das ja nich lesen.

deswegen wollte ich die beiden bilder sozugagen nur im "hintergrund"
..dann hab ich fleißig mit divs experemenitert um diesen effekt von wechselnden bildern mit dem text im vordergrund überhaupt hinzubekommen (ohne berücksichtigung des z-index)
..mit divs und darum einen a-href tag ging das im IE aber nciht...(verstößt anscheinden auch gegen XHTML 1.0 transitional

...un dann hab ich gedacht, dass ich einfach eine UL nehme mit einme LI, diesen dann "strecke" sodass man das hintergrund bild sehene kann. un dann darum noch einen link baue, dass man nicht nur auf den text mit der maus gehen muss, damit sich das bild im hintergrund verändert, sondern, dass sich das bild auch verändert wenn man auf das bild mit der maus geht. denn das ist am intuitivsten finde ich.

hoffe du hast verstanden was ich meine

gruß und danke für deine mühe

*edit*
den code test ich in der website direkt (die allerdings local ist un nich extern aufem serv im netz)

*edit2*

ich musss jez leider weg un komm heut ned mehr an den rechner.. schaue morgen nochmal rein!!
danke nochmal!

Torben Brodt · 14. Juli 2007, 20:26

ohje.. dann lass uns z-index an dieser Stelle mal vergessen und schau dir mal diese Website an:

parkour-sport.de

Das ganze Navigationselement ist klickbar und im Hintergrund werden Bilder angezeigt, die sich beim Hover austauschen. Dass das Bild hier neber dem Text ist, ist gewollt. Natürlich kannst du den Hintergrund auch hinter das ganze Element legen.

Code:

Quellcode

<td colspan="2" class="nav">
<ul>
<li><a href="/" title="parkour">Home</a></li>
<li><a href="/moves.html">Moves</a></li>
</ul>
</td>

Quellcode

td.nav ul {
margin:0px;
padding:0px;
}
td.nav li {
list-style-type: none;
}
td.nav a {
display: block;
margin:5px;
padding:5px;
padding-left:30px;
border-bottom: 2px solid #909090;
background-image:url('/bg.jpg');
background-position:left center;
background-repeat:no-repeat;
}
td.nav a:hover {
background-image:url('/bg-red.jpg');
background-position:left center;
background-repeat:no-repeat;
border-bottom: 2px solid #ff0000;
}

Alles anzeigen

info · 15. Juli 2007, 13:09

hi

..sowas ähnliches hab ich auch schonmal gemacht....

..nur dies mal wollte ich halt was anderes mit überlappenden navi-elementen wie oben schon beschrieben.

...mit DOM kenn ich mich leider noch nich so gut aus, würde man damit das eher realisieren können? denn javascript würde ich bei einer navi nciht benutzen wollen, auch wenn durch ajax javascript wieder einiges an anhänger gewinnen konnte bin ich davon nicht wirklich überzeugt.

wenn es aber wirklich nciht anders geht muss wohl JS herhalten..was aber wirklich nicht das gelbe vom ei wäre.

heißt dass das ich mein ziel mit überlappenden elementen, die komlett klickbar sind gar nicht per css erreichen kann(zumindest, dass es dann auch im IE klappt)?

gruß

Torben Brodt · 15. Juli 2007, 16:03

DOM ist einfach nur eine Repräsentierung von HTML Code als Baum. Nichts magisches. Wollte damit nur sagen, dass es Sinn macht, das Problem herauszukapseln.

Sry, ich verstehe immer noch nicht für was du den z-index brauchst. Gibts denn irgendwo eine Online Demo oder Screenshots?
Ohne diesen Zusammenhang sehe ich da nur ein Hintergrundbild das ausgetauscht wird (was ja ganz unabhängig vom z-index ist)

Jedenfalls kannst du :hover beim IE<7 nur auf <a> anwenden. Meist kannst du das durch Verwendung eines Links als Blockelement umgehen.

Bei cssplay findest du Browserunabhängige Lösungen:
cssplay.co.uk/menus/dropdown.html

info · 16. Juli 2007, 06:22

hi donut!

ich hab jetzt mal zwei bilder gemacht wie die ganze sache am ende aussehen soll.

ich hoffe dann wird auch klar warum ich den z-index eigentlich doch brauche meiner meinung nach.

bei cssplay hatte ich schon vorbeigeschaut aber keine passende lösung gefunden.

gruß

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Tags