CSS Navigations Problem

ddiethelm

Hallo miteinander

Ich habe ein Problem mit meiner CSS Navigation. Wenn man bei der Navigation zB. über "Make-Up" fährt werden die Unterseiten nicht untereinander sondern teils nebeneinander gelistet. Ich bin schon seit Stunden dran den Fehler zu finden... Kann mir jemand sagen wie ich die Listendarstellung hinkriege?

Besten Dank für Eure Hilfe.
Hier der Link zur Seite: http://www.jamena.ch/jamena/

Und hier die CSS (die Naveinträge sind zuunterst):

Code

/* General */


body {
    margin: 0 auto;
    background: #000000 url("images/background.jpg") no-repeat;
}


h1, h2, h3, h4 {
    margin: 0;
}


img {
    border: 0;
}




/* Page */


#page {
    background: url("images/page.gif") repeat-y;
    width: 1024px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: 127px;
}


#page-in {
    background: url("images/page_top.jpg") no-repeat;
    width: 1024px;
}


/* Header */


#header {
    width: 1024px;
    height: 455px;
    position: relative;
}


#header h1 {
    color: #ffffff;
    font: normal 23px Arial;
    position: absolute;
    top: 118px;
    left: 573px;
}
    
#header h1 a {
    color: #ffffff;
    text-decoration: none;
}


#header .description {
    color: #ffffff;
    font: bold 15px Arial;
    position: absolute;
    top: 145px;
    left: 628px;
    text-transform: lowercase;
    width: 380px;
    text-align: center;
}


    /* Header - Menu */
    
    #header #menu {
        position: absolute;
        left: 522px;
        top: 189px;
    }
    
    #header #menu ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        height: 27px;
    }
    
    #header #menu ul li {
        float: left;
    }
    
    #header #menu ul li a {
        float: left;
        padding: 0 15px 0 15px;
        height: 27px;
        color: #ffffff;
        display: block;
        font: normal 17px/27px Arial;
        text-decoration: none;
        text-transform: lowercase;
        margin-right: 4px;
    }
    
    #header #menu ul li a:hover {
        text-decoration: none;
        background: url("images/menu_hover_left.gif") no-repeat;
        margin-right: 4px;
    }
    
    #header #menu ul li.page_item:hover {
        background: url("images/menu_hover_right.gif") no-repeat right top;
    }
    
    /* Header - Search */
    
    #header #search {
        width: 250px;
        height: 26px;
        position: absolute;
        top: 384px;
        left: 418px;
    }
    
    #header #search #searchform {
        margin: 0;
        padding: 0;
        width: 250px;
        height: 26px;
    }
    
    #header #search #s {
        width: 245px;
        height: 22px;
        border: none;
        padding-top: 4px;
        background: transparent;
        font: normal 17px Arial;
        color: #ffffff;
    }
    
    #header #search #searchsubmit {
        background: transparent;
        visibility: hidden;
        width: 0;
    }




/* Main */


#main {
    width: 1024px;
}


.clear {
    clear: both;
    height: 0;
    overflow: hidden;
}


    /* Main - Sidebar */
    
    #main #sidebar {
        float: left;
        width: 105px;
        margin-left: 144px;
        margin-top: 65px;
        padding-bottom: 25px;
    }
    
    #main #sidebar h3 {
        font: bold 16px Arial;
        color: #ff6edf;
        margin-bottom: 10px;
        margin-top: 10px;
        padding-left: 3px;
    }
    
    #main #sidebar ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        padding-bottom: 10px;
        width: 105px;
        background: url("images/sidebar_separator.gif") no-repeat left bottom;
    }
    
    #main #sidebar ul li {
        font: normal 13px Arial;
    }
    
    #main #sidebar ul li a {
        color: #9a0c9c;
        text-decoration: none;
        display: block;
        padding-left: 6px;
        width: 99px;
        line-height: 17px;
    }
    
    #main #sidebar ul li a:hover {
        color: #f068d2;
    }
    
    /* Main - Content */
    
    #main #content {
        float: left;
        margin-left: 89px;
        margin-top: 5px;
        width: 592px;
    }
    
    #main #content .post {
        font: normal 14px Arial;
        color: #000000;
        float: left;
        margin-bottom: 45px;
        width: 592px;
    }
    
    #main #content .post .date {
        margin-bottom: 15px;
        width: 583px;
        height: 68px;
        background: url("images/date.gif") no-repeat;
        padding: 7px 0 0 9px;
    }
    
    #main #content .post .date .month {
        color: #ffffff;
        font: normal 15px/23px Arial;
        text-transform: lowercase;
        width: 72px;
        height: 23px;
        text-align: right;
        display: block;
    }
    
    #main #content .post .date .day {
        color: #ffffff;
        font: normal 34px/38px Arial;
        width: 62px;
        height: 38px;
        padding-left: 12px;
        text-align: left;
    }
    
    #main #content .post h2 {
        color: #000000;
        font: bold 28px Arial;
    }
    
    #main #content .post h2 a {
        color: #000000;
        text-decoration: none;
    }
    
    #main #content .post h2 a:hover {
        text-decoration: underline;
    }
    
    #main #content .post .entry {
        line-height: 19px;
        border-bottom: 1px dotted #000000;
        padding-top: 20px;
        padding-bottom: 12px;
        width: 565px;
    }
    
    #main #content .post .entry a {
        color: #9a0c9c;
        text-decoration: none;
    }
    
    #main #content .post .entry a:hover {
        text-decoration: underline;
    }
    
    #main #content .post .entry img {
        margin: 0 15px 5px 0;
        float: left;
    }
    
    #main #content .post .entry .more-link {
        font: bold 14px/20px Arial;
        color: #9a0c9c;
        float: right;
        margin-top: 5px;
    }
    
    #main #content .post .entry .more-link a {
        color: #9a0c9c;
        text-decoration: none;
    }
    
    #main #content .post .entry .more-link a:hover {
        text-decoration: underline;
    }
    
    #main #content .post .info {
        font: normal 14px Arial;
        color: #000000;
        padding-top: 20px;
    }
    
    #main #content .post .info a {
        color: #000000;
        text-decoration: none;
    }
    
    #main #content .post .info a:hover {
        text-decoration: underline;
    }
    
    #main #content .post .info .comms-links {
        font-weight: bold;
    }
    
    #main #content .post .info .comms-links a {
        font-weight: bold;
    }
    
    #main #content .post h3 {
        color: #000000;
        font: normal 22px Arial;
        margin-top: 20px;
        margin-bottom: 5px;
    }
    
    #main #content .post .comments {
        margin: 0;
        width: 565px;
    }
    
    #main #content .post .comments ol {
        margin: 10px 0 10px 0;
        padding-left: 20px;
    }
    
    #main #content .post .comments ol li {
        padding: 5px;
        margin-top: 5px;
    }
    
    #main #content .post .comments ol li.alt {
        background: #cda3d6;
    }
    
    #main #content .post .comments ol li cite {
        color: #9a0c9c;
        font-style: normal;
        font-weight: bold;
    }
    
    #main #content .post .comments ol li cite a {
        color: #9a0c9c;
        text-decoration: none;
        font-weight: bold;
    }
    
    #main #content .post .comments ol li cite a:hover {
        text-decoration: underline;
    }
    
    #main #content .post .comments ol li .commentmetadata a {
        color: #9a0c9c;
        text-decoration: none;
    }
    
    #main #content .post .comments ol li .commentmetadata a:hover {
        color: #9a0c9c;
        text-decoration: underline;
    }
    
    #main #content .post #commentform {
        margin: 0;
    }




/* Footer */


#footer {
    padding-left: 294px;
    padding-top: 30px;
    width: 730px;
    height: 20px;
    background: url("images/footer.jpg") no-repeat right top;
    font: normal 12px Arial;
    color: #333333;
}


#footer a {
    color: #807583;
    text-decoration: none;
}


#footer a:hover {
    text-decoration: underline;
}








#nav {


    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    left: 522px;
    top: 189px;
    }
    
#nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    left: 522px;
    top: 24px;
    }


#nav a { 
    display: block; 
    width: auto; 
    color: #ffffff; 
    font: bold 14px/27px Arial; 
    text-decoration: none; 
    text-transform: lowercase; 
    margin-right: 5px; 
    margin-left: 5px; 
    padding-right: 5px; 
    padding-left: 5px; 
    border-bottom:medium none; }


#nav li { 
    float: left;
    width: auto; 
    margin-bottom: 2px;}


#nav li ul { 
    position: absolute;
    background: #444444;
    width: auto;
    text-align:left;
    border-left: 1px solid #fe00fe;
    left: -999em; }


#nav li ul ul { 
    margin: -1em 0 0 8.5em;
    border-left: 1px solid #fedc00;
    text-align:left;}


#nav li:hover ul ul, #nav li.sfhover ul ul {
    left: -999em;}


#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto;}

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Code

#nav li { 
    [COLOR="Red"]float: left;[/COLOR]
    width: auto; 
    margin-bottom: 2px;}

Eine neue Regel

Code

#nav li ul li {
    float:none;
    display:list-item;
}

sollte dein Problem lösen.

PS: Ist es beabsichtigt, dass man bei 1024px Fensterbreite auf deiner Seite horizontal scrollen muss?

ddiethelm

Wow, das ging ja schnell. Habe Deine Zeilen eingetragen und es funktioniert perfekt. Danke vielmals :)

Wegen dem 1024px Problem. Das Theme ist wohl nicht gerade das beste ;) Hier mal der Link zum Original: http://www.wptmp.com/preview/1611/
Dort verschiebt sich das ganze etwas hässlicher. So hab ich mir gedacht ich montiere dies in Gimp zu einem Bild zusammen. Bei 1024 gibts dann halt nen Balken... ist das schlimm?

Gruss ddiethelm

marX

Zitat von ddiethelm

Wow, das ging ja schnell. Habe Deine Zeilen eingetragen und es funktioniert perfekt. Danke vielmals :)

Bitte bitte. :-)

Zitat

Dort verschiebt sich das ganze etwas hässlicher. So hab ich mir gedacht ich montiere dies in Gimp zu einem Bild zusammen. Bei 1024 gibts dann halt nen Balken... ist das schlimm?

Schlimm nicht, aber nervig, weil ich horizontal scrollen muss um alles sehen zu können. ;-) Wollt dich nur drauf hinweisen. Vielleicht findest du ja noch ne aktzeptable Lösung dafür.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS Navigations Problem

Jetzt mitmachen!