CSS Flexbox

Maike81

Grünschnabel
Hallo ihr Lieben,

ich befasse mich gerade mit dem Thema Online-Marketing und bin absolute Anfängerin. Zum Thema CSS muss ich unten stehende Abbildung einer Webseite realisieren. Den grünen Block und die Navigation habe ich mit Hilfe der Flexbox hinbekommen. Allerdings verläuft die nav über die gesamte Höhe des grünen Blocks, sprich ich kriege den gelben Container rechts unten nicht hin. Kann mir jemand weiterhelfen?

Liebe Grüße
Maike
 

Anhänge

  • 20220118_225635_resize_61.jpg
    20220118_225635_resize_61.jpg
    215 KB · Aufrufe: 15
Und du glaubst wirklich, dass wir dir mit dem Screenshot helfen können? Oder könnte es vielleicht hilfreich sein, deinen HTML- und CSS-Code zu sehen? :ROFLMAO::LOL::D
 
Du hast natürlich Recht! Sorry, bin wie gesagt blutiger Anfänger und muss mich hier erst mal zurechtfinden ;)

Ich bin für jegliche Hilfe dankbar.

Hier meine Codes:

HTML:
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CSS Einsendeaufgabe</title>
<link href="css-aufgabe55.css" rel="stylesheet">
</head>

<body>
<div id="flexbox">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
<main>
<h1>CSS Einsendeaufgabe</h1>
<p class="grosstext">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>
<p class="kleintext">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>
</main>

</div>
</body>
</html>
CSS:
*{
margin: 0px;
}

body {
font: 100%/1.3 Verdana, Geneva, sans-serif;
color: #000;
background: #ADA189;
}
#flexbox {
max-width: 60rem;
background: #009900;
margin: 0 40px 60px 40px;
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
.grosstext {
font: Verdana, Geneva, sans-serif;
color: #000;
margin: 0;
padding: 0.5rem 0rem 0.5rem 0rem;
}
.kleintext {
font: Verdana, Geneva, sans-serif;
font-size: 75%;
color: #000;
margin: 0;
padding: 0.5rem 0rem 0.5rem 0rem;
}
nav {
text-align: left;
width: 24%;
padding: 1rem;
background: #66B2FF;
color: #FFF;
}
h1 {
padding: 1rem 0rem 0.5rem 0rem;
}
main {
flex: 1;
padding: 1rem;
border-left: 0.1rem solid #877D6C;
}

aside {
background: #FFFF9;
padding: 1rem;
}
nav ul {
margin: 0;
padding: 0.1rem;
}

nav li {
margin: 0.5rem 0;
font-size: 120%;
list-style-type: none;
padding: 0.5rem;
}
nav a:link {
display: block;
background-color: #000099;
border-radius: 0.3em;
width: 50%;
font-size: 1rem;
margin: 0.2rem;
padding: 0.2rem;
color: #FFF;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
 
Zuletzt bearbeitet:
Wenn Du das Layout mit Flex realisieren willst, brauchst Du rechts einen weiteren Container, dafür würde sich ein aside-Tag anbieten. Darin kannst Du dann die Nav und den gelben Container mit flex-direction untereinander anordnen.
 
Ok, ich hatte das div-Tag als Flexbox gesetzt damit ich die Nav über flex-direction nach rechts bekomme. Nun setze ich aber das aside-Tag als Flexbox (antatt div) und ordne nav und den gelben Container (kann ich den als div bezeichnen?) mit flex-direction untereinander an. Habe ich das richtig verstanden?
 
Huhu, ich habe es ausprobiert, mache aber irgendwas falsch:

- auf Grund "flex-direction: column" wird das nav nicht mehr rechts angezeigt
- wenn ich für den gelben Container ein div einfüge, erscheint dieser nur, wenn ich diesem einen Text (hier ein "#") zuteile. Wie kriege ich es hin, dass der Container einfach nur gelb ist, ohne Text?
- die Flexbox wird unter dem main-Element positioniert. Wie kriege ich sie rechts daneben?
- wie kann ich die Höhe der Flexbox, dem nav und dem gelben Container anpassen? Habe es schon mit "height" versucht aber das funktioniert nicht

So viele Fragen :(

HTML:
!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CSS Einsendeaufgabe</title>
<link href="css-aufgabe86.css" rel="stylesheet">
</head>

<body>
<main>
<h1>CSS Einsendeaufgabe</h1>
<p class="grosstext">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>
<p class="kleintext">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>
</main>
<aside id="flexbox">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
<div>#</div>
</aside>
</body>
</html>
CSS:
*{
margin: 0px;
}
body {
font: 100%/1.3 Verdana, Geneva, sans-serif;
color: #000;
background: #ADA189;
margin: 0 40px 60px 40px;
}
#flexbox {
max-width: 60rem;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
nav {
text-align: left;
width: 24%;
background: #66B2FF;
color: #FFF;
}
div {
background: #FFFF66;
width: 24%;
}
.grosstext {
font: Verdana, Geneva, sans-serif;
color: #000;
margin: 0;
padding: 0rem 1rem 0.5rem 1rem;
}
.kleintext {
font: Verdana, Geneva, sans-serif;
font-size: 75%;
color: #000;
margin: 0;
padding: 0.5rem 1rem 1.5rem 1rem;
}
h1 {
padding: 2rem 1rem 1rem 1rem;
}
main {
flex: 1;
background: #009900;
width: 48%;
}
nav ul {
margin: 0;
padding: 0.1rem;
}
nav li {
margin: 0.5rem 0;
font-size: 120%;
list-style-type: none;
padding: 0.5rem;
}
nav a:link {
display: block;
background-color: #000099;
border-radius: 0.3em;
width: 50%;
font-size: 1rem;
margin: 0.2rem;
padding: 0.2rem;
color: #FFF;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
 
Ist doch schon ganz gut soweit, vor allem, dass das "rtl" verschwunden ist und die Container in der Reihenfolge stehen, wie sie angezeigt werden.
- auf Grund "flex-direction: column" wird das nav nicht mehr rechts angezeigt
Das trifft nicht ganz zu, denn das "flex-direction: column" bezieht sich auf den rechten Container "aside". Dass sie untereinander angezeigt werden, liegt daran, dass das das Standardverhalten von Blockelementen ist. Du kannst sie ganz einfach nebeneinander anordnen indem Du "body" ein "display: flex;" gibst.

- wenn ich für den gelben Container ein div einfüge, erscheint dieser nur, wenn ich diesem einen Text (hier ein "#") zuteile. Wie kriege ich es hin, dass der Container einfach nur gelb ist, ohne Text?
Auch das ist ein Standardverhalten: Die Höhe richtet sich nach dem Inhalt, steht nichts darin, ist die Höhe 0 und der Container nicht sichtbar. Du kannst mit
Code:
aside div {
    flex: 1;
}
erreichen, dass der Container von der Höhe her den freien Platz ausfüllt.

Danach sieht dann die Nav noch nicht so gut aus, das liegt daran, dass sie noch eine Breite von 24% hat und die Breite bezieht sich auf das Elternelement, hier das aside. Nimmst Du diese Breite heraus, sieht es gleich viel besser aus.
 
Zuletzt bearbeitet:
Ok, danke Dir, dass Du mir so hilfst. So langsam nimmt es Form an :)

Ich habe alles soweit umgesetzt aber der gelbe Container will nicht höher werden. Habe nun schon die margin bei "nav li" auf 0 gesetzt, sonst taucht er gar nicht auf. Aber ich verstehe nicht warum im nav-Element unter Link 3 noch so viel Platz ist!?

Noch eine andere Frage, das ganze Layout soll "flüssig" sein. Daher hatte ich "#flexbox" die max-width: 60rem gegeben. Ist das richtig oder muss nun "body" diesen Wert bekommen?

HTML
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CSS Einsendeaufgabe</title>
<link href="css-aufgabe115.css" rel="stylesheet">
</head>

<body>
<main>
<h1>CSS Einsendeaufgabe</h1>
<p class="grosstext">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>
<p class="kleintext">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>
</main>
<aside id="flexbox">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
<div>
</div>
</aside>
</body>
</html>
CSS
*{
margin: 0px;
}
body {
font: 100%/1.3 Verdana, Geneva, sans-serif;
color: #000;
background: #ADA189;
margin: 0 40px 60px 40px;
display: flex;
}
main {
background: #009900;
width: 48%;
}
h1 {
padding: 2rem 1rem 1rem 1rem;
}
aside {
width: 17%;
}
#flexbox {
max-width: 60rem;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
nav {
text-align: left;
background: #66B2FF;
color: #FFF;
}
nav ul {
margin: 0;
padding: 1rem 0.6rem 0.6rem 0.6rem;
}
nav li {
margin: 0;
font-size: 120%;
list-style-type: none;
padding: 0.5rem;
}
aside div {
flex: 1;
background: #FFFF66;
}
.grosstext {
font: Verdana, Geneva, sans-serif;
color: #000;
margin: 0;
padding: 0rem 1rem 0.5rem 1rem;
}
.kleintext {
font: Verdana, Geneva, sans-serif;
font-size: 75%;
color: #000;
margin: 0;
padding: 0.5rem 1rem 1.5rem 1rem;
}
nav a:link {
display: block;
background-color: #000099;
border-radius: 0.3em;
width: 50%;
font-size: 1rem;
margin: 0.2rem;
padding: 0.2rem;
color: #FFF;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
 

Anhänge

  • Screenshot.png
    Screenshot.png
    59,2 KB · Aufrufe: 5
Zurück