Abstand zwischen 2 Klassen!?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Abstand zwischen 2 Klassen!?

    Huhu,

    ich probiere nun schon seit Stunden, und bei SelfHTML habe ich nichts gefunden bzw. haben die Lösungswege nicht funktioniert.
    Alsoo.. ich möchte, dass folgender Abstand (13px) verschwindet, so dass das Menü an dieser vertikalen Navigation grenzt.

    Bild: bildupload.sro.at/a/images/screenprob1.jpg


    Der Style wird extern eingebunden:
    Index:
    <div id='page_wrapper'>

    <div id='page_header'>

    </div>

    <div id='menu_bar'>
    <div id='navcontainer'>
    <ul id='navlist'>
    <li><a href='#'>Item one</a></li>
    <li><a href='#'>Item two</a></li>
    <li><a href='#'>Item three</a></li>
    <li><a href='#'>Item four</a></li>
    <li><a href='#'>Item five</a></li>
    </ul>
    </div>
    </div>

    <div id='content_wrapper'>
    <div id='left_side'>

    <h3>Recommended</h3>

    <div id='linklist'>
    <ul id='linklist'>
    <li><a href='#'>Item one</a></li>
    <li><a href='#'>Item two</a></li>
    <li><a href='#'>Item three</a></li>
    <li><a href='#'>Item four</a></li>
    <li><a href='#'>Item five</a></li>
    <li><a href='#'>Item six</a></li>
    <li><a href='#'>Item seven</a></li>
    <li><a href='#'>Item eight</a></li>
    <li><a href='#'>Item nine</a></li>
    <li><a href='#'>Item ten</a></li>
    </ul>
    </div>


    Style (Ausschnitte):

    #page_wrapper {
    margin-left: auto;
    margin-top:0px;
    margin-right: auto;
    width: 921px;
    text-align: left;
    background: #FFFFFF top left repeat-y;
    }

    #page_header {
    height: 104px;
    background: #FFFFFF url('../images/header.jpg') bottom left no-repeat;
    }


    #menu_bar {
    margin-top:0px;
    padding:0px;
    border:0px dashed #cccccc;
    background-color: #FFFFFF;
    }

    #content_wrapper {
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    border:0px dashed #FFFFFF;

    #left_side {
    float: left;
    width:150px;
    border:0px dashed #cccccc;
    height: 0px;
    background-color: #FFFFFF;
    margin-top:0px;

    #left_side p {
    margin-top:0px;margin-bottom:0px;

    padding:0px;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    line-height: 16px;
    color: #666666;

    #navcontainer ul {
    padding-left: 0;
    margin-left: 0;
    margin-top:0px;
    background-color: #7DAC7B;

    color: White;
    float: left;
    width: 100%;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    }

    #navcontainer ul li { display: inline; }

    #navcontainer ul li a {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left:10px;
    padding-right:10px;
    background-color: transparent;
    color: White;
    text-decoration: none;
    float: left;
    border-right: 1px solid #3C5B39;
    }

    #navcontainer ul li a:hover {
    background-color: #4E784B;

    color: #fff;

    #linklist {
    padding-left: 1px;
    margin-left: 0px;
    width: 140px;
    }

    #linklist li {
    list-style: none;
    margin: 5px;
    line-height:10px;
    font-family:verdana;
    font-size:13px;
    }

    #linklist li a { text-decoration: none; }
    }




    Hoffe, mir kann jemand weiterhelfen, wenn noch was fehlt, bitte Bescheid geben.

    LG,
    Daniel.

  • Hmm, eigentlich schon in die style.css

    Woher hast du den Code? Ich find ihn ganz schön übertrieben für solch ein kleines Problem, wenn ich ehrlich bin. Aber das ist nur ne persönliche Meinung.

    Ich weiß nicht wo der Fehler genau liegt. Ich kann ihn auch nicht reproduzieren, weil mir die komplette html+grafiken fehlt. Daher find ich momentan keinen Ansatzpunkt. Wenn du mir/uns die Sachen bereitstellst, ist es eventuell einfacher den Fehler zu finden.

    bye

  • Aha ok.

    Du hast in deinem Css-File schon rumgefummelt, sodass einige Klassen und Definitionen mit anderen verschachtelt sind. Ich weiß aber nicht ob das in CSS erlaubt ist.
    Du solltest dafür sorgen, dass die Klammern wieder regulär geschlossen sind.

    Aber gut. Ausgehend von dem Original-CSS musst du folgende Modifikatonen anwenden:

    Quellcode

    1. #content_wrapper {
    2. margin-top:0px; /*alt: 10px*/
    3. margin-bottom:10px;
    4. margin-left:10px;
    5. margin-right:10px;
    6. border:0px dashed #FFFFFF;
    7. }


    so klappt es im Internetexplorer (bei mir Version 7).

    Allerdings macht der Firefox damit Probleme. Hier hast du verschiedene Möglichkeiten. Die einfachste ist wohl es wohl die ids left_side und right_side zu modifizieren:

    Quellcode

    1. #right_side {
    2. float: right;
    3. width:140px;
    4. border:0px dashed #cccccc;
    5. margin-top:-12px; /*neu für firefox*/
    6. }
    8. #left_side {
    9. float: left;
    10. width:140px;
    11. border:0px dashed #cccccc;
    12. margin-top:-12px; /*neu für firefox*/
    13. }
    Alles anzeigen


    Eine andere Möglichkeit ist, das ganze Layout umzubauen, indem du die floats veränderst. Das erfordert aber mehr Zeit und mehr Kenntins über das ganze Thema.

    bye

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von mad ()