Ergebnis 1 bis 2 von 2

Thema: Problem mit Postion einer animierten Navigation

  1. #1
    HTML Newbie
    Registriert seit
    13.09.2012
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Problem mit Postion einer animierten Navigation

    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-Code:
    <!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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Angehängte Dateien Angehängte Dateien
    Geändert von Ickehausen (13.09.2012 um 14:57 Uhr)

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit Postion einer animierten Navigation

    Verzichte auf die absolute Positionierung und verwende dafür float und/oder margin.

Ähnliche Themen

  1. animierten Ball erstellen
    Von Unregistriert im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 5
    Letzter Beitrag: 20.06.2012, 11:18
  2. postion:fixed problem mit ie
    Von SeekeR im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 08.02.2008, 17:58
  3. Suche animierten Krankenwagen
    Von Dikra im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 16
    Letzter Beitrag: 22.10.2007, 09:52
  4. Allgemeine Frage zur Navigation einer Homepage
    Von Pumàh im Forum HTML & CSS Forum
    Antworten: 18
    Letzter Beitrag: 25.05.2007, 17:06
  5. postion:absolute Problem
    Von elbart im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.01.2005, 16:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •