Мне понадобится больше информации о том, какие детали нужно отрегулировать. Сравнивая живой сайт с изображением, есть несколько. И для разных частей я бы использовал разные стратегии css для их решения.
Прежде всего: один элемент может содержать только одну отображаемую атрибуцию. В этом случае отображение элемента является либо сеткой, либо флексом.
В качестве второго пункта, в качестве личной практики, я не люблю применять сетку или флекс ко всей странице. Как display: grid, так и display: flex могут подойти лучше для каждой части страницы. Я предпочитаю быть более гибким в этом смысле.
Итак, я постарался не сильно изменить то, что вы уже сделали. Сначала я удалил настройку отображения вашего контейнера и обернул части вашего html в div, чтобы я мог решить, применить ли мне grid или flexbox. Я разделил его на три части: верхний колонтитул (я использовал grid), главный (также и grid) и нижний колонтитул (flex!)
Как только вы поймете, как работают grid и flex, они становятся очень простыми. Для сетки у вас есть иерархия: оболочка, которая имеет большинство конфигураций сетки и ее сыновей / элементов под ней. Как правило, больше div *
<header>
<!-- this is where I set the grid -->
<div class="header-wrapper">
<!-- first of two sons/elements below div -->
<div>
<h1 class="text">End-of-study-internship</h1>
<h2 class="text">Subject of the internship</h2>
</div>
<!-- end of first son -->
<!-- second of two sons/elements below div -->
<div>
<img class="image" src="http://diakiunivstra.alwaysdata.net/images/logo-univstra.png"
alt="logo-univstra" width="400" height="175">
</div>
<!-- end of second son -->
</div>
<!-- header grid ends -->
</header>
css применяется поверх того, что вы уже сделали:
.header-wrapper {
display: grid;
grid-template-columns: 3fr 1fr;
text-align: center;
}
.header-wrapper .text {
display: block;
}
для вашей навигации, я просто добавил padding: 20px 0; Я использовал ту же стратегию на основной контент. (Я копирую весь код в конце)
Для нижнего колонтитула кажется, что display: flex будет лучше, так как вам не нужно «исправлять» контент, они могут быть просто распределены по всему пробел.
<footer>
<div class="footer-wrapper">
<p>
<a href="http://www.unistra.fr/index.php?id=accueil&utm_source=unistra_fr&utm_medium=unistra_fr_homepage"
target="_blank" style="text-decoration: none; color: cornsilk;">Université de Strasbourg</a>
</p>
<p>Full name</p>
<p>Graduation</p>
</div>
</footer>
, его css (добавлено поверх того, что у вас уже было):
footer{
display: block;
}
.footer-wrapper {
display: flex;
justify-content: space-around;
}
.footer-wrapper p,
.footer-wrapper a {
display: inline;
}
Поскольку я добавил некоторый код поверх вашего, я бы проверьте, что отменяется, как только вы соберете все это вместе. Помимо отмены настроек отображения в вашем контейнере, все мои css дополнения находятся внизу тега style. Я также обернул несколько html элементов в div
<style>
.container {
font-family: 'Times New Roman', Times, serif;
font-size: 13pt;
border: 1px solid #df4585;
text-align: justify;
width: 1000px;
margin: auto;
}
section {
width: auto;
height: auto;
max-width: 500px;
display: grid;
grid-row: 3/4;
grid-column: 1;
}
aside {
min-width: 160px;
max-width: 200px;
display: grid;
grid-row: 3/4;
grid-column: 2/3;
}
header {
max-height: 160px;
border-bottom: 1px solid #df4585;
padding: 20px;
display: flex;
align-items: center;
display: grid;
grid-row: 1/2;
grid-column: 1/ span 2;
}
.text {
display: grid;
grid-row: 1/2;
grid-column: 1/2;
display: flex;
flex-grow: 1;
align-items: center;
}
.image {
display: flex;
justify-content: flex-end;
display: grid;
grid-row: 1/2;
grid-column: 2/3;
}
nav {
font-size: 16pt;
max-height: 50px;
display: grid;
grid-row: 2/3;
grid-column: 1/ span 2;
border-bottom: 1px solid #df4585;
}
nav ul {
display: flex;
justify-content: space-evenly;
}
nav li {
display: flex;
flex-grow: 0;
width: 170px;
border: 1px solid black;
border-radius: 20px;
background-color: rgb(31, 31, 141);
color: cornsilk;
align-items: center;
justify-content: space-evenly;
}
footer {
font-style: italic;
background-color: rgb(31, 31, 141);
color: cornsilk;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
display: grid;
grid-row: 4/5;
grid-column: 1/3;
border-top: 1px solid #df4585;
}
table {
table-layout: auto;
border-collapse: collapse;
text-align: center;
width: 500px;
}
th,
td {
border: 1px solid rgb(155, 9, 106);
}
.header-wrapper {
display: grid;
grid-template-columns: 3fr 1fr;
text-align: center;
}
.header-wrapper .text {
display: block;
}
nav {
padding: 20px 0;
}
nav ul {
margin: 0;
}
.main-grid {
display: grid;
grid-template-columns: 3fr 1fr;
}
section {
max-width: 100%;
}
.main-grid div {
border: 1px blue solid;
padding: 10px
}
footer {
display: block;
}
.footer-wrapper {
display: flex;
justify-content: space-around;
}
.footer-wrapper p,
.footer-wrapper a {
display: inline;
}
</style>
your html:
<body class="container">
<header>
<!-- this is where I set the grid -->
<div class="header-wrapper">
<!-- first of two sons/elements below div -->
<div>
<h1 class="text">End-of-study-internship</h1>
<h2 class="text">Subject of the internship</h2>
</div>
<!-- end of first son -->
<!-- second of two sons/elements below div -->
<div>
<img class="image" src="http://diakiunivstra.alwaysdata.net/images/logo-univstra.png"
alt="logo-univstra" width="400" height="175">
</div>
<!-- end of second son -->
</div>
<!-- header grid ends -->
</header>
<nav>
<ul>
<li>Compagny</li>
<li>Projects</li>
<li>Productions</li>
<li>Conclusion</li>
</ul>
</nav>
<div class="main-grid">
<div>
<section>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus sint consectetur nostrum, labore
veritatis, nisi quos id quasi,
saepe molestias quaerat? Rem aperiam eaque tempore.<br>
Illum praesentium pariatur repudiandae hic.Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Possimus sint consectetur nostrum,
labore veritatis, nisi quos id quasi, saepe molestias quaerat? Rem aperiam eaque tempore.
Illum praesentium pariatur repudiandae hic.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, dicta, quo excepturi ullam nisi
tempore
nobis sapiente, deserunt quis similique non libero commodi a?
A ullam minus velit quia pariatur.
</p>
<table>
<caption style="font-weight: bold; font-style: italic ; font-size: 14pt;">Performance and quality
analysis
report</caption>
<thead>
<tr style="font-weight: bold;">
<th>Performance</th>
<th>Value</th>
<th>Performance</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Problems</td>
<td>13</td>
<td>Improvement</td>
<td>13</td>
</tr>
<tr>
<td>Success</td>
<td>66</td>
<td>First Octet</td>
<td>1.16sec</td>
</tr>
<tr>
<td>Start of Display</td>
<td>3.83sec</td>
<td>End of Upload</td>
<td>8.68sec</td>
</tr>
<tr>
<td>Speed Index</td>
<td>8656msec</td>
<td>Total Weight</td>
<td>2Mb</td>
</tr>
</tbody>
</table>
<p style="text-align: left;">Src. https://dareboost.com</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab, necessitatibus veritatis?
Similique aspernatur suscipit ipsam laboriosam incidunt adipisci assumenda sint, ex, corporis dolore
totam
vero magnam a magni quidem quo?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati enim omnis sed alias quo odit
consequuntur debitis atque explicabo impedit?
Ipsum deserunt amet dolorem ipsam illum magnam minus harum vitae.
</p>
</section>
</div>
<div>
<aside>
<h3>Events</h3>
<p>
KiwiParty: The one-day web conference dedicated to web quality, design, performance and
accessibility.
</p>
📆 March 2020
</aside>
</div>
</div>
<footer>
<div class="footer-wrapper">
<p>
<a href="http://www.unistra.fr/index.php?id=accueil&utm_source=unistra_fr&utm_medium=unistra_fr_homepage"
target="_blank" style="text-decoration: none; color: cornsilk;">Université de Strasbourg</a>
</p>
<p>Full name</p>
<p>Graduation</p>
</div>
</footer>
</body>