<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" >
<link rel="stylesheet" href="style.css" >
</head>
<body>
<header>
<nav>
<h1 class="logo">Survivre</h1>
<div class="toggle">
<i class="fas fa-bars ouvrir"></i>
<i class="fas fa-times fermer"></i>
</div>
<ul class="menu">
<li><a href="#">Acceuil</a></li>
<li><a href="#">Edc N1</a></li>
<li><a href="#">Edc n2</a></li>
<li><a href="#">Edc n3</a></li>
</ul>
</nav>
</header>
<!-- Le reste du contenu -->
<section class="section1">
<div class="content">
<h1 class="titre1"> La Survie Explication Simple et rapide </h1>
<p class="paragraphe1">
<mark class="opak">
Bonjour à tous voici un peu de lecture pour remettre certaines idées reçues à leurs places. <br>
<br>
Tout d'abord, il faut bien comprendre que survie => danger , et pas n'importe lequel puisqu'il s'agit d'un danger de mort imminente. <br>
<br>
Une situation de survie peut arriver à tout moment sous diverses formes.
</mark>
</p>
<p class="paragraphe1">
<mark class="opak">
Lorsque l’on sort de chez toi, on s’expose de suite à une possible situation d’urgence pour diverse cause possible, tels qu’une panne, perte de l’orientation, voir même une blessure.
Ceci peut nous arriver aussi bien à pied, vélo, voiture, moto, quad, etc.
</mark>
</p>
</div>
</section>
<section class="section2">
<h1 class="titre2"> Introduction </h1>
<div class="introduction">
<p class="paragraphe2">
Pour parer au mieux à une situation difficile, j’emporte mon sac à dos, qui est toujours à ma portée ou pas très loin de moi. <br>
<br>
Celui-ci est composé de <strong> "divers Kit" </strong> pour parer à toute éventualité, ou au moins au mieux. <br>
<br>
<b> <u> Mon moyen mnémotechnique : </u> </b> <br>
<br>
Lorsque je pars, je dois <strong> "naviguer" </strong>, mais si j’ai un problème, je dois <strong> "communiquer" </strong> ma position et me <strong> "signaler" </strong>, si je suis blessé, je dois me <strong> "soigner" </strong> et de nuit <strong> "m’éclairer" </strong>. <br>
Si la situation perdure, je dois <strong> "Boire" </strong>, me <strong> "chauffer" </strong> et me <strong> "protéger" </strong> des éléments, et éventuellement <strong> "manger" </strong>. <br>
<br>
</p>
</div>
</section>
<section class="section3">
<div class="introduction2">
<h2 class="soustitre">Les diffèrent éléments</h2>
<p class="paragraphe3">
- <strong> Naviguer </strong> <br>
- <strong> Communiquer </strong> <br>
- <strong> Signaler </strong> <br>
- <strong> Soigner </strong> <br>
- <strong> Eclairer </strong> <br>
- <strong> Boire </strong> <br>
- <strong> Chauffer </strong> <br>
- <strong> Protéger </strong> <br>
- <strong> Manger </strong> <br>
</p>
</div>
<div class="image">
<img src="frame/Image-Acceuil2.png" id="Image-Acceuil2" alt="">
</div>
</section>
<div class="floubtn">
<br>
<button class="btn1">Consulter</button>
<br>
</div>
<section class="section4">
<h1 class="titre2"> Validé W3C pour HTML5\CSS3 </h1>
<div>
<div class="copyright">
<h2 class="soustitre2">HTML</h2>
<p class="imghtml">
<a href="https://validator.w3.org/" onclick="window.open(this.href);return false">
<img class="img2" src="frame/htmllogo1.png" alt="Validation html 5">
<img class="img2bis" src="frame/htmllogo2.png" alt="Validation html 5">
</a>
</p>
</div>
<div class="copyright2">
<h2 class="soustitre2">Version :</h2>
<hr class="hr">
<p class="valid2">
Réalisé par Bruno.H <br>
<br>
Mis à jour le 14 juillet 2023. <br>
</p>
<hr class="hr">
</div>
<div class="copyright">
<h2 class="soustitre2">HTML</h2>
<p class="imgcss">
<a href="http://jigsaw.w3.org/css-validator/" onclick="window.open(this.href);return false">
<img class="img3" src="frame/csslogo1.png" alt="Validation CSS 3">
<img class="img3bis" src="frame/csslogo2.png" alt="Validation CSS 3">
</a>
</p>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
font-family: sans-serif;
background-image: url("frame/Image-Acceuil2.png"); /* image de fond */
background-position: 50%;/* position image */
background-size: 70%;/* taille image */
background-repeat: no-repeat;/* statut image */
background-color: black;/* remplacement image */
background-attachment: fixed;/* effet sur image */
}
header {
position: absolute;
width: 100%;
height: 100px;
top: 0;
left: 0;
background-color: transparent;
color: wheat;
padding: 0 20px 0 0;
}
nav {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between; /* */
align-items: center;
}
.logo {
font-size: 50px; /* Taille ecriture liste */
float: left; /* positionnement titre par apport liste */
margin: 10px 0px 10px 30px;/* marge logo */
color: white; /* couleur texte logo */
border-radius: 100%; /* bordure logo */
background-color: yellowgreen; /* couleur bordure logo */
text-shadow: goldenrod 0.1em 0.1em 0.2em; /* ombre texte menu */
box-shadow: goldenrod 0.05em 0.05em 0.1em; /* ombre texte menu */
}
.toggle {
display: none;
top: 0px;
left: 0px;
color: red;
}
.menu {
display: flex;
justify-content: space-between; /* */
align-items: center;
font-size: 20px;
list-style: none;
width: 350px;
}
.menu li a {
text-decoration: none;
color: yellowgreen;
transition-property: background-color, border; /* transition */
transition-duration: 0.5s; /* duree transition */
}
.menu li :hover
{
font-size: 30px;
color: red;
background-color: yellowgreen;
padding: 5px;
text-shadow: black 0.1em 0.1em 0.2em; /* ombre texte menu */
box-shadow: black 0.05em 0.05em 0.5em; /* ombre texte menu */
border: 5px ridge goldenrod;
border-radius: 10px;
}
/* Fin liens Menu */
@media all and (max-width: 600px) { /* (max-width: 991px) */
header {
background: transparent;
}
.toggle {
display: block;
top: 10px;
font-size: 2rem;
cursor: pointer;
position: relative;
z-index: 20;
}
.logo {
position: relative;
top: 10px;
z-index: 20;
color: red;
}
.ouvrir {
display: block;
color: red;
}
.fermer {
display: none;
color: red;
}
.open .ouvrir {
display: none;
}
.open .fermer {
display: block;
}
.menu {
position: absolute;
top: 80px;
right: 0%;
width: 40%;
height: auto;
background: blue;
flex-direction : column;
padding: 2rem;
justify-content: space-around;
transform: translateX(100%);
transition: transform 1s;
z-index: 20;
}
.menu li a {
font-size: 2rem;
}
.open .menu {
transform: translateX(0);
}
}
/* ----------------------------------------------------- */
/* Debut Section commune */
section
{
border: 10px ridge #404040; /* bordure des sections */
}
p
{
font-size: 18px; /* Taille ecriture text */
margin-left: 0px; /* espacement bord gauche text */
margin-top: 0px; /* espacement bord haut text */
}
/* Fin Section commune */
/* ----------------------------------------------------- */
/* Section 1 */
.titre1
{
margin-top: 100px; /* espacement bord haut titre1 */
margin-bottom: 30px;
margin-left: 0px; /* espacement bord gauche titre1 */
color: wheat;
text-shadow: goldenrod 0.4em 0.4em 1.0em; /* ombre titre */
text-align: center;
font-size: 50px; /* Taille ecriture text */
}
.paragraphe1
{
color: red;
margin-top: 20px; /* espacement bord haut titre1 */
margin-left: 50px; /* espacement bord haut titre1 */
margin-right: 50px;
font-size: 28px; /* Taille ecriture text */
}
.content
{
height: auto ;
backdrop-filter : blur(8px);
padding-bottom: 30Px;
}
.opak
{
opacity: 0.6; /* opacite du texte */
}
/* Section 1 */
/* ----------------------------------------------------- */
/* Section 2 Introduction */
.section2
{
background-color: grey;
height: auto;
}
.titre2
{
margin-top: 40px; /* espacement bord haut titre1 */
margin-bottom: 30px;
margin-left: 0px; /* espacement bord gauche titre1 */
background-color: #404040;
color: yellowgreen;
text-shadow: goldenrod 0.4em 0.4em 1.0em; /* ombre titre */
-webkit-text-stroke: 2px; /* contour du texte */
-webkit-text-stroke-color: grey; /* contour du texte */
text-align: center;
font-size: 50px; /* Taille ecriture text */
box-shadow: goldenrod 0.05em 0.05em 0.1em; /* ombre texte sous titre */
}
.paragraphe2
{
color: black;
margin-top: 20px; /* espacement bord haut titre1 */
margin-left: 30px; /* espacement bord haut titre1 */
margin-right: 50px;
font-size: 18px; /* Taille ecriture text */
}
/* Fin Section 2 Introduction */
/* ----------------------------------------------------- */
/* Section 3 Les differents éléments */
.section3
{
background-color: grey;
height: 800px;
}
.introduction2
{
width: 30%;
float: left;
}
.paragraphe3
{
color: black;
width: 100%;
height: 100%;
padding-top: 30%;
padding-left: 10%;
font-size: 18px; /* Taille ecriture text */
text-align: left;
}
.image
{
width: 70%;
float: right;
}
#Image-Acceuil2
{
padding-top: 150px;
height: 100%;
width: 100%;
}
.soustitre
{
border-radius: 100%; /* bordure logo */
background-color: #404040;
margin: 10px 0px 5px 10px;/* marge sous titre */
padding: 10px;
width: 300px;
color: wheat;
text-shadow: yellowgreen 0.4em 0.4em 1.0em; /* ombre titre */
-webkit-text-stroke: 2px; /* contour du texte */
-webkit-text-stroke-color: grey; /* contour du texte */
text-align: center;
font-size: 40px; /* Taille ecriture text */
box-shadow: goldenrod 0.05em 0.05em 0.1em; /* ombre texte sous titre */
}
/* Fin Section 3 Les differents éléments */
/* ----------------------------------------------------- */
/* Bouton Consulter */
.btn1
{
display: block; /* centrer elements */
margin-left: auto; /* centrer elements */
margin-right: auto; /* centrer elements */
padding-bottom: 10Px;
height: 70px;
width: 140px;
font-size: 30px;
background-color: yellowgreen;
border-radius: 100%;
color: red;
text-shadow: black 0.2em 0.2em 0.4em; /* ombre texte */
box-shadow: 2px 2px 10px greenyellow, 0px 0px 30px grey; /* ombre bouton */
}
.btn1:hover
{ background-color: yellow;
text-shadow: black 0.1em 0.1em 0.2em; /* ombre texte menu */
box-shadow: goldenrod 0.05em 0.05em 0.5em; /* ombre texte menu */
transition-property: background-color, border;
transition-duration:2s;
}
.floubtn
{
backdrop-filter : blur(10px);
}
/* Fin Bouton Consulter */
/* ----------------------------------------------------- */
/* Section 4 Validation Html/Css */
.section4
{
background-color: grey;
height: 600px;
}
.copyright
{
display: inline-block; /* Alignement 3 DIV float: left; ou display: table-cell;*/
width: 33%;
}
.soustitre2
{
text-align: center;
border-radius: 100%; /* bordure logo */
background-color: #404040;
margin: 10px auto;/* marge sous titre */
padding: 10px;
width: 200px;
color: wheat;
text-shadow: yellowgreen 0.4em 0.4em 1.0em; /* ombre titre */
-webkit-text-stroke: 2px; /* taille contour du texte */
-webkit-text-stroke-color: rgb(196, 129, 129); /* couleur contour du texte */
font-size: 40px; /* Taille ecriture text */
box-shadow: goldenrod 0.05em 0.05em 0.1em; /* ombre texte sous div */
}
/* image html W3C */
.img2
{
width: 100%; /* on affiche l'image au carré */
left:10px;
transition: all 1s ease;
}
.img2:hover
{
width: 100%; /* on affiche l'image au carré */
transform:rotate(360deg) scale(0,0);
}
.img2bis
{
width: 100%; /* on affiche l'image au carré */
transform:scale(1,0);
opacity:0;
}
img2bis .img2:hover {
opacity:1;
transform:scale(1,1);
}
/* fIN image html W3C */
/* ----------------------------------------------------- */
/* centre Mise a jours */
.copyright2
{
display: inline-block; /* Alignement 3 DIV float: left; ou display: table-cell;*/
width: 33%;
position: relative;
top:-325px;
}
p.valid2
{
margin: 10px 0;
background-color: transparent;
position: relative;
top:-0px;
width: 100%;
height: auto;
text-align: center;
font-size: 20px;
font-weight: bold;
color: rgb(59, 9, 9);
transition: transform 1s;
}
p.valid2:hover
{
padding:0px;
margin: 15px 0;
background-color: gray;
text-align: center; /* positionnement du texte*/
font-size: 30px; /* talle du texte*/
font-weight: bold; /* epaisseur texte */
color: wheat; /* Couleur texte */
text-shadow: rgb(66, 64, 64) 0.1em 0.1em 0.1em; /* ombre titre */
-webkit-text-stroke: 2px; /* Talle du contour du texte */
-webkit-text-stroke-color: rgb(185, 100, 100); /* Couleur contour du texte */
transform: scale(1.6);
box-shadow: black 0.1em 0.1em 0.3em; ; /* Bordure boite */
z-index: 9; /* Permet de mettre en premier plan la div */
position: relative;/* Toujours utiliser avec z-index */
}
.hr
{
width:100%;
color:firebrick;
background-color:firebrick;
height:3px;
padding: 0px 0px;
margin:30px 0 0 0;
box-shadow:8px 6px 9px #7F7F7F; /* bordure boite */
}
/* fin centre Mise a jours */
/* image css W3C */
.img3
{
width: 100%; /* on affiche l'image au carré */
left:10px;
transition: all 1s ease;
}
.img3:hover
{
width: 100%; /* on affiche l'image au carré */
transform:rotate(360deg) scale(0,0);
}
.img3bis
{
width: 100%; /* on affiche l'image au carré */
transform:scale(1,0);
opacity:0;
}
img3bis .img3:hover {
opacity:1;
transform:scale(1,1);
}
/* fIN image html W3C */
/* ----------------------------------------------------- */
Après analyse de ton code HTML/CSS, j'ai quelques remarques à faire dans un objectif d'amélioration :
- Je me suis permis de corriger "Accueil" ===> "Acceuil" --> "Accueil".
- En HTML, évite d'utiliser la balise <br>, c'est une mauvaise pratique. Mieux vaut modifier les propriétés CSS "padding" ou "margin" d'un élément.
- Même remarque pour les balises de style de texte HTML (<strong>, <u>...). Ce n'est pas nécessairement une mauvaise pratique en soi mais il ne faut pas perdre de vue que l'HTML sert uniquement à structurer la page Web et à intégrer des éléments externes et le CSS à styliser les éléments HTML. Mieux vaut donc utiliser les propriétés CSS de style de texte tels que "font-weight", "text-decoration"... etc.
- Ensuite, fais attention, tu as des classes CSS qui sont appelées dans ton HTML et qui n'existent pas. Revérifie donc ton fichier HTML et contrôle bien ça. Par exemple :
<!-- Ici, un appel à la classe CSS "section1" inexistante -->
<section class="section1">
<div class="content">
<h1 class="titre1"> La Survie Explication Simple et rapide </h1>
...
</section>
- Pour les liens de bas de page, tu "réinventes la roue" en utilisant du JavaScript dans ton attribut "onclick". Il existe en HTML un moyen beaucoup plus simple et surtout natif pour faire en sorte qu'un lien s'ouvre au clic dans un nouvel onglet du navigateur.
Sinon, concernant ton problème "d'alignement" de tes 3 balises <div>, tu as plusieurs façons conventionnelles de le faire. Notamment 2 des plus connues : Flexbox ou CSS Grid.
Voici un exemple avec CSS Grid :
HTML :
<!-- Ici j'ai déclaré ma classe "col" -->
<div class="col">
<!-- J'ai retiré les classes "copyright" et "copyright2" -->
<div>
<h2 class="soustitre2">HTML</h2>
<p class="imghtml">
<a href="https://validator.w3.org/" target="_blank">
<img class="img2" src="frame/htmllogo1.png" alt="Validation html 5">
<img class="img2bis" src="frame/htmllogo2.png" alt="Validation html 5">
</a>
</p>
</div>
<div>
<h2 class="soustitre2">Version :</h2>
<hr class="hr">
<p class="valid2">
Réalisé par Bruno.H <br>
<br>
Mis à jour le 14 juillet 2023. <br>
</p>
<hr class="hr">
</div>
<div>
<h2 class="soustitre2">HTML</h2>
<p class="imgcss">
<a href="http://jigsaw.w3.org/css-validator/" onclick="window.open(this.href);return false">
<img class="img3" src="frame/csslogo1.png" alt="Validation CSS 3">
<img class="img3bis" src="frame/csslogo2.png" alt="Validation CSS 3">
</a>
</p>
</div>
</div>
Tu parles aussi d'un "changement d'image", mais je ne vois pas quelle partie est impactée par ce problème. Où rencontres-tu ce problème dans ton code ?
Enfin, relis bien tes deux fichiers, cherche les différentes erreurs, vérifie que toutes tes classes CSS sont utilisées dans ton HTML et vérifie dans ton HTML que toutes les classes CSS existent bien. N'hésite pas non plus à te documenter sur les bonnes pratiques HTML/CSS, c'est très utiles
Même si c'est hors sujet par rapport à ta question (uniquement centrée sur ton code), n'hésite pas non plus à te documenter sur les bonnes pratiques de présentation, de hiérarchisation et d'expérience utilisateur des pages Web. Je vois que tu as tout un paragraphe de surligné, c'est pas super question design. Puis aussi les effets de surbrillance jaune des titres et boutons, ça fait très vieux site du début des années 2000... et pleins d'autres trucs comme ça sur ta page. Tu as plein d'exemples de templates sur Internet, tu peux grandement t'en inspirer (sans copier ) !
Et pour vraiment finir, je t'invites grandement à regarder et te documenter sur les librairies/frameworks CSS (Tailwind CSS, Bulma, Foundation, Bootstrap...). Ces outils vont t'aider à rendre plus conventionnel et maintenable ton code ainsi qu'à améliorer ta productivité et ton efficacité (te permettre de ne pas trop toucher au CSS).
En espérant que mes conseils te seront utiles. N'hésites pas si tu as des questions
- Edité par iSwamb 16 juillet 2023 à 20:49:58
Comparés aux êtres humains, les ordinateurs sont beaucoup plus simples à comprendre !
Alignement de block
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Comparés aux êtres humains, les ordinateurs sont beaucoup plus simples à comprendre !