aufklappbares Menü öffnet im Hintergrund statt im Vordergrund

godfather_al · 16. November 2008

Hallo zusammen,

versuche mich gerade an einer kleinen Linkseite, doch das automatisch aufklappbare Menü öffnet sich leider im Hintergrund, wie kann ich festlegen, dass es den Inhaltsbereich überlagern soll und nicht umgekehrt ?

so sieht es jetzt aus: http://www.wall-street-city.com/bernd

Vielen Dank vorab für Eure Hilfe.

Alex

HTML:

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Have-A-Nice-Car.de</title>
<style type="text/css"> @import url(layout.css);</style>
</head>

<body>

<div id="centerBox">

<div id="kopf"></div>

<div id="navigation_links">

<ul>
<li><a href="#"> Suchen </a>
<ul class="sub">
<li><a href="http://www.google.de"> Google </a></li>
<li><a href="http://de.altavista.com"> Alta Vista </a></li>
<li><a href="http://www.yahoo.de"> Yahoo </a></li>
<li><a href="http://www.telefonbuch.de"> Telefonbuch </a></li>
<li><a href="http://www.pizza.de"> Pizza </a></li>
</ul>
</li>
</ul>

<ul>
<li><a href="#"> Zeitschriften </a>
<ul class="sub">
<li><a href="http://www.zdnet.de"> ZD-Net Online </a></li>
<li><a href="http://www.chip.de"> CHIP Online </a></li>
<li><a href="http://www.computerbild.de"> Computer Bild </a></li>
<li><a href="http://www.pcwelt.de"> PC-Welt </a></li>
<li><a href="http://www.heise.de/ct"> CT Magazin </a></li>
<li><a href="http://www.marktplatz-online.de"> Martkplatz </a></li>
<li><a href="http://www.announce.de"> Annonce </a></li>
<li><a href="http://www.tvmovie.de"> TV Movie </a></li>
<li><a href="http://www.film.de"> Film.de </a></li>
<li><a href="http://www.pcgames.de"> PC Games </a></li>
</ul>
</li>
</ul>

<ul>
<li><a href="#"> MP3s & Links </a>
<ul class="sub">
<li><a href="http://www.kickme.de/mp3-jewels"> Jewels MP3 </a></li>
<li><a href="http://kessiannorb.freeweb-hosting.com/mp3g.html"> MP3 Galaxy </a></li>
<li><a href="http://trinedy.fateback.com/index11.htm"> MP3 Trinedy </a></li>
<li><a href="http://mp3dreamcenter.6x.to/"> MP3 Dreamcenter </a></li>
<li><a href="http://www.raw.to"> Syndicate Links </a></li>
<li><a href="http://www.canna.to"> Canna MP3 </a></li>
<li><a href="http://www.hitbit.de"> Midis </a></li>
</ul>
</li>
</ul>

<ul>
<li><a href="#"> Treiber </a>
<ul class="sub">
<li><a href="http://www.viaarena.com"> Via </a></li>
<li><a href="http://www.nvidia.com"> Nvidia </a></li>
<li><a href="http://www.soundblaster.com"> Soundblaster </a></li>
<li><a href="http://www.msi-computer.de"> MSI </a></li>
<li><a href="http://www.plextor.be"> Plextor </a></li>
<li><a href="http://www.treiber.de"> Treiber </a></li>
<li><a href="http://www.tomshardware.com/de/testberichte/Komponenten,1/"> Toms Hardware </a></li>
<li><a href="http://www.bios-info.de"> BIOS </a></li>
<li><a href="http://www.codec-download.de"> Codecs </a></li>
</ul>
</li>
</ul>

</div>

<div id="inhalt"><h1>...</h1><p></p>

</div>

<div id="navigation_rechts">

<script type="text/javascript" language="javascript" src="http://www.donnerwetter.de/wetter/net/boxregio.mv?typ=2&plz=52428&color_bg=FFFF3C&color_hi=000000&color_txt=000000&width="></script>
<noscript>JavaScript ist deaktiviert - leider sehen Sie hier kein aktuelles Wetter. <a href="http://www.donnerwetter.de" target="_blank">www.Donnerwetter.de</a></noscript>

<br/><br/>

<a href="http://www.map2.de" target="_blank" <img src="bilder/map24.gif"></a>

</div>

</body>

</html>

CSS:

body, html, #navigation_links, #navigation_oben, #kopf, #inhalt, #centerbox {margin: 0; padding: 0;}

body {font: 100.01%; font-family: vineta bt; margin: auto; background-color: black; text-align: center;}

#centerBox {
position: absolute;
left: 50%;
width: 1200px;
height: 700px;
margin-left: -600px;

top: 50%;
margin-top: -400px;
border: 0px solid #000;
background-color: #FFFF3C;
}

#kopf {
position: absolute;
left: 0px;
width: 1200px;
top: 0px;
height: 50px;
border: 1px solid #000;
background-image: url();
background-repeat: no-repeat;
background-color: blue;
text-align: left;
}

#navigation_links {
margin:0;
position: absolute;
left: 0%;
width: 200px;
top: 50px;
height: 700px;
border: 1px solid #000;
background-color: blue;
text-align: center;
}

#navigation_rechts {
margin:0;
position: absolute;
left: 1000px;
width: 200px;
top: 50px;
height: 700px;
border: 1px solid #000;
background-color: blue;
text-align: center;
}

#inhalt {
position: absolute;
left: 300px;
width: 700px;
top: 50px;
height: 700px;
border: 1px solid #000;
background-color: blue;
text-align: left;
}

a img {border: none;}

p {color: rgb(0, 0, 0); font-family: vineta bt; font-size: 1.0em; margin: 0px 25px 0 5px;}

p1 {color: rgb(0, 0, 0); font-family: vineta bt; font-size: 1.0em; margin: 15px 25px 0 25px;}

p2 {color: rgb(0, 0, 0); font-family: vineta bt; font-size: 0.5em; line-height: 0.6em; margin-left: 55px;}

h1 {color: rgb(0, 0, 0); font-family: vineta bt; font-weight: bold; font-size: 1.2em; margin: 5px 5px; padding: 5px 0 0;}

h2 {color: rgb(0, 0, 0); font-family: vineta bt; font-size: 1.0em; text-align: center; margin: 5px 0px; padding: 0px 0 0;}

#navigation_links a:link, #navigation_links a:visited {text-align: center; color: black; background-color: #FFFF3C; font-family: vineta bt; font-size: 1.0em; text-decoration: none; display: block; margin-top: 2px; padding: 0px; padding-left: 1px;}

#navigation_links a:hover {color: black; background-color: #FFFF3C; font-family: vineta bt;}

#inhalt ul {list-style-type: none; font-family: vineta bt; font-size: 0.9em; line-height: 1.5em; margin: 10px 0px 0px 10px; padding:0; padding-left:15px;}

#inhalt ul li {display: inline; margin-top: 0px;}

#inhalt a:link, #inhalt a:visited {color: #FFFF3C; background-color: black; font-family: vineta bt; font-size: 0.9em; text-decoration: none; display: block; border-right: 5px solid #FFFF3C; float: left; padding-left: 15px; padding-right: 15px;}

#inhalt a:hover {color: black; background-color: #FFFF3C; font-family: vineta bt;}

#navigation_links ul {list-style: none;}

#navigation_links li ul.sub {display:none;}

#navigation_links li:hover ul.sub {display: block; position: absolute; left: 200px; top: 10px; width: 180px; margin: 0 0 0 0; list-style: none; margin: 0; padding: 10px; background: #FFFF3C; border: 1px solid #000000;}

Maik · 16. November 2008

Hi,

z-index regelt die Schichtpositionierung der einzelnen Ebenen, je höher der Wert, desto weiter oben/vorne liegt die Ebene - ohne diese Angabe liegt ansonsten das im HTML-Quellcode zuletzt genannte Element ganz oben.

Und nutze bitte in zukünftigen Beiträgen die Highlight-Tags, wenn du hier Quellcode zeigst, sie erleichtern uns das Lesen ungemein - vielen Dank!

mfg Maik

aufklappbares Menü öffnet im Hintergrund statt im Vordergrund

godfather_al

Mitglied

Maik

Neue Beiträge