Ergebnis 1 bis 5 von 5

Thema: Responsive Design Problem!!! Suche Hilfe!!!

  1. #1
    HTML Newbie
    Registriert seit
    25.05.2014
    Ort
    A, A
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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>
    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 !!!!!

  2. #2
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.151
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: Responsive Design Problem!!! Suche Hilfe!!!

    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.

  3. #3
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    570
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Responsive Design Problem!!! Suche Hilfe!!!

    Hallo

    Ein Link zur Seite wäre hilfreicher.
    Stimmt.

    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_..._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_..._mit_logo.html

    Gruss

    MrMurphy

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    25.05.2014
    Ort
    A, A
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Responsive Design Problem!!! Suche Hilfe!!!

    Super danke für die Hilfe!

    War jetzt mein erster Beitrag im Forum für die Zukunft mach ich es besser.

  5. #5
    Youngster Avatar von e.player
    Registriert seit
    05.03.2008
    Ort
    Hannover
    Alter
    28
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Responsive Design Problem!!! Suche Hilfe!!!

    Irgendwie Blickt man so gar nicht durch mit den kopierten Code

Ähnliche Themen

  1. Responsive Bilder mit CSS und PHP
    Von klopp1991 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 09.05.2014, 22:15
  2. Responsive Design Problem
    Von hugo22 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.02.2014, 03:20
  3. [biete] Web Designer / Responsive Design (m/w)
    Von Vermittler im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 0
    Letzter Beitrag: 09.02.2014, 13:24
  4. Responsive Webdesign - Hinweis für IE 5.5 - 8.0
    Von Manni68 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 03.02.2014, 16:46
  5. GTA San Andreas - Problem - Suche Hilfe
    Von MaxGemmeke im Forum Computer - Internet Forum
    Antworten: 49
    Letzter Beitrag: 29.11.2009, 18:27

Stichworte

Berechtigungen

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