Lösungen ,

flexbox-youtube-responsive-einbinden.php

Quell Code

<!DOCTYPE HTML> 



<html lang="zxx"> 


<head> 


<meta charset="utf-8"> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 


<title>Flexbox layout</title> 


<meta name="description" content="5G-freie Schweiz.ch - Informationen über 5G"> 


<meta name="viewport" content="width=device-width, initial-scale=1.0"> 


<style> 


*{ 


margin:0; 


padding:0; 


} 






body { 


background-color: #4e535d; 


display:flex; 


flex-direction:column; 


} 


header { 
width: 100%; 
height: 170px; 
background-color: #4e535d; 
color: white;
text-align: center; 
font-family: "Alien Encounters", "Arial Black", Verdana; 
} 






#unten img {


margin-top:16px;
height: 62px;


} 






#oben img { 


height: 164px; 


width: 1901px; 








} 


nav { 


list-style-type: none; 


background-color:#2e3545; 


width:calc(100% - 10px);














} 






nav li { 
display: inline-block;
margin-left: -4px;


} 






nav a { 


display: inline-block; 


color: white; 


font-family: Arial, Verdana, sans-serif; 


font-size: 0.8125em; 


height:100%; 


width:100%; 


padding:20px 16px 20px 6px; 


text-decoration:none; 


} 


nav >ul> li:nth-child(1){ 


background-color: #1e1d24; 


border-right: 2px solid #4e535d; 


width: 130px; 


text-align:center; 


margin-left: 433px;


} 


nav >ul> li:nth-child(2){ 


background: #1e1d24; 


width: 210px; 


text-align: center; 


} 


nav >ul> li:nth-child(3){ 


background: #1e1d24; 


border-left: 2px solid #4e535d; 


border-right: 2px solid #4e535d; 


width: 140px; 


text-align: center;
 


} 


nav >ul> li:nth-child(4){ 


background: #1e1d24; 


border-right: 2px solid #4e535d; 


width: 150px; 


text-align: center; 






}








main{ 


display:flex; 


flex-direction:row; 


} 


#left,#rechts{ 


flex:1; 


margin:110px; 


padding:20px;


color: #e6e6e6;


font-family: Arial, Verdana, sans-serif;


font-size: 0.8125em;






}




 


#mitte{ 


flex:6; 


display:flex; 


flex-direction:column; 


margin:-15px 0 0px 0; 














} 






#mitte_eins,#mitte_zwei,#mitte_drei,#mitte_vier,#mitte_fünf{ 


min-height: 100px; 


font-family: Arial, Verdana, sans-serif;


font-size: 0.77em;


height:auto; 


margin-bottom:10px;


background-color: #55607e;


padding-top:80px;


padding-left:85px; 


padding-bottom:105px;


padding-right:85px;
















} 






#mitte_eins{ 


color:white; 


margin-top: 1.8em;


text-align: justify;






} 


#mitte_eins img{ 


float:right; 


padding:0 0 0px 10px; 


} 


#mitte_zwei{ 


color:white; 


margin-top:5em;


text-align: justify;


} 




#mitte_zwei img{ 


float:right; 


padding:0 0 10px 10px; 
}








#mitte_drei{ 


color:white; 


margin-top:5em;


text-align: justify;


} 


#mitte_drei img{ 


float: right; 


padding:0 0 10px 10px; 


} 


#mitte_vier{ 


margin-top:5em;


color:white; 


text-align: justify; 


} 




#mitte_vier img{ 


float:right; 


padding:10px 0 10px 10px;
}




#mitte_fünf{ 


margin-top:5em;


color:white; 


text-align: justify; 


} 




#mitte_fünf img{ 


float:right; 


padding:10px 0 10px 10px;
}








footer{ 


background: #2e3545; 


height: 55px; 


text-align:center; 


color:white;
 
font-family: Arial, Verdana, sans-serif;


font-size: 70%; 


line-height:5.5; 


margin:0 0px 0 0px;


margin-top: -3px;




 




} 




a {text-decoration: none;
}




</style> 




<body> 


<header> 


<div id="oben">
<img class="bildheader" src="Wolken.jpg" alt="Header"> 
  </div>
 




</header> 








<nav> 


<ul class="nav"> 


<li><a href="index.html">Neuigkeiten</a></li> 


<li><a href="#buecherverzeichnis">Studien & Berichte</a></li> 


<li><a href="rezensionen.html">Videos</a></li> 


<li><a href="kontakt.html">Kontakt</a></li> 






</ul> 


</nav> 


<main> 








<div id="left">
Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.<br><br> Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.
</div> 










<div id="mitte"> 


<div style="line-height:2.2;" id="mitte_eins"> 










Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. <br><br> 




Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. <br><br>            


<a href="rezensionen.html#mitte_eins" style="color: white">Das Plocher-Energie-System - Ernstfried Prade, Roland Plocher&nbsp; &nbsp; <b> neu </b></a> <br><br>


<iframe width="100%" height="100%" src="https://www.youtube.com/embed/TAbuqoDSngU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>






 








</div> 




</div> 










<div id="rechts"> 


Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.<br><br> Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.




</div> 












</main> 


<footer> 


@ 2019 5G-freie Schweiz.ch


</footer> 


</body> 


</html>