✔ CSS z-index Frage

son gohan

son gohan

Erfahrenes Mitglied
z-index Problem div Tag und img Tag

Hallo,

gibt es viellleicht beim Benutzen der CSS Eigenschaft z-index im Zusammenhang mit HTML div Tags Probleme?

Ich habe unten ein Beispielbild von einem Versuch wo ein Bild zu sehen ist das mit css position:absolute als Tooltip platziert wird sobald man mit der Maus über das kleinere Bild fährt erscheint dieses als größeres Bild davon.

Aber das Bild erscheint immer hinter dem div tag darunter, man sieht im Bild unten wie ich es meine. Ich habe schon viel mit z-index rumgespielt und frage mich momentan einfach ob es generelle Probleme gibt beim benutzen von z-index und HtML img Tags?

Wenn nicht kann es vielleicht Zusammenhänge zwischen dem Benutzen von position:absoltue und position:relative und z-index geben?

Normal muss ja das was den größeren z-index hat im Vordergrund stehen, ich frage mich aber wieso es nun hier genau nicht so klappt in meinem Versuch.
 

Anhänge

  • floatproblem.jpg
    floatproblem.jpg
    11,2 KB · Aufrufe: 167
Zuletzt bearbeitet:
Soviel zur Theorie und deinen Gedankenspielen.

Und nein, es gibt "normalerweise" keine Probleme mit der Anwendung der z-index-Eigenschaft auf das div- und/oder img-Element, wie dieses Beispiel verdeutlicht, wenn die Elemente neben z-index auch eine Angabe zur Positionsart position (absolute oder relative) besitzen, denn ohne sie greift die Schichtpositionierung überhaupt nicht.

Von daher wäre hier dein Quellcode aufschlußreicher, weshalb die Schichtpositionierung nicht wie gewünscht eingehalten wird.

mfg Maik
 
Man betrachte mein Bild oben, das obere blaue div Tag hat z-index:1; gehabt, das Bild war in diesem div tag drine und hat z-index:2; gehabt, und das untere div Tag welches der andere blaue Kasten ist, der hat auch z-index:1; gehabt.

Gelöst wurde das Problem indem ich dem Kasten oben den z-index:2; gegeben habe, ansonsten hätte es nicht geklappt, weil das Bild in diesem Kasten mit drine war.

Was ich versuchte die ganze Zeit war dem Bild ein größeren z-index zu geben und es klappte nicht weil es im Kasten drine war mit kleinerem z-index.
 
CSS Menü

Hallo,

ich habe ein CSS Menü das im Mozilla funktioniert aber im Internet Explorer nicht.

Wenn man im Menü auf Link geht, dann öffnet sich unten ein Dropdownmenü und geht man auf ein Link im Dropdownmenü, sollte ein roter Kasten im Vordergrund erscheinen. Im Internetexplorer geht das Menüplötzlich wieder zu, ich weis nicht woran es liegt habe auch das CSS validiert und es war korrekt.

Ich muss noch erwähnen das HMTL ist nicht valide, weil ein a Tag in einem anderen nicht valide ist aber man anders den IE Browser nicht mit hover bediehnen kann. Daher habe ich auch viele blockelemente innerhalb von inline elementen, also bitte nicht meckern das ist mir schon klar.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>Z-index Test</title>

<style type="text/css">
.gruenekasten{
width:645px;
height:500px;
position:relative;
border:10px solid #00DF00;
}


.gelbekasten{
width:217px;
border:10px solid #FFFF00;
}

.grauekasten {
display:block;
margin:0px;
padding:0px;
background:#9F9F9F;
}


/*-------------------------------------------*/
/*wird benutzt wegen IE Browser und hover    */
/*-------------------------------------------*/
a.hauptlink,
a.hauptlink:link,
a.hauptlink:active,
a.hauptlink:visited {display:inline;text-decoration:none;font-size:14px;}
a.hauptlink:hover   {display:inline;text-decoration:none;}



/*----------------------------------------------------------------------*/
/*Link mit blaue hintergrund, bei hover geht unten das nächste menü auf */
/*----------------------------------------------------------------------*/
a.hauptlink         span.linkk,
a.hauptlink:link    span.linkk,
a.hauptlink:visited span.linkk {display:block;background:#00FFFF;}
a.hauptlink:hover   span.linkk {background:#fff;}
a.hauptlink:active  span.linkk {background:#fff;}
a.hauptlink:focus   span.linkk {background:#fff;}



/*--------------------------------------------*/
/*Tabelle kasten per tooltip erscheinen lassen*/
/*--------------------------------------------*/
a.hauptlink         .weisertoolkasten,
a.hauptlink:link    .weisertoolkasten,
a.hauptlink:visited .weisertoolkasten {display:none;background:#fff;position:absolute;left:-1000px;}
a.hauptlink:hover  .weisertoolkasten{display:block;height:160px;position:relative;left:0px;}
a.hauptlink:active .weisertoolkasten{display:block;height:160px;position:relative;left:0px;}
a.hauptlink:focus  .weisertoolkasten{display:block;height:160px;position:relative;left:0px;}



/*--------------------------------------------*/
/*Tabelle kasten per tooltip erscheinen lassen*/
/*--------------------------------------------*/
.ubertable{
height:150px;
background:#FF9F00;
}
table.ubertable td  {width:40px;height:40px;border:4px solid #fff;}
table.ubertable td a{display:block;text-decoration:none;width:40px;height:40px;border:1px solid #fff;}

a.hauptlink table.ubertable td a:hover .info
{display:block;width:410px;height:400px;position:absolute;border:1px solid #9F9F9F;background:#DF0000;top:130px;left:30px;z-index:3;}


/*-------------------------------------------*/
/*rechte kasten per tooltip erscheinen lassen*/
/*-------------------------------------------*/
a.hauptlink         span.rechtekasten,
a.hauptlink:link    span.rechtekasten,
a.hauptlink:visited span.rechtekasten {display:none;width:400px;height:400px;position:absolute;left:-1000px;background:#e3edf2;}
a.hauptlink:hover   span.rechtekasten {display:block;top:0px;left:240px;z-index:1;}
a.hauptlink:active  span.rechtekasten {display:block;top:0px;left:240px;z-index:1;}
a.hauptlink:focus   span.rechtekasten {display:block;top:0px;left:240px;z-index:1;}










</style>


</head>
<body>
<div class="gruenekasten">
<div class="gelbekasten">



<a class="hauptlink" href="#nogo">







<span class="linkk">Link</span>
<span class="grauekasten">


<span class="weisertoolkasten">
<table class="ubertable" cellspacing="0" cellpadding="0">
<tr>
 <td><a href="#kk">L<span class="info">Rot</span></a></td>
 <td><a href="#kk">L<span class="info">Rot</span></a></td>
 <td><a href="#kk">L<span class="info">Rot</span></a></td>
 <td><a href="#kk">L<span class="info">Rot</span></a></td>
</tr>
</tr>
</table>
</span>
<span class="rechtekasten">rechte kasten blau</span>
</span>






</a>




</div>
</div>

</body>
</html>
 
Wenn dir klar ist, dass Inline-Elemente keine Block-Elemente enthalten dürfen, warum handelst du dann so?

mfg Maik
 
Wenn du hier schon Stu Nicholls' Demos als "Ausrede" anführst, hast du auch mal im Detail nachgeschaut, wie der Autor diese Tabellen in seinen CSS-Menüs (ausschliesslich für den IE6) eingebunden hat?

Davon seh ich in deinem Quellcode weit und breit nichts.

mfg Maik
 
Inspirieren lassen habe ich mich schon vom Herrn Stu das stimmt, aber ich habe mir es nur oberflächlich angeschaut und nicht sein Code benutzt sondern was eigenes gebaut.

Es gefällt mir persöhnlich nicht das er und andere so viele Brücken versuchen zu bauen mit irgendwelchen Conditional Comments oder ähnlichem, fakt ist das auch er für den IE Explorer Code benutzen musste der nicht valide ist weil er Tabellen und ähnlichen mit einem inline Element einem a Tag umgeben musste.

Daher habe ich mir gedacht wenn das nun so ist wozu noch lange rumheulen dann mach ich das auch und zwar so alleine wie weit ich komme ohne diese ganzen Brücken.

Ich habe viel herum probiert und das Menü das ich hier vorgestellt habe hat auch weitestgehend im Internet Explorer und Mozilla mit gemacht, aber der letzte Schlief den ekamm ich nicht mehr hin.

Im Internet Explorer funktioniert das Menü nicht.

Soviel zur Geschichte, ich weis also nicht wirklich wie der Stu das macht und will es gerne selbst lernen, ich habe ja jetzt hier ein klares Beispiel das ich soweit alleine hinbekommen habe aber am Ende fehlen jetzt doch etwas Kräfte nach einer Endlosen Nacht herumprobieren.

Also das ist schon von Grund auf anders Stu sein Code da müsste ich mein ganzes Menü unnötig neu bauen wenn ich mich jetzt an im weiter orientieren würde. Ich glaube ich lerne mehr wenn ich mein eigenes Design Problem hier gelöst bekomme als mich mit seinen Brücken zu beschäftigen.
 
Du hast hier zwei Möglichkeiten zur Auswahl, um die mangelnde Unterstützung des IE6 bzgl. der allg. :hover-Pseudoklasse auszugleichen:

  1. Stu Nicholls' praxiserprobte Technik mit den Conditional Comments, die sehr wohl valide ist.
  2. Der Einsatz von Javascript.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück