Wie bekomme ich es hin, das die Kästen beim verkleinern des Fensters über die gesamte Länge geht?
Ich habe bisher das:
und verkleinert sieht es so aus:
Aussehen soll es aber so:
Hier mein Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
header {
text-align: center;
font-size: 3em;
padding: 5px;
color: #fff;
background-color: #FFBF00;
}
.wrapper { display:flex }
@media screen and (max-width:620px) {
.wrapper {display:block }
}
nav {
width:15%;
text-align: center;
font-size: 2em;
padding-right: 60px;
color: #fff;
background-color: #819FF7;
margin-right: 10px;
margin-bottom: 150px;
}
a {color: #fff }
li {list-style: none }
article {
width:70%;
color: #BDBDBD;
}
aside {
color: #fff;
width: 15%
text-align: center;
font-size: 1em;
padding: 10px;
padding-right: 60px;
background-color: #01DFD7;
margin-bottom: 150px;
}
footer {
text-align: center;
font-size: 1em;
padding: 10px;
padding-right: 60px;
background-color: #D8D8D8;
color: #A4A4A4;
}
</style>
</head>
<body>
<header><h2>Header</h2></header>
<div class="wrapper">
<nav>
<ul>
<li><a href="" target="_blank">Link 1</a></li>
<li><a href="" target="_blank">Link 2</a></li>
<li><a href="" target="_blank">Link 3</a></li>
<li><a href="" target="_blank">Link 4</a></li>
</ul>
</nav>
<article>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam.</p>
</article>
<aside>
<h2>About</h2>
<p>Lorem ipsum dolor<br>
sit ametr,<br>
consecteteuer<br>
adipiscing elit.
</p>
</aside>
</div>
<footer>
<p>© </p>
</footer>
</body>
</html>
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.
- Der Seitentitel (title) darf nicht leer sein.
- 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.
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.
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