Hi,
ich habe einfach zum ausporbieren und lernen eine Navigation durch eine Liste per CSS erstellt (mithilfe verschiedener Tutorials und Beispielen aus dem INet), inklusive verdeckten bzw. aufklappenden Submenü. Soweit funktioniert nach einigen Problemen alles ganz gut, allerdings wird das Submenü durch das Hauptmenü der nicht aktiven Punkte .überdeckt. Dies tritt im IE 7 bzw. in der Browservorschau von Phase5 auf, im FF ist es kein Problem.
Ich habe den Code einfach auf das wichtigste gerafft, normal gehören da noch feststehender Header und Footer dazu. Ich kann im Moment die Datei leider nicht hochladen (geht von Arbeit einfach nicht und zuhause ist bis nächsten Monat kein INet verfügbar).
P.S. nicht wundern, ich kommentiere meine Testprojekte immer so stark aus.
ich habe einfach zum ausporbieren und lernen eine Navigation durch eine Liste per CSS erstellt (mithilfe verschiedener Tutorials und Beispielen aus dem INet), inklusive verdeckten bzw. aufklappenden Submenü. Soweit funktioniert nach einigen Problemen alles ganz gut, allerdings wird das Submenü durch das Hauptmenü der nicht aktiven Punkte .überdeckt. Dies tritt im IE 7 bzw. in der Browservorschau von Phase5 auf, im FF ist es kein Problem.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Feststehende Kopf- und Fußzeile</title>
<style type="text/css">
/* ############# Grunddesign ############### */
/* gestaltet kompletten Body Bereich */
body
{
position:absolute;
background:#000000; /* schwarz*/
behavior: url("Stylesheet/csshover3-source.htc");
}
html, body
{
top:0; left:0; right:0;
min-height:100%;
margin:0;
padding:0;
width:100%;
font: 85% arial, hevetica, sans-serif; /* Textformat */
color: blue; /* Textfarbe */
background-image: url(Stylesheet/1.gif); /* hintergrundbild */
overflow:auto;/* scrollbalken wenn benötigt */
}
/* ############# Inhaltsbereich ############# */
#content
{
margin:0;
padding-top:4.85em;
padding-left:15em;
padding-bottom:3em;
z-index:0; /* als unterste Ebene deklariert */
overflow:auto /* scrollbalken wenn benötigt */
}
/* ################ Menü ################# */
#Navigation
{
position:fixed;
top:5em;
left:.5em;
width:40mm;
padding:.5em;
background-color: #FBF2B7; /* Hintergrundfarbe der Navi */
}
/* Einstellungen für die unsortierte Liste */
ul#Navigation
{
width:35mm; /* Breite */
margin: .3em; padding: .7em; /* Abstand der Navi links und rechts*/
border: 0px; /* Randstärke der Navi */
background-color: #FBF2B7; /* Hintergrundfarbe der Navi */
z-index:10;
}
/* Einstellungen für die Listeneinträge */
ul#Navigation li
{
position:relative;
list-style: none; /* Liste ohne Punkt */
margin: 0.5em; padding: 0.05em; /* Abstand der Listeneinträge */
}
/* Einstellungen für die Unterpunkte*/
ul#Navigation li ul
{
position: absolute;
top: 5px;
left: 2em;
display:none; /* Submenü ausblenden */
z-index:50;
}
/* Einstellungen für die Listeneinträge bei Mouseover */
ul#Navigation li:hover ul, li:active, li:focus
{
display:block; /* Submenü einblenden */
z-index:50;
}
/* Einstellungen für die Zweite Ebene */
ul#Navigation li ul li
{
margin: 0.1em 0; /* Abstand der Unterpunkte */
}
/*Einstellungen der Hyperlinks - Button*/
ul#Navigation a, ul#Navigation span
{
display:block; /* der gesamte Bereich als Hyperlink */
width: 100%; /* gesamte Breite nutzen */
padding: 0.1em; /* Größe des Bereichs außerhalb der Schrift */
text-decoration: none; /* keine Linkunterstreichung*/
font: 1em;
font-weight:bold; /* fette Schrift */
border: 1px solid #A28520; /* Umrandung */
border-left-color: #D9B742; border-top-color: #D9B742; /* links u. oben Randfarbe */
color: black; background-color: #FDFCCE; /* Schrift- und Hintergrundfarbe */
}
/*Einstellungen der Hyperlinks bei Mouseover*/
ul#Navigation a:hover, ul#Navigation span
{
border-color: white; /* Linkfarbe Mouseover */
border-left-color: #F8CF7C; border-top-color: #F8CF7C;
/* Randfarbe links und oben Mouseover */
color: #D69714; background-color: #FDFCCE;
/* Schrift- und Hintergrundfarbe Mouseover */
}
/* +++++ Einstellungen für den IE unter Version 8 ++++ */
/* Der IE soll das Element breiter darstellen,*/
/* da margin und padding hier von der Breite abgezogen wird! */
* html #Navigation
{
margin:0;
width:10.5em;
}
* html #Navigation
{
position:absolute;
}
/*--nur für IE 7 erkennbar -> +* -*/
* + html #Navigation ul li
{
float: left;
width: 100%;
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
* html #Navigation ul li
{
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body
{
behavior: url("Stylesheet/csshover3-source.htc");
font-size: 100%;
}
*html #Navigation ul li a
{
height: 1%;
}
/* Korrekturen fuer IE 5.x */
* html ul#Navigation
{
width: 40mm;
w\idth: 40mm;
padding-left: 0;
padd\ing-left: 0.3em;
}
* html ul#Navigation li ul li
{
margin-left: 0.1em;
ma\rgin-left: 0;
}
/* ######### Nur für den MS Internet Explorer ############ */
* html, * html body
{
overflow:hidden;
bottom:0;
height:100%;
}
* html #content
{
position:absolute;
top:0; bottom:0; left:0; right:0;
height:100%;
width:100%;
overflow:auto;
margin:0;
}
</style>
</head>
<body>
<!-- ######## Inhalte der einzelnen Bereiche #########-->
<!-- eigentliches Navi in Form einer unsortierten Liste mit der ID "Navigation" -->
<ul id="Navigation">
<li><a href="aktu.html" target="mitte">Aktuelles</a></li><br>
<li><a href="index.html" target="mitte">Home</a>
<ul>
<li><a href="haus.html" target="mitte">unser Haus</a></li>
<li><a href="geschichte.html" target="mitte">Geschichte</a></li>
<li><a href="futter.html" target="mitte">Futterstellen</a></li>
<li><a href="chronik.html" target="mitte">Kurzchronik</a></li>
</ul>
</li>
<li><a href="vermitt.html" target="mitte">Vermittlung</a>
<ul>
<li><a href="neuzu.html" target="mitte">Neuzugänge</a></li>
<li><a href="sorgen.html" target="mitte">Sorgenkinder</a></li>
<li><a href="tipps.html" target="mitte">Tipps</a></li>
<li><a href="suche.html" target="mitte">Vermisst</a></li>
</ul>
</li>
<li><a href="uns.html" target="mitte">um uns gehts</a>
<ul>
<li><a href="schick.html" target="mitte">Schicksale</a></li>
<li><a href="foto.html" target="mitte">Fotoalbum</a></li>
<li><a href="gedenken.html" target="mitte">in Gedenken</a></li>
</ul>
</li>
</ul>
<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste-->
<!-- Inhalt -->
<div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>Ich habe den Code einfach auf das wichtigste gerafft, normal gehören da noch feststehender Header und Footer dazu. Ich kann im Moment die Datei leider nicht hochladen (geht von Arbeit einfach nicht und zuhause ist bis nächsten Monat kein INet verfügbar).
P.S. nicht wundern, ich kommentiere meine Testprojekte immer so stark aus.
.
