D
Dreifach
Member
- Beiträge
- 8
- Punkte Reaktionen
- 0
hallo zusammen, kann mir jemand vielleicht helfen, ich sitze an einer aufgabe (html + css) habe die aufgabe noch einmal neu angefangen usw. da ich es wohl schon überkompliziert hatte 
mir geht es jetzt erstmal nur darum das die navi/links bei verkleinerung also mobile ansicht, sich dann fließend untereinander anordnen sollen, also auch nicht auf einmal alle untereinander sondern ebern der breite entsprechend sich anpassen, die Links sollen auch alle im header bleiben...aktuell bleiben sie einfach stehen (bin mir auch bei den media query nicht sicher)
ich hoffe das macht sinn und hoffentlich mache ich es richtig mit den codes ->
</html>
[/CODE]
mir geht es jetzt erstmal nur darum das die navi/links bei verkleinerung also mobile ansicht, sich dann fließend untereinander anordnen sollen, also auch nicht auf einmal alle untereinander sondern ebern der breite entsprechend sich anpassen, die Links sollen auch alle im header bleiben...aktuell bleiben sie einfach stehen (bin mir auch bei den media query nicht sicher)ich hoffe das macht sinn und hoffentlich mache ich es richtig mit den codes ->
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RWD-Beispiel Mobile First</title>
<link rel="stylesheet" href="rwd-mobile-first-UPDATED.css">
</head>
<body>
<div id="holder">
<header>
<img src="logo.jpg" alt="xxxxxx">
<nav>
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">seite 2</a></li>
<li><a href="#">seite 3</a></li>
<li><a href="#">seite 4</a></li>
<li><a href="#">seite 5</a></li>
</ul>
</nav>
</header>
<main>
<section>
<article>
<p>LLorem 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 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.</p>
</article>
<aside>
<h2>zeiten~</h2>
<ul>
<li>Dienstag - Sonntag: 11:00 - 14:30 Uhr und 18:00 - 24:00 Uhr</li>
<li>Mittwoch: 18:30 - 24:00 Uhr</li>
</ul>
</aside>
</section>
</main>
</div>
</body>
[CODE=css]*, *::before, *::after {
box-sizing: border-box;
}
body {
color: black;
background-color: #C2C2CA;
margin: 0;
}
#holder {
background-color: #ffffff;
}
header {
background-color: #414141;
display: flex; /* Flexbox verwenden */
justify-content: space-between; /* Platz zwischen den Elementen */
margin-left: 15px;
margin-right: 15px;
}
/* Fluid Image */
img {
max-width: 50%;
height: 90%;
display: block;
}
nav {
text-align: center;
display: flex;
}
nav ul {
padding: 0,5px;
margin: 1rem;
display: flex;
flex-direction: row;
justify-content: flex-end;
list-style: none; /* Listensymbole entfernen */
}
nav ul li {
display: flex;
margin-left: 1rem;
}
nav ul li a {
display: flex;
color: #F29C49;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
text-align: center; /* Zentrieren der Links */
}
nav ul li a:hover {
color: #bbbbbb; /* Farbe bei Hover-Effekt ändern */
}
nav ul li a.active {
color: #bbbbbb; /* Textfarbe für aktive Seite ändern */
}
main {
padding: 0 0.4rem;
}
main p {
font-size: 0.8rem;
line-height: 1;
}
aside {
width: 200px; /* Breite des aside-Elements */
background: #c2c2ca;
padding: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin-left: auto; /* Verschiebt das aside nach rechts */
margin-bottom: 20px; /* Fügt unten Abstand hinzu */
}
/*--------------------------------------------*/
/* Anpassungen für kleinere Bildschirme */
/* Media Query für kleinere Bildschirme (z.B. Smartphones) */
@media (max-width: 768px) {
{
flex-direction: column; /* Links vertikal anordnen */
align-items: left; /* Inhalt zentrieren */
}
aside {
width: 100%; /* Vollständige Breite auf kleinen Bildschirmen */
margin: 20px 0; /* Abstand oben und unten hinzufügen */
}
}
@media screen and (min-width: 40em) {
#holder {
display: flex;
flex-wrap: wrap;
width:75%;
max-width: 60rem;
margin: 0 auto 0 auto;
}
header {
width: 100%;
}
main {
flex: 1;
padding: 0 1rem;
border-left: 1px solid #877d6c;
border-right: 1px solid #877d6c;
}
main p {
font-size: 1rem;
line-height: 1.4;
}[/CODE]