Layout,flex,media queries
Frage aus den Chat.
Ich habe 4 Container die 2 x 2 angeordnet sind
Wie kann man das machen das ein an einer Größe von 750 Pixel die Container neben einander liegen und unter kleiner als 750 Pixel sollen sie übereinander liegen. Die Containersoll immer den ganzen Bilschirm ausfüllen
Der hier verwendete Code
<!DOCTYPE html><html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
}
header{
height:auto;
background:red;
color:white;
font-size:100%;
}
#headmitte> img{
height:100px;
width:50%;
margin:20px 0 0 20px;
padding:0;
}
main{
max-width: 1500px;
display: flex;
flex-direction: column;
}
.line1,.line2{
display:flex;
flex-direction:row;
}
.element{
flex:1;
margin: 1%;
max-width:750px;
background-color: lightblue;
}
.element img{
width: 80%;
margin-left:10%;
margin-top:10px;
}
.element .content {
padding: 3%;
}
footer{
height:50px;
background:#123456;
color:white;
text-align:center;
}
#nav1,#nav2{
width:100%;
height:50px;
background:green;
}
#nav1 li{
float:right;
list-style:none;
padding:0 20px 0 20px;
line-height:3;
width:100px;
}
#nav2 li{
float:right;
list-style:none;
padding:0 20px 0 20px;
line-height:3;
width:100px;
}
.menu a{
text-decoration:none;
margin:2px 10px 2px 10px;
}
@media screen and (max-width: 750px) {
#line1,#line2{
display:flex;
flex-direction:column;
}
header,footer{
font-size:80%;
}
}
@media screen and (min-width: 751px) {
#line1,#line2{
display:flex;
flex-direction:row;
}
}
#nav1u{
display:none;
}
@media screen and (max-width: 480px){
#nav1,#nav2{
display:none;
}
#nav1u{
display:block;
}
#headmitte> img{
height:100px;
width:calc(100% - 40px);
margin:20px 0 10px 20px;
padding:0;
}
.menu .element{
width: 200px;
position: fixed;
background:blue;
}
.menu_list {
margin: 0;
padding: 0;
}
.sublist {
padding: 0;
position: absolute;
top: 16px;
display:none
}
.subelement {
background:blue;
}
.element:hover .sublist{
display: block;
height: 30px;
width: 200px;
background: #FFFFFF;
box-shadow: 0 0 4px black;
}
a {
text-decoration: none;
color: black;
font-weight: 700;
}
}
</style>
</head>
<body>
<header>
<div id="nav1u" class="menu">
<ul class="menu_list">
<li class="element"><a href="#about">About</a>
<ul class="sublist">
<li class="subelement"><a href="#about1">About1</a></li>
<li class="subelement"><a href="#about2">About2</a></li>
<li class="subelement"><a href="#about3">About3</a></li>
<li class="subelement"><a href="#about3">About4</a></li>
<li class="subelement"><a href="#about3">About5</a></li>
<li class="subelement"><a href="#about3">About6</a></li>
</ul>
</li>
</ul>
</div>
<div id="nav1" class="menu">
<li class="subelement"><a href="#about1">About1</a></li>
<li class="subelement"><a href="#about2">About2</a></li>
<li class="subelement"><a href="#about3">About3</a></li>
</div>
<div id="headmitte"><img src="/image/laout_erstellen.png" id="logo"></div>
<div id="nav2" class="menu">
<li class="subelement"><a href="#about1">About4</a></li>
<li class="subelement"><a href="#about2">About5</a></li>
<li class="subelement"><a href="#about3">About6</a></li>
</ul>
</div>
</header>
<main>
<div id="line1">
<div class="element">
<img src="/image/laout_erstellen.png" id="logo"> <div class="content"> <h2> Wohnen </h2> <p>Wo werden Wohnungen gebraucht? Wo gibt es Leerstand? Auf diese Frage will die Vision Bergstraße Antworten finden.</p> </div> </div>
<div class="element"> <img src="/image/laout_erstellen.png" id="logo"> <div class="content"> <h2> Gesundheit </h2> <p>Die Bevölkerung ändert sich - die gesundheitliche Versorgung muss sich anpassen. Was brauchen wir im Kreis Bergstraße?</p> </div> </div>
</div>
<div id="line2">
<div class="element"> <img src="/image/laout_erstellen.png" id="logo"> <div class="content"> <h2> Infrastruktur </h2> <p>Vom Einzelhandel über Kitas bis hin zum ÖPNV: Was braucht der Kreis Bergstraße in Zukunft für eine Infrastruktur?</p> </div> </div>
<div class="element"> <img src="/image/laout_erstellen.png" id="logo"> <div class="content"> <h2> Bisherige Online-Dialoge zur Vision Bergstraße </h2> <p>Was ist Ihnen wichtig für den Kreis Bergstraße? Zum Start der Vision Bergstraße im November 2017 konnten Sie sich auf dieser Plattform in einer Umfrage beteiligen. Die Ergebnisse der Umfrage finden Sie hier.</p> </div> </div>
</div>
</main>
<footer>Hiermachtman dieFuß Datein rein wie Datenscutz Lins und co </footer>
</body></html>