Hi Leute,
ich versuche mich gerade an einer ausklappbaren Navigation. Habe im Netz ein Beispiel gefunden und passe dieses gerade an meine Seite an.
Dabei besteht das Problem das der Bereich der unter der Navigationsleiste liegt verschoben wird wenn mann die Ausklappfunktiuon aktiviert. Und ich weiß nicht wie man das Problem behebt, ihr eventuell???
Hier sind die Codes:
html:
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Startseite</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript"></script>
</head>
<body>
<div id="Tmenu">
<ul id="Navigation">
<li><a id="aktuell" href="#Beispiel">Seite 1</a>
<ul>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 1b</a></li>
<li><a href="#Beispiel">Seite 1c</a></li>
<li><a href="#Beispiel">Seite 1d</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 2</a></li>
<li><a href="#Beispiel">Seite 3</a>
<ul>
<li><a href="#Beispiel">Seite 3a</a></li>
<li><a href="#Beispiel">Seite 3b</a></li>
<li><a href="#Beispiel">Seite 3c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 4</a></li>
</ul>
<div></div>
</div>
<div id="inhaltsbox_1"><img class="img150" src="108.jpg"></div>
<img class="img151" src="dsc_0029.jpg">
<div id="inhaltsbox_2"><img class="img152" src="dsc_0029.jpg"></div>
</body>
</html>
Alles anzeigen
css:
Code
body {
margin:0px;
padding:0px;
}
div#Tmenu {
font-size: 15px;
padding: 33px;
border-bottom:3px solid white;
background-color: #000000;
background-image:url(schwarzerbalken.jpg);
background-repeat:repeat;
}
* html div#Tmenu {
width: 100%;
w\idth: 100%; /* IE 6 in standards-compliant mode */
}
div#Tmenu div {
clear: left;
}
ul#Navigation {
margin: 0;
padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left;
margin: 0.4em;
padding: 0em;
}
* html ul#Navigation li {
margin-bottom: -0.4em;
}
ul#Navigation li ul {
margin: 0;
padding: 0;
top: 0em; left: 0em; /* position der kästchen */
}
* html ul#Navigation li ul {
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li ul li {
float: none;
display: block;
margin-top: 0.2em;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 7em;
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
text-decoration: none; font-weight: bold;
padding: 0.23em 0.97em 0.17em 1.03em;
border-left-color: #ea0; border-top-color: #ea0;
color: white;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 9.2em;
w\idth: 7em; /* IE 6 in standards-compliant mode */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
padding: 0.17em 1.03em 0.23em 0.97em;
border-color: #ea0;
border-left-color: #900;
border-top-color: #900;
background-color: #e00;
}
ul#Navigation li ul a:hover {
border-color: #900;
}
li a#aktuell {
border-right-color: #300;
border-bottom-color: #300;
background-color: #900;
}
ul#Navigation li ul span {
border-right-color: #c96;
border-bottom-color: #c96;
color: #900;
background-color: white;
}
ul#Navigation li a:active, ul#Navigation li:hover a:active {
color: black;
background-color: #f00;
}
/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover ul {
display: block;
background: #eee;
}
.img150 {
height:222px;
width:320px;
position:absolute;
z-index:1;
margin-top:50px;
margin-left:65px;
border:3px solid #000000;
}
.img151 {
height:222px;
width:320px;
position:absolute;
z-index:1;
margin-top:50px;
margin-left:415px;
border:3px solid #000000;
}
.img152 {
height:222px;
width:320px;
position:absolute;
z-index:1;
margin-top:50px;
margin-left: 190px;
border:3px solid #000000;
}
#inhaltsbox_1 {
width:50%;
height:84%;
background-color:#7F0E0E;
position:absolute;
margin-left:0%;
margin-top:0%;
background-image:url(karo1.gif);
background-repeat:repeat;
}
#inhaltsbox_2 {
width:50%;
height:84%;
background-color:#654829;
position:absolute;
margin-left:50%;
margin-top:0%;
background-image:url(karo2.gif);
background-repeat:repeat;
}
Alles anzeigen
java:
Code
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "#eee";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
<![endif]-->
Alles anzeigen
Danke für jeden Tipp!