Hans: CSS: margin-top unkompliziert ändern bei mobilem Endgerät

Hallo Leute,

ich bastele mir wieder eine Homepage und merke, wie eingeschränkt meine Kenntnisse zum responsiven Design sind.

Folgender Code:

<div style="opacity: 0.7;margin-top:5%;background-color:grey;width:100%;">

funktioniert wie erwartet, nur auf meinem kleinen Smartphone müsste man bei "margin-top" anstelle von 5% 10% angeben. Gibt es eine einfache Möglichkeit das umzusetzen, vielleicht auch ohne Javascript?

Danke und viele Grüße!

  1. Servus!

    Hallo Leute,

    ich bastele mir wieder eine Homepage und merke, wie eingeschränkt meine Kenntnisse zum responsiven Design sind.

    Folgender Code:

    <div style="opacity: 0.7;margin-top:5%;background-color:grey;width:100%;">

    funktioniert wie erwartet, nur auf meinem kleinen Smartphone müsste man bei "margin-top" anstelle von 5% 10% angeben. Gibt es eine einfache Möglichkeit das umzusetzen, vielleicht auch ohne Javascript?

    Ja, natürlich!

    Optimalerweise packst Du die Stilangaben in ein style-Element. Dort kannst du dann eine media query integrieren.

    div {
      opacity: 0.7;
      margin-top: 10%;
      background-color:grey;
      width:100%;  /* ist bei div-Elementen sowieso 100% */
    } 
    
    @media (min-width: 30em)  { 
      div {
        margin-top: 5%;
      }
    }
    

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. Hallo,

      besten Dank, das war genau der richtige Hinweis :)

      Gruß Hans

      1. @@Hans

        besten Dank, das war genau der richtige Hinweis :)

        Nein.

        (Kann man hier eigentlich auch halbe Minuspunkte vergeben? 🤔)

        🖖 Живіть довго і процвітайте

        --
        When the power of love overcomes the love of power the world will know peace.
        — Jimi Hendrix
    2. @@Matthias Scharwies

      Optimalerweise packst Du die Stilangaben in ein style-Element. Dort kannst du dann eine media query integrieren.

      Es ist womöglich gar nicht die beste Idee, eine media query zu integrieren.

      Man will einen Mindestwert für den Abstand angeben, d.h. der Abstand soll 5% sein, aber bspw. 2rem nicht unterschreiten:

      div { margin-top: max(5%, 2rem) }
      

      Einfacherer, besser wartbarer Code.

      Und der würde auch als Inline-Style gehen. Was nicht heißen soll, dass man das tun sollte.

      🖖 Живіть довго і процвітайте

      --
      When the power of love overcomes the love of power the world will know peace.
      — Jimi Hendrix
      1. danke auch dafür. Was sind dem "rem"?

        1. achso, ich vermute mal, dass das nicht funktionieren wird:

          Es gibt eine Navigationsleiste mit mehreren Links, die nur auf mobilen Endgeräten umgebrochen wird. Wenn das passiert, lässt sich der oberste Text in dem Div nicht mehr lesen. Gibt es nicht eine "margin-top"-Angabe, die sich nur relativ auf das nächste Element darüber bezieht und nicht auf den Seitenanfang? Hatte mal mit dem "z-index" herumprobiert, jedoch ohne Erfolg. Das wäre vermutlich das Einfachste.

          1. @@Hans

            Es gibt eine Navigationsleiste mit mehreren Links …

            Link zur fraglichen Seite?

            🖖 Живіть довго і процвітайте

            --
            When the power of love overcomes the love of power the world will know peace.
            — Jimi Hendrix
            1. problematische Seite

              Hi, habe den Link oben gepostet.

              1. problematische Seite

                Hallo Hans,

                hm, das ist ein sticky header der ggf. umbricht - da hilft nur JavaScript. Oder eine Restrukturierung der Seite in ein 100% Grid, d.h. den Body auf 100vh Höhe setzen (margins entfernen) und als Grid unterteilen. Bleistiftsweise so:

                body {
                  margin: 0;
                  height: 100vh;
                  display: grid;
                  grid-template-columns: auto 1fr auto;
                }
                header {
                  font-size: 1.5rem;
                  grid-row: 1 / 2;
                }
                main {
                  grid-row: 2 / 3;
                  background-color: #808080b2;   // Grey mit 70% Transparenz
                  overflow-y: scroll;
                }
                footer {
                  grid-row: 3 / 4;
                  border-top: medium solid #666;
                  padding-bottom: 1em;
                }
                

                mit diesem Markup:

                <body>
                   <header>Dein Menübereich</header>
                   <main>Dein Inhalt</main>
                   <footer>Dein Footer</footer>
                </body>
                

                Header und Footer sind damit ständig sichtbar und nur der main-Bereich scrollt vertikal.

                Außenabstände macht man mit Margin, Innenabstände mit Padding. Niemals mit <br> - das ist nur sinnvoll, wenn man gezielt Zeilenumbrüche im Fließtext braucht und mit <p> Elementen, ggf. <span> Elementen sowie der CSS Eigenschaft white-space nicht hinkommt. Also selten bis nie.

                Rolf

                --
                sumpsi - posui - obstruxi
              2. problematische Seite

                @@Hans

                Hi, habe den Link oben gepostet.

                Da kommen wir der Sache schon näher. Du willst verhindern, das der Anfang des Hauptinhalts unter den fixen Header rutscht (beim Laden der Seite).

                margin-top in % ist dazu der völlig falsche Weg. Du weißt nicht, in welchem Verhältnis die Headerhöhe zur Viewporthöhe steht.

                Und du weißt auch nicht, bei welcher Vieportbreite das Menü im Header zweizeilig wird. (Du weißt es auf deinem System; aber nicht, wie es bei anderen ist, wo möglicherweise der Text in einer anderen Schriftart/-größe dargestellt wird.) Deshalb ist auch media query hier der völlig falsche Weg.

                Die gute Nachricht aber ist: Du brauchst (fürs erste) gar kein margin-top, um der Anfang des Hauptinhalts nicht unter den fixen Header rutschen zu lassen. Setze den Header nicht auf position: fixed, sondern auf position: sticky – fertig …

                … fast. Wenn ein Link auf Seitenabschnitt angesprungen wird, soll dessen Anfang (dessen Überschrift) auch nicht unter den Header rutschen – wie in diesem Beispiel.

                Und dann muss man doch die (unbekannte) Höhe des Headers verwenden und der CSS-Eigenschaft scroll-padding-top zuweisen. Um nicht direkt mit JavaScript im CSS rumzupfuschen per custom property:

                html { scroll-padding-top: var(--header-height) }
                

                Die Ermittlung der aktuellen(!) Headerhöhe per ResizeObserver und Übergabe an die custom property wie unlängst gezeigt:

                const resizeObserver = new ResizeObserver(entries => {
                  document.documentElement.style.setProperty(
                    '--header-height', `${entries[0].target.offsetHeight}px`
                  );
                });
                
                resizeObserver.observe(document.querySelector('.w3-top'));
                

                wie in diesem Beispiel.

                Bei dir ist .w3-top das zu überwachende Element. Das sollte aber kein div, sondern ein header sein, vermutlich mit nav drin (oder gleich nav ohne header.

                Das andere div wäre gern ein main-Element, siehe Seitenstrukturierung.


                Eine andere Möglichkeit wäre, gar nicht den ganzen Viewport scrollen zu lassen, sondern nur den Hauptbereich, so wie hier.

                🖖 Живіть довго і процвітайте

                --
                When the power of love overcomes the love of power the world will know peace.
                — Jimi Hendrix
                1. problematische Seite

                  Hallo Gunnar und Rolf,

                  danke für die ausführlichen Tipps. Ich probiere das aus und melde mich nochmal.

                  Schöne Ostern!

                  1. problematische Seite

                    @@Hans

                    Hallo Gunnar und Rolf,

                    danke für die ausführlichen Tipps. Ich probiere das aus und melde mich nochmal.

                    Wobei das von Rolf Gesagte dem entspricht, was ich zuletzt unterm Strich sagte. Dass er das mit Grid gemacht hat und ich im verlinkten Codepen mit Flexbox, ist in diesem Fall eine Nebensächlichkeit. (Ich müsste sehr lange nachdenken, ob eins davon in diesem Fall besser geeignet wäre als das andere. Zunächst fällt mir nur ein: beides gleichwertig.)

                    🖖 Живіть довго і процвітайте

                    --
                    When the power of love overcomes the love of power the world will know peace.
                    — Jimi Hendrix
                    1. problematische Seite

                      Hallo Leute,

                      die Änderung auf "sticky" war der richtige Hinweis. Ich bin begeistert. So einfach! Habe wieder Lust, mich mit der Materie zu beschäftigen :)

                      Danke und Beste Grüße! Hans

                      1. problematische Seite

                        achso, eine Sache noch:

                        Kann ich nicht das "Ankerproblem" elegant vermeiden, in dem ich den Ankerpunkt einfach etwas höher setze? Dann würde die Überschrift elegant an die richtige Stelle gleiten.-

                        Gruß Hans

                        1. problematische Seite

                          @@Hans

                          Kann ich nicht das "Ankerproblem" elegant vermeiden, in dem ich den Ankerpunkt einfach etwas höher setze?

                          Genau das tut ja die CSS-Eigenschaft scroll-padding-top.

                          Das Problem dabei ist, dass du nicht wissen kannst, wieviel „etwas“ ist. Das ist von Gegebenheiten beim Nutzer wie verwendete Schriftart und -größe (die du nicht wissen kannst) abhängig und kann sich auch noch dynamisch ändern (z.B. bei Änderung der Viewportgröße ). Deshalb das JavaScript, das ermittelt, wie groß „etwas“ denn nun aktuell ist.

                          🖖 Живіть довго і процвітайте

                          --
                          When the power of love overcomes the love of power the world will know peace.
                          — Jimi Hendrix
        2. @@Hans

          Was sind dem "rem"?

          root em.

          Siehe MDN

          🖖 Живіть довго і процвітайте

          --
          When the power of love overcomes the love of power the world will know peace.
          — Jimi Hendrix