VivienSchiller: Inhalt an Breite anpassen

SELF-Forum

Inhalt an Breite anpassen

VivienSchiller
– Informationen zu den Bewertungsregeln

Hallo, ihr Lieben!

Zum Thema wie man die Breite eines DIV-Containers an den Inhalt anpasst, findet man recht viel, doch leider nicht, wenn man es umgekehrt gestaltet werden soll. Also folgendes:

Ich habe eine responsive Seite mit einer absolut positionierten Navigation. Alles schick, bis man die Seite zusammenzieht. Sicherlich könnte man hier mit min-width arbeiten, fände ich aber aus ästhetischem Befinden eher ungünstig.

Daher die Frage: Wie erreiche ich es im Code, dass wenn die Seitenbreite < 630px ist, die Inhalte der Navigation abgekürzt werden? Muss ich das über ein Javascript lösen oder fallen euch da einfachere Wege ein?

Liebe Grüße und danke schonmal im voraus! :)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Inhalt an Breite anpassen

    Gunnar Bittersmann Homepage des Autors (Versionen)
    – Informationen zu den Bewertungsregeln

    @@VivienSchiller

    Ich habe eine responsive Seite mit einer absolut positionierten Navigation.

    Das hört sich an wie ein Oxymoron.

    Alles schick, bis man die Seite zusammenzieht.

    Also nicht responsiv.

    Sicherlich könnte man hier mit min-width arbeiten, fände ich aber aus ästhetischem Befinden eher ungünstig.

    Form follows function.

    Daher die Frage: Wie erreiche ich es im Code

    In welchem?

    dass wenn die Seitenbreite < 630px ist, die Inhalte der Navigation abgekürzt werden?

    Was heißt „abgekürzt“? Etwas weglassen? Wenn ja, warum ist es dann bei mehr Platz da? Entweder etwas ist wichtig und gehört auf die Seite oder es ist unwichtig und gehört nicht rauf.

    oder fallen euch da einfachere Wege ein?

    Der gängige Weg wäre mobile first[1] – zuerst für kleine Geräte gestalten und dann von klein nach groß zu gehen.

    LLAP 🖖

    --
    “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|

    1. Quelle: Brad Frost, The Many Faces of ‘Mobile First’ ↩︎

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Inhalt an Breite anpassen

    MrMurphy1
    −1 Informationen zu den Bewertungsregeln

    Hallo

    Da mir deine Navigation nicht bekannt ist habe ich mal ein einfaches Beispiel erstellt:

    <!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Menü Abkürzung 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         width: 96%;
         margin: 1rem auto;
      }
      nav {
         position: relative;
         display: flex;
         justify-content: space-around;
      }
      nav a {
         background-color: black;
         color: white;
         text-decoration: none;
         text-transform: uppercase;
         outline: none;
      }
      nav a:hover {
         background-color: blue;
         color: white;
      }
      nav a span {
         overflow: hidden;
         position: absolute;
         left: -10000px;
         top: auto;
         width: 1px;
         height: 1px;
      }
   }
   @media only screen and (min-width: 630px) {
      nav a {
         text-transform: none;
      }
      nav a span {
         position: static;
         left: 0;
         width: auto;
         height: auto;
      }
   }
   </style>
</head>
<body>
   <nav>
      <a href="#">V<span>olks</span>w<span>agen</span></a>
      <a href="#">R<span>olls-</span>R<span>oyce</span></a>
      <a href="#">M<span>ercedes </span>B<span>enz</span></a>
      <a href="#">A<span>ston </span>M<span>artin</span></a>
   </nav>
</body>
</html>

    Gruss

    MrMurphy

    Beitrag melden
    −1
    Informationen zu den Bewertungsregeln

    1. Inhalt an Breite anpassen

      Gunnar Bittersmann Homepage des Autors
      +1 Informationen zu den Bewertungsregeln

      @@MrMurphy1

           position: absolute;
     left: -10000px;

      Och nö, nicht schon wieder! Das Jahr 2012 hat angerufen. Es hätte gerne den 9999px-Hack zurück.

         @media only screen and (min-width: 630px) {

      Dass media queries in nicht in px, sondern in em angegeben werden sollten, ist auch nichts Neues.

            <a href="#">

      Woher kommt eigentlich die (Un)sitte, # für Beispiel-URIs zu verwenden?

      Ich würde i.A. sowas wie foo, bar verwenden oder <a href="…"> schreiben, wobei es hier auch <a href="vw"> etc. sein darf.

      LLAP 🖖

      --
      “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

    2. Inhalt an Breite anpassen

      Msass (Versionen)
      −2 Informationen zu den Bewertungsregeln 
      @media (max-width: 630px) {
      Elemente-die-ausgblendet-werden-sollen {
         display: none;
      }
}

      Du hast nach einer einfachen Lösung gefragt. Das hier ist die einfachste, die mir einfällt. Sollten die Menüpunkte, die ausgeblendet werden sollen, keine IDs oder Klassen haben, die du hierfür aufgreifen kannst, ändere dies. Ist mMn die einfachste Lösung.

      Liebe Grüße Rüdiger

      Beitrag melden
      −2
      Informationen zu den Bewertungsregeln

      1. Inhalt an Breite anpassen

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Msass

        Ist mMn die einfachste Lösung.

        Nein, das ist gar keine Lösung. Wie ich schon sagte.

        LLAP 🖖

        --
        “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Inhalt an Breite anpassen

          Msass (Versionen)
          – Informationen zu den Bewertungsregeln

          @@Msass

          Ist mMn die einfachste Lösung.

          Nein, das ist gar keine Lösung. Wie ich schon sagte.

          Das sehe ich anders. Beispielsweise könnte es sich um Unterkategorien handeln, die sehr wohl ausgeblendet werden können, weil man sie möglicherweise mit einem Klick mehr auch über die übergeordneten Menüpunkte erreicht. Nur ein Beispiel, ich könnte 10 weitere nennen. Wir kennen die betreffende Seite beide nicht, daher sollten wir uns an die Fragestellung halten. Und die war:

          "Daher die Frage: Wie erreiche ich es im Code, dass wenn die Seitenbreite < 630px ist, die Inhalte der Navigation abgekürzt werden? Muss ich das über ein Javascript lösen oder fallen euch da einfachere Wege ein?"

          Hierfür habe ich einen Lösungsvorschlag angeboten.

          Liebe Grüße Rüdiger

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Inhalt an Breite anpassen

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@Msass

            Nein, das ist gar keine Lösung. Wie ich schon sagte.

            Das sehe ich anders. Beispielsweise könnte es sich um Unterkategorien handeln, die sehr wohl ausgeblendet werden können,

            Mit dem im Sinn hättest du in deinem Beispielcode nicht Elemente-die-ausgblendet-werden-sollen, sondern nav ul ul { display: none} verwenden können.

            weil man sie möglicherweise mit einem Klick mehr auch über die übergeordneten Menüpunkte erreicht.

            Nutzer von Mobilgeräten einen Click mehr zum Navigieren (d.h. ein HTTP-Request/Response mehr) ausführen zu lassen, ist wohl auch nicht das Gelbe vom Ei. Durch die Latenz im Mobilfunknetz kostet der zusätzliche Roundtrip mehrere Sekunden – unakzeptabel.

            Wir kennen die betreffende Seite beide nicht

            Eben …

            daher sollten wir uns an die Fragestellung halten.

            … es gibt (noch) keine Fragestellung. Jedenfalls keine, die konkret genug wäre, dass man sie beantworten könnte.

            LLAP 🖖

            --
            “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
            Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Inhalt an Breite anpassen

              Gunnar Bittersmann Homepage des Autors
              – Informationen zu den Bewertungsregeln

              @@Gunnar Bittersmann

              weil man sie möglicherweise mit einem Klick mehr auch über die übergeordneten Menüpunkte erreicht.

              Nutzer von Mobilgeräten einen Click mehr zum Navigieren (d.h. ein HTTP-Request/Response mehr) ausführen zu lassen, ist wohl auch nicht das Gelbe vom Ei.

              Da fällt mit der Tweet von Jesse James Garrett wieder ein: “I remain amazed and perplexed at how often people think they can solve an information architecture problem with interaction design.”

              LLAP 🖖

              --
              “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
              Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln