Hallo Leute,
entweder sehe ich den Wald vor lauter Bäumen nicht oder ich bin blöd. Wahrscheinlich das Zweite! Ich habe eine animierte Navi mit Hilfe von jQuery.js gebaut. Die Testseite funktioniert auch schon ganz gut bis auf dass die Navi beim verkleinern des Browserfensters sich die "Wanderschuhe anzieht" und nicht mehr da bleibt, wo sie soll. Die Testseite findet Ihr unter http://s196658429.online.de/muster/index.php .
Ich verwende als index.php diesen Code:
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link rel="stylesheet" href="assets/css/reset.css" type="text/css" />
<link rel="stylesheet" href="assets/css/default.css" type="text/css" />
<script src="assets/js/jQuery.js" type="text/javascript"></script>
<script src="assets/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="assets/js/animated-menu.js" type="text/javascript"></script>
</head>
<body>
<div class="background-img">
<div id="maincontainer">
<div id="container1">
<div class="header">
<ul class="menu">
<li class="item-0 current active"><a href="index.php" >Startseite</a></li>
<li class="item-1"><a href="/muster/index.php/kontakt" >Kontakt</a></li>
<li class="item-2"><a href="/muster/index.php/sidemap" >Sidemap</a></li>
<li class="item-3"><a href="/muster/index.php/impressum" >Impressum</a></li>
</ul>
</div>
<div class="logo">
<a href="index.php"><img src="assets/images/logo.png" alt="Logo" /></a>
</div>
<div class="breadcrumbs"><span>Startseite</span></div>
<div id="content100">
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.
</div>
</div>
</div>
<div id="Container2">
<div class="mainmenu">
<ul class="menu_slide">
<li class="item-0 deeper_slide parent color0"><a href="/muster/index.php" >Link 1</a>
<ul>
<li class="item-1"><a href="/muster/index.php/home/anschrift" >Anschrift</a></li>
<li class="item-2"><a href="/muster/index.php/home/l1" >LINK TEST</a></li>
<li class="item-3"><a href="/muster/index.php/home/l2" >LINK TEST</a></li>
<li class="item-4"><a href="/muster/index.php/home/l3" >LINK TEST</a></li>
</ul>
</li>
<li class="item-5 deeper_slide parent color1"><a href="/muster/index.php" >Link 2</a>
<ul>
<li class="item-1"><a href="/muster/index.php/home/anschrift" >Anschrift</a></li>
<li class="item-2"><a href="/muster/index.php/home/l1" >LINK TEST</a></li>
<li class="item-3"><a href="/muster/index.php/home/l2" >LINK TEST</a></li>
<li class="item-4"><a href="/muster/index.php/home/l3" >LINK TEST</a></li>
</ul>
</li>
<li class="item-7 deeper_slide parent color2"><a href="/muster/index.php" >Link 3</a>
<ul>
<li class="item-1"><a href="/muster/index.php/home/anschrift" >Anschrift</a></li>
<li class="item-2"><a href="/muster/index.php/home/l1" >LINK TEST</a></li>
<li class="item-3"><a href="/muster/index.php/home/l2" >LINK TEST</a></li>
<li class="item-4"><a href="/muster/index.php/home/l3" >LINK TEST</a></li>
</ul>
</li>
<li class="item-9 deeper_slide parent color3"><a href="/muster/index.php" >Link 4</a>
<ul>
<li class="item-1"><a href="/muster/index.php/home/anschrift" >Anschrift</a></li>
<li class="item-2"><a href="/muster/index.php/home/l1" >LINK TEST</a></li>
<li class="item-3"><a href="/muster/index.php/home/l2" >LINK TEST</a></li>
<li class="item-4"><a href="/muster/index.php/home/l3" >LINK TEST</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>Die default.css sieht so aus:
Code
/* CSS Document */
body{
font: 12px/20px Arial , Sans-Serif;
color: #999;
}
a{
text-decoration: none;
}
#maincontainer{
padding: 0px;
margin: 0 auto;
width: 1040px;
}
#container1{
padding: 0px;
margin: 0 auto;
width: 1040px;
}
#container2{
position: absolute;
width: 600px;
margin: 240px 0 0 50%;
z-index: 6;
}
#content100{
color:000;
display:inline;
float: left;
left: 50%;
margin-left: 40px;
width:980px;
}
#right{
color:000;
width: 170px;
height: auto;
margin: 0px;
float: right;
}
#left{
color:000;
width: 170px;
height: auto;
margin: 0px;
float: left;
}
.background-img{
background:url(../images/background.jpg) ;
background-repeat: repeat-x;
height: 800px;
}
.header {
display:inline;
float: left;
position: relative;
background:url(../images/cloud.png) ;
background-repeat: no-repeat;
height: 222px;
width: 1040px;
left: 50%;
margin-left: -520px;
z-index:1;
}
.header ul.menu li{
float: left;
font-size: 14px;
font-weight: bold;
color: #808080;
margin: 0 25px 0 0;
}
.header ul.menu li:last-child{
margin-right: 0px;
}
.header ul.menu li a{
color: #808080;
}
.header ul.menu{
margin: 25px 0 0 50px;
}
.header img{
margin: 15px 0 0 50px;
}
.logo{
z-index:4;
display:inline;
float: left;
position: relative;
height: 222px;
width: 1040px;
left: 50%;
margin-left: -980px;
margin-top:60px;
}
.breadcrumbs{
font-size: 12px;
font-weight: bold;
display:inline;
float: left;
position: relative;
height: 20px;
width: 980px;
left: 50%;
margin-left: -485px;
margin-top:-35px;
z-index:5;
color:000;
}
.pathway{
color:#808080;
}
.mainmenu{
position: absolute;
font: 50px;
font-weight: bold;
float: left;
left: 50%;
margin-left: -400px;
z-index:6;
}
.mainmenu ul.menu_slide li{
width:150px;
height:28px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
font-size:12px;
line-height: 20px;
}
.mainmenu ul.menu_slide li.deeper_slide{
font-size:14px;
line-height: 30px;
}
.mainmenu ul.menu_slide li:last-child{
margin-right: 0px;
}
.mainmenu ul.menu_slide li a{
color:#FFF;
}
.mainmenu ul.menu_slide li.color0{
background:#6AA63B;
filter:alpha(opacity=50); -moz-opacity: 0.9; opacity: 0.9;
}
.mainmenu ul.menu_slide li.color1{
background:#D52100;
filter:alpha(opacity=50); -moz-opacity: 0.9; opacity: 0.9;
}
.mainmenu ul.menu_slide li.color2{
background:#5122B4;
filter:alpha(opacity=50); -moz-opacity: 0.9; opacity: 0.9;
}
.mainmenu ul.menu_slide li.color3{
background:#FBC700;
filter:alpha(opacity=50); -moz-opacity: 0.9; opacity: 0.9;
}
.mainmenu ul.menu_slide li.color4{
background:#0292C0;
filter:alpha(opacity=50); -moz-opacity: 0.9; opacity: 0.9;
}
.subtext{
padding-top:10px;
}Kann mir jemand sagen, wo mein Fehler liegt?
Gruß
Frank
PS: Wer alle Dateien benötigt um die Seite auf einem Webserver nachzustellen der kann sich die Dateien runterladen