Probleme mit responsivem Design

    Hallo,

    ich muss für die Uni eine Website erstellen mit CSS und HTML und bin gerade am verzweifeln.

    Ich habe den Code beim responsiven Teil für @media (max-width: 900px) und @media (max-width: 480px) geschrieben.
    Genau bei den Größen und bei der meines Laptop- Bildschirms passt die Seite auch und ist genauso wie ich sie haben möchte, aber bei den Übergängen dazwischen sieht sie einfach schrecklich aus.
    Vorallem der Header und die Navigation sind komisch verschoben, wenn man das Fenster kleiner zieht.

    Hier ist der Link zu meiner Seite:

    http://webuser.uni-weimar.de/~hike8574/Index.html

    Hat jemand vielleicht eine Idee, wie ich das Problem lösen kann?

    Liebe Grüße

    Sundream

    Hallo,

    zunächst solltest du bei HTML das "Best Practice" berücksichtigen. Das benötigst du um überhaupt die Grundlagen für ein Responisve Design zu erstellen.

    So sollten zum Beispiel a-Elemente sich immer in geeigneten Containern wie p, h1 bis h6, li u.s.w. befinden.

    Weiterhin solltest du grundsätzlich auf "position: absolute" verzichten. Das beißt sich in der Regel mit Responsive Design.

    Zitat

    Ich habe den Code beim responsiven Teil für @media (max-width: 900px) und @media (max-width: 480px) geschrieben.

    Die Vorgehensweise ist falsch und führt genau zu den Problemen, mit denen du dich grade rumschlägst.

    Die Breakpunkte des Responsive Design hängen nicht von Bildschirm- oder Fenstergrößen, sondern vom Inhalt ab. Danach musst du sie also ausrichten. Sich von vornherein auf bestimmte Breiten wie 900px oder 480px festzulegen ist schlicht falsch. Sowas wird leider immer noch von Leuten verbreitet, die das Responsive Design nicht verstanden haben oder gar noch am Papierlayout festhängen.

    Gruss

    MrMurphy

    Einmal editiert, zuletzt von MrMurphy (15. März 2015 um 22:42)

    Hallo Mr Murphy,

    danke für die Antwort !

    Wie genau meinst du das mit dem Inhalt?
    Welche Vorgehensweise würdest du wählen?
    Hast du eine gute Website oder einen Tipp, wie ich das jetzt noch ohne noch einmal komplett von vorne anfangen zu müssen ändern kann?

    Liebe Grüße

    Einmal editiert, zuletzt von Sundream (15. März 2015 um 23:39)