Wie bekomme ich es hin, das die Kästen beim verkleinern des Fensters über die gesamte Länge geht?

 - (HTML, CSS, HTML 5)  - (HTML, CSS, HTML 5)  - (HTML, CSS, HTML 5)

3 Antworten

Setze dir einen Media Query, der die Breite der Navigation auf 100% setzt.

Beispiel für mobile Endgeräte im Porträt-Modus.

/* after your nav selector ... */

@media screen and (max-width: 320px) {
  nav {
    width: 100%;
  }
}

Des Weiteren solltest du noch ein paar Fehler beheben.

  1. Der Seitentitel (title) darf nicht leer sein.
  2. Im aside-Selektor fehlt nach width: 15% ein Semikolon.

Zudem noch ein Rat: Lasse Nutzern die Möglichkeit, frei zoomen zu können. Indem du bei der Viewport-Angabe die maximale Skalierung auf den initialen Wert beschränkst, unterbindest du das.

Wie bekomme ich es hin, das die Kästen beim verkleinern des Fensters über die gesamte Länge geht?

gib innerhalb der media query an, wie sich die einzelnen Blöcke verhalten sollen. Hier das Prinzip:

/* erst definierst Du alle Styles für den großen Screen */

nav { width:15% } 
aside { width: 15% }

/* am Ende definierst Du alle Styles für den kl. Screen */
/* diese überschreiben die oben gemachten Angaben       */
   
@media screen and (max-width:619px) {
   nav { width:100% }
   aside { width: 100% }     
}

Alex

Ich habe dir bereits ein Template erstellt und bereits unter deinen anderen Frage verlinkt. Lade es dir herunter und arbeite damit weiter. Grundsätzlich solltest du dir aber essentielles Grundlagenwissen zu HTML und CSS anlesen. Freunde dich vor allem mit dem CSS Box- und Flexbox-Model sowie mit CSS Grid an.

Ja, wie gesagt danke dafür. Mein Problem ist jetzt halt nur noch wie ich es hinbekomme, dass alle Boxen, beim verkleinern des Fensters dann über die gesamte Breite gehen. Das tun sie nämlich nicht

0
@Hendiplayer

Wenn du dir das Template anschaust, geschieht genau das. Da es bei den meisten Elementen um Blocklevel-Elemente, nehmen diese per Default eine Breite von 100% ein. Daher ist es ratsam nach dem Mobile-first Konzept vorzugehen.

Erstelle erst die Ansicht für kleine Devices unter deinen gewünschten 620 Pixel und anschließend für größere Displays. Dafür kannst du dann das CSS Box- oder Flexbox-Modell sowie CSS Grid verwenden.

0

Was möchtest Du wissen?