CSS z-index Frage @ tutorials.de: Tutorials, Forum & Hilfe

son gohan · 16.02.09 21:44

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.

Maik · 17.02.09 06:43

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

son gohan · 17.02.09 14:56

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.

son gohan · 19.02.09 17:23

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>

Maik · 19.02.09 17:27

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

mfg Maik

son gohan · 19.02.09 17:30

Zitat von Maik

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

mfg Maik

Weil ich das auf der Homepage CSS Play auch so gesehen habe in vielen Beispielen und es anders ohne Javascript nicht möglich ist um zu setzen.

Maik · 19.02.09 17:54

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

son gohan · 19.02.09 18:05

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.

Maik · 19.02.09 18:09

Du hast hier zwei Möglichkeiten zur Auswahl, um die mangelnde Unterstützung des IE6 bzgl. der allg. :hover-Pseudoklasse auszugleichen:

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

mfg Maik

son gohan · 19.02.09 18:18

Ja ich schau dann mal. Es war schon so knapp meine Lösung.

son gohan · 19.02.09 21:29

Hallo,

ich habe hier ein Beispiel, zwei Kasten mit positioniert mit CSS und z-index, das besondere daran ist der zweite Kasten ist im ersten drine, bekommt es irgenjemand hin durch z-index oder anderen Werten den ersten Kasten trotzdem vor den zweiten erscheinen zu lassen, also den braunen vor den grünen?

Der HTML Code muss aber so bleiben nur das CSS darf man verändern.

Code :

<div style="background:#9F0000;width:200px;height:200px;position:relative;z-index:3">1
 
 
 
<span style="display:block;background:#00FF00;width:200px;height:200px;position:relative;left:20px;">2</span>
 
 
</div>

Maik · 19.02.09 21:34

Hi,

tue mir bitte den Gefallen, und denk einfach mal im stillen Kämmerlein über die Frage nach, wie der Hintergrund des Elternelements den Hintergrund bzw. Inhalt seines Nachfolgeelements überdecken soll.

Achtung Spoiler:
Mission Impossible

Ich war dann mal an dieser Stelle auch so frei, deine letzten drei gestarteten Themen der besseren Übersicht wegen zusammenzuheften, und möchte dich darum bitten, deine weiteren Gedankenspiele bzgl. der Schichtpositionierung hier fortzusetzen, und nicht zu jeder weiteren "z-index-Modellvariante" ein neues Thema ins CSS-Forum zu stellen. Vielen Dank!

mfg Maik

son gohan · 19.02.09 22:32

Ja kann ich verstehen, ich wollt mich gar nicht so lange damit aufhalten und ist doch wieder zu viel geworden.

Also der aktuelle Stand meiner Test ist komisch jetzt habe ich in den CSS Teil einfacch folgendes geschrieben:

Code :

:hover{}

und aufeinmal geht das Menü nicht mehr weg im IE Browser, und ich habe sowas noch nirgendwo gelesen wieso das funktioniert.

Der letzte Schrit ist jetzt das ich es hinbekommen muss ein Tooltip auf die Rechte Seite zu projezieren. Aber ich kapier nicht so recht wieso der Browser mit dem bisjen CSS Code so anders reagiert vor allem weil es doch ziemlich unlogiesch Stück Code ist, wer verstehen will was ich meine kann es ja mal probieren:

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;
}
 
:hover{}
/*-------------------------------------------*/
/*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&auml;chste men&uuml; 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.linkubers table.ubertable td a:hover .info{
display:block;
width:410px;
height:500px;
position:absolute;
margin:0px;
padding:0px;
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>

Lass mich bitte wissen wenn jemand den Tooltip hinbekommt.

Maik · 19.02.09 22:38

Zitat von son gohan

und aufeinmal geht das Menü nicht mehr weg im IE Browser

Kann ich mit deinem Quellcode bei mir im IE7 nicht reproduzieren, und im IE6 öffnet sich ja noch nicht mal das Menü.

Naja, wie auch immer, wenn du weiterhin das "Tooltip"-Rad neu erfinden möchtest, anstatt zu gebrauchsfertigen und praxistauglichen Lösungen zu greifen, tue dir keinen Zwang an

mfg Maik

son gohan · 19.02.09 22:43

Kannst mir noch mal ein Tipp geben wie ich am besten das ganze in verschiedenen IE Browsern testen kann?

In mein IE7 sieht es jetzt aus wie im Bild unten, wenn jetzt jemand über das Wort LRot fährt sollte der Tooltip rechts kommen, wenn ich das noch hinbekomme wars das schon.

Ich brauche halt etwas ohne Javascript wegen meinen strengen Besuchern.

Das ist das Testbild was bei mir im IE7 Browser raus kommt mit dem Code:

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;
}
 
:hover{}
/*-------------------------------------------*/
/*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&auml;chste men&uuml; 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.linkubers table.ubertable td a:hover .info{
display:block;
width:410px;
height:500px;
position:absolute;
margin:0px;
padding:0px;
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>

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Frage zu index.php?section=index

Kurze Frage zu INDEX

Frage zu: "Navigation über die URL "index.php?section=index"

Frage zu "index.php?section=index" Varianten

CREATE INDEX frage

E-Mail:

Abonnieren Abbestellen