z-Index

willytyp

Hallo ihr fleissigen Helfer,

ich hab da ein Problem mit dem z-Index.

Zum Verständnis hier mal der Quellcode

in HTML:

HTML

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Titel der Webseite </title>


<link href="home.css" type="text/css" rel="stylesheet">


</head>
<body>
    <img src="HTML Seite/Images/Kopfzeile.jpeg" width="1000" height="100" style="border: 0px;" />


    <img id="hermann" src="HTML Seite/Images/Hermann.png"  width="105" height="157" style="border: 0px;" />


  <div id="Menu">
    <div class="oben">
      Home
      <a class="untenX" href="#">Kontakte</a>
      <a class="unten" href="#">Vorstand</a>
      <a class="unten" href="#">Kontaktformular</a>
      <a class="unten" href="#">Anfahrt</a>
      <a class="unten" href="#">Gästeliste</a>
      <a class="unten" href="#">Chronik</a>
    </div>
    <div class="oben">
      Rubrik 2
      <a class="untenX" href="#">Unterpunkt 1</a>
      <a class="unten" href="#">Unterpunkt 2</a>
    </div>
  </div>
</body>
</html>

Alles anzeigen

und hier den dazugehörigen CSS Code:

Code

img
{
/*top: 15px;
left: 25px; */
margin: 0px 60px;
}
body
{
background: #008000;
/*height: 2000px;*/
}


#hermann{
position: absolute; top: 250px ; left: 50px;
z-index: 20;
}


#Menu             { top: 50px; left: 30px; margin: 20pt 20pt; z-index: 100; }
#Menu .oben       { float: left; width: 200px; height: 15pt; overflow: hidden; font-weight: bold;
                    text-align: center; background: #ccee99; color: #333333; border: 1px solid #555555; }
#Menu .oben:hover { height: auto; background-color: #99aa66; color: #ffffff; }
/*a.untenX          { margin-top: 2pt; }*/
a.unten, a.untenX { display: block; width: auto; padding: 2pt 0; background: #ccee99; text-decoration: none; color: #333333; }
a:visited.unten, a:visited.untenX { background: #ccee99; }
a:hover.unten, a:hover.untenX { background: #ffff99; }

Alles anzeigen

Mein Problem ist nun, das das aufgeklappte Menü über das Bild gehen soll und nicht dahinter.

Die anderen kosmetischen Dinge bekomme ich selber auf die Reihe.

Nur dieser z-Index

Vielen Dank im vorraus
Willytyp

Gastl

Dann gib dem Menü einen kleineren Index als dem Bild.

willytyp

Hallo Gastl,
menue = z-Index 10
Bild = z-Index 100

kein Erfolg, wie vorher.

ich danke dir trotzdem für den Tipp

willytyp

djheke

Wer hat dir denn den Trick mit der Navigation gezeigt? Also, eine UL-Liste ist hier besser und verzichte auf absolute Positionierungen. Egal.
Du musst im Selektorblock #menu noch ein { position:relative; ... } notieren. Z-Index-Angabenkannst du dir schenken.

willytyp

Hi djheke,
vielen, vielen Dank für den Tipp.
Die Navigation habe ich aus einem schlauen Buch. Na ja....:-(
Ich hatte schon aufgegeben und das Menüe umgestellt. Befriedigt hat mich das allerdings nicht.
Dank deinem Tipp sieht meine Welt schon wieder viel besser aus.

LG
Willytyp

Tags