Bonjour à tous, je débute dans le codage et j'essaye de créer un site web simple à plusieurs pages.
J'ai rencontré un problème lorsque je n'arrivais pas à modifier la position d'un élément "section" dans ma grille et je ne comprends pas pourquoi. J'ai d'abord cherché par moi-même avant de demander l'aide de chatGPT mais ce qu'il m'a proposé ne fonctionne pas.
Mon "body" contient bien un "grid-container" et mon display dans css contient bien "grid".
Voici mon code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css">
<title>Fabiann-art</title>
</head>
<body class="grid-container">
<header>
<h1>Fabiann-art</h1>
<nav>
<ul>
<li><a href="site_maman.html"></a>Accueil</li>
<li><a href="créations.html"></a>Créations</li>
<li><a href="àpropos.html"></a>À propos</li>
<li><a href="contact.html"></a>Contact</li>
</ul>
</nav>
</header>
<main>
<figure>
<img class="fabianna" src="images/maman.jpg" alt="Fabianna" width="300" height="300">
</figure>
<section class="présentation">
<h3>Lorem</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quae ducimus consequuntur sit id libero
nam unde, eaque ullam modi obcaecati perspiciatis in ad autem repellendus voluptatibus, dolore quaerat
quo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium totam non asperiores nulla dolor
perferendis ratione distinctio nobis quaerat beatae repellat iure iste nemo deleniti, ad et
repudiandae quas quisquam.</p>
</section>
</main>
Et voici mon code css :
@import url('https://fonts.googleapis.com/css2?family=Shalimar&display=swap');
/*Grille*/
.grid-container {
display: grid;
grid-template-columns: repeat(5, auto);
}
/*Général*/
body {
background-color: #FFFFEB;
margin: 0;
padding: 0;
}
header {
display: flex;
flex-direction: column;
background-color: #4B384C;
grid-column: 1/-1;
}
/*Titres*/
h1 {
font-family: "Shalimar", serif;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 100px;
color: #FFFFEB;
margin-bottom: 2px;
}
/*Nav*/
nav {
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
margin-top: 2px;
}
nav ul li {
display: inline-block;
font-family: "Shalimar", serif;
font-weight: 400;
font-size: 30px;
color: #FFFFEB;
border-radius: 5px;
margin: 5px;
/* Espacement entre les onglets */
}
nav ul li a {
text-decoration: none;
font-family: "Shalimar", serif;
border-radius: 5px;
}
nav ul li:hover {
color: #4B384C;
background-color: #FFFFEB;
transition: background-color 0.5s ease, color 0.5s ease;
}
nav ul li a:hover {
color: #4B384C;
background-color: #FFFFEB;
}
/*Images*/
img.fabianna {
border-radius: 30%;
grid-column: 1/3;
}
/*Présentation*/
section.présentation {
border: 3px;
border-style: solid;
border-color: red;
grid-column: 3/6;
padding: 10px;
margin : 30px
}
Merci d'avance!