dwex
Erfahrenes Mitglied
Hallo Leute,
ich "bastle" nun schon seit geraumer Zeit an meinem Problem und konnte es bisher nicht lösen.
Wie man auf dem Screenshot "moderner_browser" sieht soll das Aufklappmenü natürlich vor der Contentbox stehen und nicht wie im Screenshot "ie6" zu sehen offenbar dahinter.
Dazu verwende ich folgenden Quellcode:
sowie nachfolgendes CSS:
Hat jemand eine Idee was ich hier falsch mache?
Vielen Dank für euer Hilfe im voraus!
ich "bastle" nun schon seit geraumer Zeit an meinem Problem und konnte es bisher nicht lösen.
Wie man auf dem Screenshot "moderner_browser" sieht soll das Aufklappmenü natürlich vor der Contentbox stehen und nicht wie im Screenshot "ie6" zu sehen offenbar dahinter.
Dazu verwende ich folgenden Quellcode:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>
<title>Unterseite 1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="./templates/modulefinder/editor.css" rel="stylesheet" type="text/css" />
<link href="./templates/modulefinder/template.css" rel="stylesheet" type="text/css" />
<script src="./modules/droplets/js/mdcr.js" type="text/javascript"></script>
<!--[if lte IE 6]>
<style type="text/css" media="all">
body {behavior: url("./templates/modulefinder/csshover.htc");}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="navcontainer">
<div id="nav">
<ul id="header_menu" class="menu">
<li><a href="." class="menu-first navlev0">Home</a></li>
<li><a href="./produkte.php" class="menu-expand menu-parent navlev0">Produkte</a>
<ul class="ullev1">
<li><a href="./produkte/unterseite-1-1.php" class="menu-current menu-first navlev1">Unterseite 1-1</a></li>
<li><a href="./produkte/unterseite-1-2.php" class="menu-expand menu-sibling navlev1">Unterseite 1-2</a>
<ul class="ullev2">
<li><a href="./produkte/unterseite-1-2/unterseite-1-2-1.php" class="menu-first navlev2">Unterseite 1-2-1</a></li>
<li><a href="./produkte/unterseite-1-2/unterseite-1-2-2.php" class="menu-expand menu-last navlev2">Unterseite 1-2-2</a>
<ul class="ullev3">
<li><a href="./produkte/unterseite-1-2/unterseite-1-2-2/unterseite-1-2-2-1.php" class="menu-expand menu-first navlev3">Unterseite 1-2-2-1</a>
<ul class="ullev4">
<li><a href="./produkte/unterseite-1-2/unterseite-1-2-2/unterseite-1-2-2-1/unterseite-1-2-2-1-1.php" class="menu-first navlev4">Unterseite 1-2-2-1-1</a></li>
<li><a href="./produkte/unterseite-1-2/unterseite-1-2-2/unterseite-1-2-2-1/unterseite-1-2-2-1-2.php" class="menu-last navlev4">Unterseite 1-2-2-1-2</a></li>
</ul>
</li>
<li><a href="./produkte/unterseite-1-2/unterseite-1-2-2/unterseite-1-2-2-2.php" class="menu-last navlev3">Unterseite 1-2-2-2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="./produkte/unterseite-1-3.php" class="menu-sibling menu-last navlev1">Unterseite 1-3</a></li>
</ul>
</li>
<li><a href="./kontakt.php" class=" navlev0">Kontakt</a></li>
<li><a href="./aktuelle-angebote.php" class=" navlev0">Aktuelle Angebote</a></li>
<li><a href="./impressum.php" class="menu-last navlev0">Impressum</a></li>
</ul>
</div>
</div>
<div id="content">
Dieser Text ist im Blocksatz geschrieben damit wir die äußeren Begrenzungen des Textflusses sehen können. Die Informationen in diesem Text sind völlig aus der Luft gegriffen und haben keinen informativen Wert. Wir schreiben hier einfach ein paar Zeilen welche keinen Sinn ergeben und wiederholen diese einfach mehrmals um mehr Text zu zeigen. Dieser Text ist im Blocksatz geschrieben damit wir die äußeren Begrenzungen des Textflusses sehen können. Die Informationen in diesem Text sind völlig aus der Luft gegriffen und haben keinen informativen Wert. Wir schreiben hier einfach ein paar Zeilen welche keinen Sinn ergeben und wiederholen diese einfach mehrmals um mehr Text zu zeigen. Dieser Text ist im Blocksatz geschrieben damit wir die äußeren Begrenzungen des Textflusses sehen können. Die Informationen in diesem Text sind völlig aus der Luft gegriffen und haben keinen informativen Wert. Wir schreiben hier einfach ein paar Zeilen welche keinen Sinn ergeben und wiederholen diese einfach mehrmals um mehr Text zu zeigen.<br />
</div>
</div>
</body>
</html>
CSS:
html, body {
/*background: #c7cad3 url(img/bodybg.jpg) repeat-x;*/
margin: 0;
height:100%;
background-color: silver;
}
#container {
width: 960px;
background-color: silver;
position:absolute;
left: 50%;
top: 10px;
bottom: 10px;
margin-left: -480px;
}
#navcontainer {
background-color:black;
/*height: 30px;*/
position:absolute;
top: 100px;
left: 0px;
right: 0px;
}
#content {
position: absolute;
top: 190px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: white;
overflow:auto;
clear:both;
padding: 20px;
text-align: justify;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Layout Blocks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#main { /* Holds the page items in place */
width: 850px;
min-height:99%;
margin: 0 auto 0 auto;
padding: 0;
background: #fff;
}
#header {
height:70px;
background-image: url(img/header-logo.png);
background-repeat: no-repeat;
background-position: 0px 10px;
}
* html #header {clear:both;height:70px;} /* ie6 misbehaves again */
#pageheader {margin:16px 120px 0 280px;}
#pageheader strong {
font-size: 16px;
}
#breadcrumbs {
padding:10px;
background: #fff url(img/breadcrumbsbg.gif) repeat-x;
clear:both;
}
#breadcrumbs span {
background: transparent url(img/link.gif) no-repeat;
padding: 6px 2px 0px 12px; font-weight: bold; }
#breadcrumbs a {
border-bottom: 1px dotted #3b4750;
text-decoration: none;
}
#breadcrumbs a:hover {border-bottom: 1px solid #3b4750;}
#breadcrumbs .menu-current a{
color: #000000;
}
#infobox { /* Currently holds the login box */
float: left;
width: 180px;
}
#content { /* main content from the WYSIWYG goes in here */
/*margin: 20px 0 0 190px;
padding: 4px 10px 14px 0;
clear: right;*/
}
* html #contentbox #content {text-align:left;} /* ie6 misbehaves */
* html #contentbox #content table {width: 90%;} /* ie6 fix to stop tables being pushed below floats */
.clearcontent {height:60px; clear:both}
#footerbox {margin: -60px auto 0 auto; height:60px; width: 850px; background: #ffffff;}
#footer {
font-size: 90%;
color: #666;
margin: 10px 5px 10px 5px;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Search Box in header */
#search_box {
color: #fff;
text-align: right;
}
#search_box {
float: right;
clear: right;
width: 150px;
padding:10px 0 0 0;
}
#search_box .searchstring { width:100px;
border: 1px solid #333;
}
#prevnext {
float:right;
margin-top:0px;
margin-right:5px;
color: #fff;
font-weight: bold;
}
#prevnext a {color: #fff;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#### Header Menu #####
#######################
Horizontal Drop-Down Menu based off :
http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#navContainer {height:30px; display:block;clear:both; background: #c7cad3 url(img/navbg.gif) repeat-x;}
/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~ */
ul.menu, li.menu {
list-style-type: none;
margin: 0px;
padding: 0px;
}
/* Header menu */
#header_menu {position: absolute; margin-left: 20px;}
#header_menu li {line-height: normal;}
ul#header_menu {z-index: 10; clear: both;}
#nav {
float:left;
height: 30px;
border: 0;
padding:0;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: auto;
/*
(Disappearing List-Background)
http://www.positioniseverything.net/explorer/ie-listbug.html
*/
position: relative; /* Fix the Stupid IE6 Bug */
}
/* Root Level Link Formatting */
#nav ul li {float: left; color: #fff; text-align: center; font-weight: normal; }
#nav ul li a {display: block; /*background: url(img/navbgl1.gif)*/ background-color:black; no-repeat; padding: 8px 10px 7px 10px; color: #fff; text-decoration: none; font-weight: bold; }
/* Root Level link hover */
#nav ul li a:hover, #nav li a:focus, #nav li a:active, #nav ul li a.active, #nav a.menu-current {/*background: url(img/navbgl1hi.gif);*/ background-color: red; color: #fff;}
#nav a.menu-parent {/*background: url(img/navbgl0parent.gif);*/ background-color: red; color: #fff;}
/*Current page Customisations*/
#nav a.menu-current {font-weight: bold;}
/* 2nd Child menu */
#nav .menu li ul {position: absolute; width: 11em; margin: 0; display: none; text-transform: none; border-bottom: 1px solid #3b4750; border-left: 1px solid #3b4750; border-right: 1px solid #3b4750; font-size: 100%; background: black /*url(img/ulbg1.jpg)*/ no-repeat;}
#nav .menu li ul li {width: 11em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;}
#nav .menu li ul li a {width: 10.5em; padding: .3em .1em .3em .4em; color: #fff; border-top: 1px solid #3b4750; font-weight: normal; background: none;}
/* 2nd Child link hover */
#nav .menu li ul a:hover, #nav .menu li ul a.menu-current { background: red /*url(img/navbgl1hi.gif)*/; color:#fff;}
#nav .menu li ul a.menu-parent {background: red /*url(img/navbgl1parent.gif)*/; color:#fff;}
/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;}
#nav .menu li ul ul { display: none;}
#nav .menu li:hover ul ul, #nav .menu li.subMenu ul ul {display: none;}
#nav .menu li:hover>ul, #nav .menu li li:hover>ul, #nav .menu li.subMenu>ul, #nav .menu li li.subMenu>ul {display: block; z-index: 1000;}
/* 3rd Child Menu Appreances */
#nav .menu li ul li ul { margin: 5px 0 0 0%; z-index: 9999; background: black /*url(img/ulbg2.jpg)*/ no-repeat;}
#nav .menu li ul li ul li {width: 11em;}
#nav .menu li ul li ul li a { width: 10.5em;}
/* 4rd Child Menu Appreances */
#nav .menu li ul li ul li ul { width: 11em; background: black /*url(img/ulbg3.jpg)*/ no-repeat;}
#nav .menu li ul li ul li ul li { width: 11em; }
#nav .menu li ul li ul li ul li a { width: 10.5em;}
/* Positioning the Pop-out Drops */
#nav li {position: relative;}
#nav ul ul ul {
position: absolute;
top: 1px;
left: 100%;
}
#nav li:hover {
z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
/* end menu */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Customise the Login Box */
#login-box { background: #eee; text-align: center; line-height: 120%; margin: 1em 5px 0.3em 5px; border: 1px solid #ddd;}
#login-box fieldset {border:0; text-align:center;}
#login-box legend {
font-size: 90%;
color: #333;
}
.username {color: #009;} /* Color of name when logged in*/
.topboxbody {font-size:0.8em;padding:2px;}
#login-box input {
display:block;
font-size: 10px;
margin: 2px auto 1px auto;
width: 100px;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Custom Classes (Re-useables)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Float containers fix: */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* \*/
* html #clearfix {
height: 1%;
}
/* */
.stealth {visibility:hidden; display:none;} /* hides from normal css enabled browsers */Hat jemand eine Idee was ich hier falsch mache?
Vielen Dank für euer Hilfe im voraus!
