Responsive Design Problem!!! Suche Hilfe!!!

    Hi bin dabei eine Webseite zu Programmieren die komplett responsive ist. Dabei sollen links 3 Navigationspunkte im Header sein, dann das Logo in der Mitte und rechts 3 andere Navigationspunkte hier einmal mein Code denn ich habe, für die Screen Seite ist es Perfekt leider klappt es für die Tablet Version nicht, weil die Navigation hinter das Logo läuft. Im Original ist das CSS natürlich extern. Wer sich die Mühe macht mir zu helfen danke ich sehr.

    <!DOCTYPE html>
    <html>


    <head>
    <meta charset="utf-8" />
    <title>Test</title>

    <style type="text/css">

    @media screen and (min-width: 960px) {


    * {
    margin: 0px;
    padding: 0px;
    }


    body {

    }


    /* Header */


    #wrapper_head {
    width: 100%;
    height: 125px;
    background:#eee;
    }


    header {
    width: 960px;
    height: 125px;
    background:#eee;
    font-family: Helvetica, Arial, Tahoma, sans-serif;
    font-size:16px;
    color:#000;
    margin: 0px auto;
    }


    #logo{
    width: 235px;
    height: 155px;
    position:absolute;
    z-index:998;
    margin-left: 363px;
    background-color:#03F;
    }


    /* Navigation */
    #nav_links {
    margin-top: 100px;
    float:left;
    }


    #nav_rechts {
    margin-top: 100px;
    float:right;
    }


    ul {
    list-style-type:none;
    color:#000;
    }


    li {
    display: inline;
    }


    .nav:hover {
    color:#B20000;
    border-bottom:solid 2px #B20000;
    }


    .links li {
    margin-left:35px;
    }


    .rechts li {
    margin-right:45px;
    }


    a {
    text-decoration:none;
    color:#000;
    }
    /* ende Navigation */
    /* ende header */
    }

    @media screen and (max-width: 960px) {
    * {
    margin: 0px;
    padding: 0px;
    }


    /* Header */


    #wrapper_head {
    width: 100%;
    height: 125px;
    background:#eee;
    }


    header {
    max-width: 100%;
    height: 125px;
    background:#eee;
    font-family: Helvetica, Arial, Tahoma, sans-serif;
    font-size:14px;
    color:#000;
    margin: 0px auto;
    }


    #logo {
    width: 235px;
    height: 155px;
    position: absolute;
    z-index:998;
    margin-left: 38%;
    background-color:#00F;
    }


    /* Navigation */
    #nav_links {
    margin-top: 100px;
    display:block;
    float:left;
    }


    #nav_rechts {
    margin-top: 100px;
    display:block;
    float: right;
    }


    ul {
    list-style-type:none;
    color:#000;
    }


    li {
    display: inline;
    }


    .nav:hover {
    color:#B20000;
    border-bottom:solid 2px #B20000;
    }


    .links li {
    margin-left:20px;
    }


    .rechts li {
    margin-right:28px;
    }


    a {
    text-decoration:none;
    color:#000;
    }
    /* ende Navigation */
    /* ende header */
    }



    </style>

    </head>


    <body>
    <!-- Header -->
    <div id="wrapper_head">
    <header>
    <div id="nav_links">
    <ul class="links">
    <a href="#"><li class="nav">Home</li></a>
    <a href="#"><li class="nav">Unser Team</li></a>
    <a href="#"><li class="nav">Referenzen</li></a>
    </ul>
    </div>

    <div id="logo">

    </div>

    <div id="nav_rechts">
    <ul class="rechts">
    <a href="#"><li class="nav">Makler</li></a>
    <a href="#"><li class="nav">Verwalter</li></a>
    <a href="#"><li class="nav">Kontakt</li></a>
    </ul>
    </div>
    </header>


    </body>
    </html>

    Ein Link zur Seite wäre hilfreicher. Wohl niemand kopiert den Code, speichert ihn ab und testet. Soviel Hilfe kannst du nicht erwarten. Wenn doch, dein Problem.

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    Hallo

    Zitat

    Ein Link zur Seite wäre hilfreicher.

    Stimmt.

    Zitat

    Wohl niemand kopiert den Code, speichert ihn ab und testet.

    Doch. Sofern der Quelltext so vollständig ist, das er bei der Lösungssuche hilfreich ist.

    http://foreninfo.bplaced.net/seiten_fremdpr…i_mit_logo.html

    Kevin Brandao

    Wenn du sinnvollerweise HTML5 und CSS3 nutzt solltest du das auch konsequent durchziehen. Ein Rückfall in alte Divitis-Zeiten ist nicht mehr notwendig, zumal die neuen Möglichkeiten viele Lösungswünsche deutlich vereinfachen. Außerdem wird in der Regel viel weniger CSS-Quelltext benötigt.

    Bei einer neuen Seite würde ich dem Problem mit Flexbox zu Leibe rücken:

    http://foreninfo.bplaced.net/seiten_fremdpr…i_mit_logo.html

    Gruss

    MrMurphy