Anzeige:
Ergebnis 1 bis 2 von 2

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

Baum-Darstellung

Vorheriger Beitrag Vorheriger Beitrag   Nächster Beitrag Nächster Beitrag
  1. #1
    Registrierter Benutzer
    Registriert seit
    06.03.2010
    Ort
    St. Petersburg, Russland
    Beiträge
    2.468

    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 12:08 Uhr)

Lesezeichen

Berechtigungen

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