Hallo,
bin relativ neu im Bereich CSS. Ich habe mir ein Lehrbuch gekauft und habe dieses jetzt durch. Ich habe beschlossen mein Webdesign mit Flexboxen zu positionieren. Nun stehe ich vor folgendem Problem. Ich habe mein Header dann auf der linken Seite ein Navi dann der Main Bereich (Artikel etc.) und dann nochmal ein 2tes Navi. Nun will ich aber das ich unter dem 1 Navi ein weiteres bekomme es aber auf der Höhe vom Mainbereich bleibt. SPrech sie sollen sich die Höhe vom Main Menü teilen.
Habe im Anhang eine Skizze dazu.
Mein Code sieht aktuell so aus ( Ja ich weiß ist noch etwas unübersichtlich)
Vielen Dank für eure Hilfe !
bin relativ neu im Bereich CSS. Ich habe mir ein Lehrbuch gekauft und habe dieses jetzt durch. Ich habe beschlossen mein Webdesign mit Flexboxen zu positionieren. Nun stehe ich vor folgendem Problem. Ich habe mein Header dann auf der linken Seite ein Navi dann der Main Bereich (Artikel etc.) und dann nochmal ein 2tes Navi. Nun will ich aber das ich unter dem 1 Navi ein weiteres bekomme es aber auf der Höhe vom Mainbereich bleibt. SPrech sie sollen sich die Höhe vom Main Menü teilen.
Habe im Anhang eine Skizze dazu.
Mein Code sieht aktuell so aus ( Ja ich weiß ist noch etwas unübersichtlich)
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>....</title>
</head>
<style>
body { <!--Hintergrundfarbe-->
background-color: #fafafa;
font-family: calibri;
min-width: 660px;
max-width: 60em;
margin: 0 auto;
}
#row
{
margin-bottom: 10px;
display: flex;
flex-direction: row;
}
#mainnav
{
flex: 0 0 260px;
padding: 2% 2%;
border: 1px solid black;
}
#mainnav2
{
flex: 0 0 260px;
padding: 2% 2%;
border: 1px solid black;
}
#column
{
flex-direction: column
display: flex;
}
header
{
display: flex;
flex-flow: row wrap;
padding: 2% 2%;
margin: 0;
border: 1px solid black;
}
main
{
flex: 4 0 600px;
padding: 2% 2%;
margin: 0;
border: 1px solid black;
}
h1 {
text-align:center;
}
.title {
width: 300px;
}
textarea {
width: 300px;
height: 50px;
}
details {
padding: 5px;
}
label {
width: 10em;
display: block;
float: left;
}
</style>
<div id="column">
<header>Hallo</header></div>
<div id="row">
<nav id="mainnav">
<h3>Nagu</h3>
<ul>
<li>Link</li>
<li>Liunk2</li>
</ul>
</nav>
<nav id="mainnav2">
<h3>Nagu</h3>
<ul>33
<li>Link</li>
<li>Liunk2</li>
</ul>
</nav>
<main>
<article class="articel01">....
</article>
</main>
</div>Vielen Dank für eure Hilfe !
Ist ja eigentlich total einfach und logisch. :) 
