Layout&Bildschirmgrößen

  • Hallo erstmal.

    Das Layout meiner Seite ist ja eigentlich fertig, Header, Nav, Footer, etc., bis auf unwichtige Sachen die mit folgendem nichts zu tun haben.
    Ich habe seit mittlerweile 1 Woche keine Lust mehr weiter zu arbeiten, da ich seit rund 1 Woche daran fest hänge, dass die Seite an verschiedenen Geräten mehr oder weniger gut aussieht. Mit dem <link>-Tag habe ich versucht das Layout für verschiedene Bildschirmgrößen fest zu legen, was mir aber nichts gebracht hat. Ganz egal an welcher Stelle der Tag war, oder an welchem Gerät ich die Seite getestet habe, egal ob Handy oder Konsole, ist sie an der Konsole fast wie sie sein soll, und am Handy bei 1080px Breite ein komplettes Disaster. Bilder sind deplatziert/zu groß u.ä., un der <link>-Tag und die .css Datei haben mich genau 0 weiter gebracht.

    Der link-Tag war ziehmlich genau: <link rel="stylesheet" media="screen and (min-device-width: 1920px)" href="1920.css" />, für 1920px Breite, was ich an meiner Konsole getestet habe, da dort die Bildschirmgröße bei 1920x1080 liegt. Beim Handy, wenn man dies richtig hält, senkrecht, genau anders herum. Nur waren überall genau 0 Änderungen.

    Ich habe daher genau 0 Plan wie ich weiter machen soll...

    Danke schonmal an jeden der hier rein schaut, ob geholfen werden kann, oder nicht.

  • Hallo

    Du hast den Link zu deiner Seite vergessen.

    Du willst offensichtlich ein Responsive Layout erstellen.

    Deine Vorgehensweise ist aber eher ungeschickt. Das Layout hängt vom Inhalt ab. Du solltest also für alle übergeordneten Elemente und deren Inhalt eigene "CSS-Blöcke" erstellen.

    Dabei hat es sich als sinnvoll erwiesen zunächst das Layout für schmale Fenster und davon ausgehend für immer breitere zu erstellen, bekannt als "Mobile-First".

    Verschiedene CSS-Dateien für verschiedene Fensterbreiten zu erstellen hat sich als Sackgasse erwiesen. Das endet in Frust wie bei dir.

    Natürlich sollte der HTML-Quelltext dem aktuellen HTML5 entsprechen und keine sachlichen Fehler enthalten.

    Gruss

    MrMurphy

    Einmal editiert, zuletzt von MrMurphy (12. September 2016 um 12:11)

  • Okay, danke. Dann schaue ich, dass ich also zuerst die Seite für's Handy fertig bekomme.