Я пытаюсь получить в стороне, но у меня нет проблем с навигационным меню и в сторону. Текст будет около float:left для изображений 200x200. Я хотел бы позиционировать хорошо сделано, как изображение. Разве float:left и столбцы сетки не могут сосуществовать вместе?
Ожидаемая версия
Фактический код
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" http-equiv="Content-Type" content="text/html"/>
<title>Ma page</title>
<meta name="author" content="Erwan Dupeux-Maire" />
<meta name="keywords" content="html, xhtml, conception, creation de site web, realisation de site web, formation, cours" />
<meta name="description" content="Support du cours de conception et réalisation de sites Web en XHTML" />
<link href="style.css" rel="stylesheet">
</head>
<body>
<header class="header">
<nav class="nav">
<ul class="ul">
<li ><a class="accueil" href="index.html">Accueil</a></li>
<li><a href="Menu.html">Menu</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="https://grafikart.html">Grafikart</a></li>
</ul>
<h1 class="title">Restaurant le Fiasco</h1>
<img class="baniere" src="https://via.placeholder.com/1200x600" alt="banière restaurant le fiasco"/>
<div class="fondu"></div>
<div class="fondu2"></div>
</nav>
<div class="MonTitre">
<h2>Mon Titre</h2>
<p>Buzz Aldrin, né Edwin Eugene Aldrin Jr. le 20 janvier 1930 à Glen Ridge dans le New Jersey, est un militaire, pilote d'essai, astronaute et ingénieur américain. Il effectue trois sorties dans l'espace en tant que pilote de la mission Gemini 12 de 1966 et, en tant que pilote du module lunaire Apollo de la mission Apollo 11 de 1969, il est, avec le commandant de la mission Neil Armstrong, parmi les deux premiers humains à marcher sur la Lune.</p>
</div>
</header>
<div class="section1">
<h2 class="title_2">
A propos du restaurant
</h2>
<img class="200_1" src="https://via.placeholder.com/200x200" alt="200x200"/>
<img class="200_2" src="https://via.placeholder.com/200x200" alt="200x200"/>
<p class="paragraphe_arround">
Terminologie
Selon le dictionnaire de langue française le Larousse1 ainsi que l'Office québécois de la langue française2 (mais inconnu du Centre national de ressources textuelles et lexicales3), le terme « développeur » s'applique en informatique à une personne ou une société qui développe et conçoit des logiciels. Cependant, s'agissant d'une ...
</p>
</div>
<section class="aside">
<img class="aside-img-200x400" src="https://via.placeholder.com/200x400" alt="200x200"/>
</section>
</body>
</html>
body{
background-color: lightgrey;
}
.ul{
display: flex;
list-style: none;
flex-direction: row;
flex-wrap: wrap;
flex-shrink: 0;
flex-grow: 1;
flex-basis: auto;
justify-content: space-evenly;
align-items: end;
padding: 3px 20px 3px 20px;
background-color: rgba(117, 190, 218, 0.5);
}
ul li a{
width: 200px;
text-decoration: none;
color: white;
background-color: rgba(117, 190, 218, 0.2);
font-family: "Agency FB", sans-serif;
font-size: xx-large;
}
ul li a:hover{
background-color: black;
transition-delay: 300ms;
transition-property: background-color;
}
ul{
margin-left: 400px;
z-index: 5;
}
.baniere{
/*position: absolute;
top: 0;
left:0;
right:0;*/
z-index: -1;
width: 100%;
height: auto;
}
.title{
position: relative;
top: -40px;
padding: 10px;
margin: 0 0 0 10px;
font-size: 80px;
width: 400px;
height: 170px;
border-radius: 20px;
z-index: 6;
background-color: rgba(117, 190, 218, 0.5);
}
.fondu{
display: block;
position: absolute;
top:0;
left:0;
width:100%;
height:366px;
z-index: 2;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(255,255, 255,0.3));
}
.fondu2{
display: block;
position: absolute;
top:366px;
left:0;
width:100%;
height:366px;
z-index: 2;
background-image: linear-gradient(to bottom, rgba(255,255, 255,0.3), rgba(0,0,0,0.8));
}
.ul{
position: relative;
left: 200px;
}
.MonTitre{
/*width: 100%;
position: absolute;
top: 600px;
left: 20px;*/
color: aqua;
z-index: 3;
}
/*.section1{
position: relative;
top: 500px;
left: 20px;
}
*/
div .section1{
margin: 500px 10px 10px 20px;
display: grid;
grid-template-columns: 200px 200px calc(100% - 600px) 200px;
grid-gap: 10px;
padding: 10px;
}
.paragraphe_arround{
width: calc(100% - 200px);
/*float: left;*/
}
.aside{
/*position: absolute;
top: 700px;
right: 10px;*//
position: relative;
top: -200px;
right: 0px;
float: right;
}