Matthias Pollack: Problem mit dem Seitenlayout, keinerlei Erfahrung

problematische Seite

Hallo Leute! Ich bin völlig unerfahren und programmiere nur zum Hobby eine Seite für eine gute Bekannte. Also hier ist die Seite: https://www.viniyoga-wehner.de/index_test.html

Das passende CSS dazu liegt hier: https://www.viniyoga-wehner.de/css/formate_neu.

Der Seitenaufbau soll wie folgt sein: Der Header oben geht über die ganze Seite, die beiden Bilder und die Textauflisten können so floaten wie sie es aktuell tun. Das soll alles immer rechts neben dem Bild sein.

Darunter befindet sich eine NAV-Box, worin später die Navigation als Links liegen soll.

Darunter dann der Content.

Frage Nummer 1: Ich habe dem Header eine Mindetbreite verpasst um zu bewirken, dass man beim Verkleinern des Fensters die Symbole und den Text rechts nicht über das Bild der Sonne schieben kann. Wenn die Mindestbreite unterschritten wird, geht unten der Scrollbalken an. Alles bestens. So soll es sein. Das sieht dann so aus: zu kleine Fensterfläche

Nun zum Problem: Wenn ich mit dem Scrollbalken das Fenster schiebe, passiert mit dem Header oben folgendes: Falsche Breite von Header und Nav

Wie kann ich das verhindern?

Dann zu Frage zwei: Die Nav-Leite darunter, der Text soll mittig zentriert sein. Er steht aber nach rechts versetzt. Ich vermute, dass ich im Header irgendwie ein Grid erzeugt habe, dem nun auch das NAV-Element folgt. Das will ich natürlich nicht. Wie kann ich das verhindern? Also wie lege ich die <p>-Elemente alle in eine Zeile zentriert in der Mitte des Bildes ab?

Danke für Eure Hilfen und frohe Weihnachten, Euer Matthias

  1. problematische Seite

    Hallo Leute, Problem 2 habe ich bereits selbst gefunden! Also besteht nur noch Frage 1! Vielen Dank und LG, Matthias

  2. problematische Seite

    @@Matthias Pollack

    Wenn die Mindestbreite unterschritten wird, geht unten der Scrollbalken an. Alles bestens. So soll es sein. Das sieht dann so aus:

    Bei mir so:

    Screenshot mit iPhone

    Kein Hinweis, dass rechts noch irgendwas wäre. Ich glaube nicht, dass da „alles bestens“ ist.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. problematische Seite

      Tja, da kommen wieder 300 verschiedene Browser zum Tragen …

      Bei mir im Android sieht es schon mal besser als auf dem iPhone aus, aber letztendlich auch nicht so, wie es unter Windows mit dem Firefox aussieht.

      Wie mache ich es richtig?

      Sitzen alle Elemente unter dem Header quasi als Kindelemente mit dem Header als Elternelement oder ist der Body das Elternelement und die einzelnen Bereiche die Kindelemente?

      1. problematische Seite

        Hallo Matthias,

        das Problem sind nicht die 300 Browser. Das Problem ist dein fixiertes Layout.

        Du schreibst, keine Erfahrung zu haben. Das macht es nicht einfacher, denn für die heutigen Geräte brauchst Du so genanntes responsives Layout, was einige modernere CSS Techniken benötigt um zu wirklich gut aussehenden Seiten zu führen. Unser Wiki hat da Tutorials.

        Du musst Dir überlegen, wie der Header auf einem Smartphone (oder generell auf einem schmalen Viewport) aussehen sollte. Du kannst da nicht alles haben: Sonnensymbol, Yoga-Bild, Adresse und Bild der Lehrerin. Man könnte das Yoga-Bild oder das Lehrerin-Bild in die Sonne hineinsetzen, man könnte die Adresse auf eine separate Kontaktseite auslagern.

        Um die Darstellung für unterschiedliche Viewportgrößen umzuschalten, verwendet man Medienabfragen (mehr dazu in unserem Wiki). In einem Stylesheet schreibt man z.B.:

        @media (min-width: 40em) {
           /* CSS Regeln für Viewports ab 40em Breite */
        }
        

        Wo für Dich der ideale Umschaltpunkt ist, musst Du für deine Seite ermitteln. Was ein em ist, hängt von den Anwendereinstellungen ab. Wer einen großen Font verwendet (oder starken Zoom), für den sind 40em viel mehr als für Freunde der Lupenschrift. Für deine Nutzer heißt das aber: Wenn jemand auf dem Desktop stark zoomed, oder den Browser schmal macht, bekommt automatisch die Mobilansicht.

        Manche machen auch 3 Layouts, mit 2 Umschaltpunkten.

        Gestalte deine Seite also erst einmal so, dass sie auf einem Smartphone gut aussieht. Das nennt man "mobile first" und ist - angesichts der Dominanz von Smartphone-Nutzern - der heute übliche Weg zum Seitenlayout. Und dann sorge mit Media-Abfragen dafür, dass Du auf Bildschirmen, die breit genug sind, eine dafür angemessenere Ansicht bekommst.

        Ich habe Dir mit JSFiddle ein Beispiel gemacht, was mit Media-Abfragen und geschicktem CSS möglich sein kann. Darin verwende ich (was Du Dir dann ggf. in unserem Wiki durchlesen solltest)

        • display:flex, um das h1-Element unten anzuordnen
        • h1::after, um das Logo-Bild per CSS einzusteuern
        • Ein JPG Bild der Wikipedia, um zu zeigen wie man auch ohne transparenten Hintergrund ein rundes Logo hinbekommt. Das ist für die folgende Bemerkung zu Bildern wichtig
        • drei Media-Breaks für eine Variation der Darstellung bei verschiedenen Breiten. Das Bild der Lehrerin ist ganz bewusst als background-image eines ::after Elements erstellt, damit es bei schmalen Viewports überhaupt nicht erst vom Server geholt wird.

        Noch ein Hinweis zu deinen Bildern: es bringt wenig, ein 600x600 Bild mit 283KB Datenmasse auf 180x180 darzustellen. Eine höhere Auflösung als die dargestellte Größe ist okay, darüber freuen sich die Leute mit Retina-Displays, aber die doppelte Auflösung reicht völlig. Und schon ist das Bild auf 134KB herunter. Speicherst Du es als JPG mit 30% Qualität, sind es plötzlich nur noch 25KB. Mobilnutzer freut das. Natürlich fehlt Dir dann der transparente Hintergrund, aber da dein Logo rund ist, kannst Du dich bei einer Größe von 180x180 mit einem border-radius von 90px retten. Bzw. wenn Du korrekterweise mit der Maßeinheit em arbeitest, kannst Du eine Größe von beispielsweise 10em mal 10em und einem border-radius von 5em verwenden.

        Das ist keine Pfennigfuchserei für Leute die sich keinen Datentarif leisten wollen. Es gibt eine Menge Regionen in diesem unserem Lande, wo man kein G4 hat und sich mit EDGE quälen muss. Unnötig große Bilder führen dann zum vorzeitigen Verlassen der Seite.

        Rolf

        --
        sumpsi - posui - clusi