Anzeige:
Ergebnis 1 bis 2 von 2

Thema: Mit CSS Block bei großem Bildschirm neben, bei kleinem unter Haupttext positionieren

  1. #1
    Registrierter Benutzer
    Registriert seit
    06.03.2010
    Ort
    St. Petersburg, Russland
    Beiträge
    2.465

    Mit CSS Block bei großem Bildschirm neben, bei kleinem unter Haupttext positionieren

    Hallo ihr Lieben! Auf die Gefahr hin, dass hier keiner mehr mitliest...
    Ich habe auf meiner Seite das Menü als Linkliste konfiguriert und zwar so, dass es bei großen Bildschirmen rechts und links vom Haupttext steht und bei kleinen oben.
    Jetzt möchte ich noch ein paar Zusatzlinks angeben, die am Desktop auch an der Seite stehen sollen (ob rechts oder links. wäre zweitrangig), bei schmalen Bildschirmen (Handy) aber unten.
    Die einzige Lösung, die ich zustande gebracht habe, ist mit posiion:absolute, was mir nicht so gut gefällt, weil das Bild je nach Zeilenumbruch sehr unterschiedlich wird. Gibt es eine bessere Möglichkeit?
    Auch Antworten wie "das würde ich überhaupt alles ganz anders machen" sind willkommen, aber bitte im Rahmen von HTML und CSS.

    Hier das Minimalbeispiel:
    HTML
    Code:
    	<nav>
    	  <ul class="navi">
    	    <li><span>Hauptmenü</span></li>
    	  </ul>
    	  <ul class="navi2" aria-label="Menüfortsetzung">
    	    <li><span>Nebenmenü</span></li>
    	  </ul>
    	</nav>
    	<main>
      	<div class="Inhalt">
      Großes Textfeld mit Haupttext
      	</div>
    	  <aside>
    	    <ul class="secmenu">
    	      <li><span>Zusatzlinks</span></li>
    	    </ul>
    	  </aside>
    	</main>
    CSS
    Code:
    .Inhalt {
      background-color: yellow;
      min-height: 20em;
      margin: 0 15%
    }
    
    ul.navi,
    ul.navi2,
    ul.secmenu {
      background-color: green; margin:0; padding:0;
    }
    
    ul.navi li,
    ul.navi2 li,
    ul.secmenu li {
      list-style: none
    }
    
    @media (min-width:55rem) {
    
      ul.navi,
      ul.navi2 {
        margin-top: 1rem;
        width: 15%;
      }
    
      ul.navi {
        float: left;
      }
    
      ul.navi2 {
        float: right;
      }
    
      ul.secmenu {
        position: absolute;
        right: 0;
        top: 16rem;
        width: 10%;
      }
    }
    
    @media (max-width: 55rem) {
    
      ul.navi,
      ul.navi2 {
        float: none;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        margin-top: .5rem;
      }
    
    
      ul.secmenu {
        clear: both;
        max-width: 25em;
        flex: auto;
        margin: 0;
      }
    
    }
    https://jsfiddle.net/2x1cd5zy/
    Geändert von rstuby (22-04-2021 um 11:08 Uhr)

  2. #2
    Registrierter Benutzer
    Registriert seit
    06.03.2010
    Ort
    St. Petersburg, Russland
    Beiträge
    2.465
    Lösung gefunden! Für schmale Bildschirme lasse ich es wie es ist, für breite baue ich dieses Rasterschema von selfhtml.org nach: https://wiki.selfhtml.org/extensions...ml#view_result. Damit kann man Elemente unabhängig von ihrer Reihenfolge im HTML-Code platzieren, aber viel flexibler als mit position:absolute.

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •