Ausklappen der Navigationsleiste verrückt Bereich darunter

mj23 · 19. Juli 2009

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!

lauras · 19. Juli 2009

Auf die Schnelle würde ich sagen, den Elementen eine Positionierung und einen z-index zuweisen, so dass sie überlappen.

Wenn beide auf der gleichen Ebene liegen, verschieben sie sich halt.

LG
Laura

mj23 · 20. Juli 2009

das mit dem z-index habe ich versucht, an allen möglichen stellen hat aber nicht funktioniert.

gibts noch etwas das ich probieren kann?

gruß

sven

lauras · 20. Juli 2009

Hast du die Elemente, denen du den z-index zugeordnet hast auch positioniert? Das ist beim z-index ein häufig gemachter Fehler.

mj23 · 23. Juli 2009

hattest recht, genau daran lag es. . Danke!

mj23 · 23. Juli 2009

Folgendes Problem hat sich gerade gelöst

hab nochmal ne frage und zwar wenn ich in der navigationsleiste beispeilsweise seite 3 anwähle dann verschiebt sich seite 4 um ein paar mm. hab es an allen möglichen stellen mit dem z-index und der positionierung versucht klappt aber nicht. was mache ich falsch?

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.gif);
	background-repeat:no-repeat;
	height:40px;
  }  
  * html div#Tmenu {
    width: 100%;
    w\idth: 100%;  /* IE 6 in standards-compliant mode */
  }

  div#Tmenu div {
    clear: left;
  }

  ul#Navigation {
    margin: 0;
	padding: 0px 0px 0px 120px;	/* oben, rechts, unten, links */
    text-align: center;
	z-index:2;
	position:absolute;
  }




  ul#Navigation li {
    list-style: none;
    float: left;
    margin: 0em;
	padding: 0em;
  }  
  * html ul#Navigation li {
    margin-bottom: -0.4em;
  }




  ul#Navigation li ul {
    margin: 0;
	padding: 0;
    top: 0em; left: 0em;
	border:1px solid white;
  }
  * html ul#Navigation li ul {
    left: -1.5em;
    lef\t: -0.4em;
  }

  ul#Navigation li ul li {
    float: none;
    display: block;
    margin: 0em;
	border-bottom:1px solid white;
  }




  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.16em 1.03em;
    border-left-color: white; border-top-color: white;
	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.16em 1.03em 0.23em 0.97em;
	color: green;
  }

  ul#Navigation li ul a:hover {
    border-color: white;
    background-color: grey;
	color: green;
  }

  li a#aktuell {
    color: green;
  }

  ul#Navigation li ul span {
    color: green;
  }

  ul#Navigation li a:active, ul#Navigation li:hover a:active {
    color: green;
	background-color: black;
  }




/* dynamisches Ein-/Ausblenden */
  ul#Navigation li ul {
    display: none;
  }

  ul#Navigation li:hover ul {
    display:block;
    background: black;
  }




.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

:?

Ausklappen der Navigationsleiste verrückt Bereich darunter

Jetzt mitmachen!

Teilen