Meine Navi spinnt rum

  • Hallo zusammen!


    ich habe ein Problem mit meiner Page und ich hoffe, ihr könnt mir helfen, denn ich hab ich schon halbtot gegoogled und ich finde einfach keine Lösung. Es geht um diese seite: http://www.nachtgeyst.de/promotion/-/
    Die Seite als solches hat zwei horizontale (nav1 und nav2) und darunter eine vertikale Navigation (nav3). Wenn der Inhalt im weißen Kasten länger wird, passt sich dieser an und es steht alles schön im weißen Kasten. Sobald aber die vertikale Navi3 (links) länger wird, passt sich der Seiteninhalt nicht der Länge an und die Navigationspunkte stehen unter dem weißen Kasten (Inhalt). Ich habe schon so viel ausprobiert aber ich finde keine Lösung das Problem zu beheben.


    Mein html sieht so aus:


    <div id="header2">
    <div id="logo">
    <a href="http://www.nachtgeyst.de"><img src="logo-nachtgeyst.png" alt="" /></a>
    </div>
    <div style="background-image:url(header.png); margin-top:150px; padding:20px">
    </div>
    </div>
    <!-- header zu ende -->
    <!-- hier beginnt die horizontale navigation -->
    <!-- Hauptnavigation -->
    <div id="content">
    <div id="navigation">
    <div id="navi">
    <ul id="mainNav1" class="mainNav1">
    </ul>
    <var>navigation[1|2|3]</var>
    <div id="nav3">
    <ul id="mainNav3" class="mainNav3">
    </ul>
    </div>
    </div>
    </div>
    <!-- Hauptnavigation zu Ende -->
    <!-- Hier ist die Mitte-->
    <div id="hintergrund-oben">
    </div>
    <div id="hintergrund">
    <div id="content2">
    <!-- container mit hauptinhalt -->
    <div id="haupt-content">
    <var>content</var>
    </div>
    <!-- ende von Hauptinhalt-->
    <!-- hier steht die Sidebar -->
    <div id="sidebar">
    <div id="footer">
    <var>sidebar</var> <var>footer</var>
    </div>
    </div>
    <!-- Sidebar zu Ende -->
    </div>
    </div>
    </div>
    <!-- hier ist der Footer-->
    <div id="contentfooter">
    <div class="gutter">
    </div>
    <!-- Hauptinhalt zu Ende -->
    </div>




    Hier mein css der Navigation:



    ------navigation---------------
    div#navi{
    height:250px;
    width:1200px;
    left: 50%;
    margin-left: -600px;
    clear:both;
    z-index: 50;
    }
    ul.mainNav1 li a{
    color: #775823;
    display: block;
    text-transform: uppercase;
    font: 12px/140% Verdana,Geneva,Arial,Helvetica,sans-serif;
    text-decoration: none;
    width: 150px;
    text-align: center;
    clear: left;
    }
    div#navi ul.mainNav1 {
    height:75px;
    margin-top:-60px;
    padding-bottom:20px;
    z-index:50;
    clear:both;
    }
    div#navi ul.mainNav2 {
    margin-top:100px;
    height:62px;
    z-index:50;
    clear:both;
    }
    ul.mainNav1 a {
    background-image: url(link-bg.png);
    background-repeat:no-repeat;
    text-decoration:none;
    color:#889f2a;
    height:70px;
    z-index:50;
    }
    ul.mainNav2 a {
    background-image: none;
    border-bottom: 1px dotted #6c5020;
    margin-top:15px;
    text-decoration:none;
    color:#6c5020;
    height:32px;
    z-index:50;
    }
    ul.mainNav1, {
    left: 50%;
    margin-left: -550px;
    width:1100px;
    z-index:50;
    }
    ul.mainNav2{
    height:62px;
    position:absolute;
    left: 50%;
    margin-left: -550px;
    width:1100px;
    z-index:50;
    }
    ul.mainNav1 li, ul.mainNav2 li {
    display: inline;
    margin: 0;
    padding: 0;
    float:left;z-index:50;
    }
    ul.mainNav1 li, {
    display: inline;
    margin: 0;
    padding: 0;
    float:left;
    height:20px;
    z-index:50;
    }
    li #cc-nav-view-1174138080 {
    height:15px;
    }
    ul.mainNav2 li ul {
    background-repeat:no-repeat;
    height:50px;
    margin-top:50px;
    margin-left: -100;
    width:50px;
    z-index:50;
    }
    ul #mainNav2 li ul{
    display:inline;
    position:absolute;
    padding-left:0px;
    right: 95%;
    margine-right: -150px;
    z-index:50;
    }
    ul.mainNav1 a.current {
    font-weight: bold;
    color:#ffffff;
    z-index:50;
    }
    ul.mainNav2 a.current {
    font-weight: bold;
    color:#6c5020;
    z-index:50;
    }
    ul.mainNav1 li a {
    padding-right: 14px;
    float: left;
    padding-top:55px;
    z-index:50;
    }
    ul.mainNav2 li a {
    padding-right: 14px;
    width: 70px;
    float: left;
    padding-top:10px;
    z-index:50;
    }
    ul.mainNav2 li a {
    color: #6c5020;
    display: block;
    text-transform: uppercase;
    font: 11px/140% Verdana,Geneva,Arial,Helvetica,sans-serif;
    text-decoration: none;
    clear: left;
    z-index:50;
    }
    ul.mainNav3 li a {
    padding-left: 20px;
    padding-top:0px;
    width: 150px;
    float: left;
    padding-top:20px;
    text-align:left;
    z-index:50;
    }
    div#navi ul.mainNav3 {
    margin-top:100px;
    height:auto;
    display:block;
    clear:both;
    z-index:50;
    }
    div#navi ul.mainNav3 li a {
    width: 250px;
    height:20px;
    z-index: 50;
    padding:0px;
    margin:0px;
    border:none;
    }
    div#navi ul.mainNav3 li {
    height: 20px;
    z-index: 50;
    }
    .mainNav3 ul li {
    height:20px;
    padding:0px;
    margin:0px;
    z-index: 50;
    }
    .mainNav3 ul {
    height:100%;
    padding:0px;
    margin:0px;
    z-index: 50;
    }
    .mainNav3 {
    height:auto;
    width:300px;
    }
    a:link, a:visited {
    color: #00889C;
    text-decoration: underline;
    }
    a:link, a:visited {
    color: #EC4413;
    text-decoration: underline;
    }
    ul.mainNav1 a:hover {
    background-image: url(hover-link-bg.png);
    text-decoration:none;
    color:#deaf5f;
    height:32px;
    }
    ul.mainNav2 a:hover {
    background-image: none;
    text-decoration:none;
    color:#deaf5f;
    height:32px;
    }
    div#nav3{
    border:solid 1 px #fff;
    width: 200px;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    }



    Ich hoffe, ich hab das Problem genau genug bechrieben und jemand kann mir helfen. Vorab besten Dank!
    Viele grüße
    B.

  • Vielen Dank! Diese Punkte scheinen aber im cms vorgegeben zu sein. Ich tippe drauf, dass es irgendwas mit den li's zu tun. Was kann ich denn tun? Eine Idee?

  • Wo sind denn die IDs doppelt? Das hier gepostete css ist von mir, das kann ich alles ändern. Es geht eigentlich nur um die Navi3. Der Inhalt im weißen Kasten passt sich ja immer der Länge des Inhaltes an, was auch funktioniert. Ich plane weitere Seiten, wo die Navi wesentlich länger ist, als auf dieser Seite. Dann wird aber immer noch die Größe des weißen Kastens der Länge in diesem Angepasst. Irgendwie muss man dem verklickern, wenn die Navi länger ist, dass dann das weiße Inhaltsfeld auch entsprechend länger werden muss. Hier ein screenshot:

  • http://validator.w3.org/check?…29&doctype=Inline&group=0


    Bandit hat dich schon draufhingewiesen, liest du auch die Beiträge und folgst den Links?


    Ruf auch mal deine Seite im Firefox auf und schau in die Fehlerkonsole.


    In deiner Seite steht fast nichts drin, also textmässig und der Code ist jetzt schon total unübersichtlich und aufgebläht.


    Dein Hintergrund ist in einem eigenen Div. Die Navigation ist ausserhalb, da kann nichts mitwachsen in der Höhe, daher der Effekt.


    Schreib deinen Code neu und lass am Anfang das ganze Javascript raus solange du im Aufbau des Grundgerüstes noch Fehler hast.


    Wenn das CMS so einen Html-Code produziert, dann wechsel das CMS.