Je viens de terminer la page d'accueil de mon site, il ne me reste plus qu'à faire la côté responsive des boxs. J'aimerai que vous me donniez votre avis sur cette page, mais bien évidemment il faut que vous soyez sur ordinateur.
J'aimerai savoir ce qui va, ce qui ne va pas, ce que je pourrai ajouter etc... Merci d'avance !
Dans la CSS tu as de la redondance, tu pourrais écrire la même chose avec moins de ligne; pourquoi toutes ces positions relative et absolute?? Pour une simple page comme celle-la tu ne devrais pas en avoir besoin.
En ce qui concerne l'hébergeur je n'en connais pas de gratuit, en aurais-tu à me conseiller ?
J'ai réglé les attributs alt que j'avais complètement oublié je l'admet.
Je n'ai pas mis de titre h2 tout simplement car j'en avais pas besoin.
Pour la redondance en CSS, pourrais-tu me donner quelques exemples ? Et finalement pour les positions relatives, elles sont nécessaires, par exemple j'en ai mise sur chacune de mes box pour ensuite pouvoir facilement placer des éléments à l'intérieur grâce aux positions absolutes
Je n'ai pas mis de titre h2 tout simplement car j'en avais pas besoin.
Ha et dis moi pourquoi pour "Cours", "Wiki" et "Soutenir le site" tu indiques une taille de police plus grande? C'est parce que tu veux que ce soit plus visible, et que ce sont des sous titre de la page, donc pour moi des <h2>. tu dois utiliser les balises pour leurs rôles sémantiques.
Exemple pour éviter la redondance : Pour une même règles css, applique cette règle à plusieurs sélecteurs séparer par une virgule.
.box1 , .box2 , .box3 {
}
Pour des propriété qui ce répète mais dont certaines change: Applique la règle à une class et modifie en les propriétés par la suite en spécifient un autre sélecteur.
Et NON, tu n'es pas obligé d'utiliser les positions relative et absolute pour ce type de page, en utilisant flexbox tu t'en passe aisément, cela alège la CSS et c'est plus lisible je trouve, sans parler du temps que tu as passer inutilement pour donner des valeurs à ce positionnement.
C'est une mauvaise habitude que tu prends et ce n'est pas utile dans ce cas ci. Il faut utilisé les positions avec parcimonie et quand c'est nécessaire
Exemple : (je n'ai repris que la première partie de ton contenu, c'est identique pour la suite ... )
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Juste des 0 et des 1</title>
<meta charset="utf-8">
<!-- <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> -->
<!-- <link rel="stylesheet" type="text/css" href="css/line.css"> -->
<style type="text/css">
.box {
display: flex;
}
.explication-box {
flex: 2;
}
.screen-box , .btn-box { /* ici toutes les propriétés commune */
/* position: relative; inutile avec flexfox */
/* width: 25%; */
/* height: 100%; inutile si le parent n'a pas de hauteur définie */
background-size: 100% 100%;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
flex: 1; /* permet au div de prendre tout l'espace nécessaire */
}
.box1 .screen-box { /* ici toutes les propriétés spécifique */
background-image: url('css/img/code.png');
}
.explication-box-text {
text-align: center;
}
.explication-box {
background-color: #70a1ff;
}
.btn-box {
border-radius: 0 5px 0 5px;
background-image: url(css/img/background-btn.jpg);
display: flex;
justify-content: center;
}
.btn-box-txt {
align-self: center;
padding: 15px 5px;
border-radius: 5px;
background-color: #636e72;
font-weight: bolder;
color: #dfe6e9;
text-decoration: none;
}
</style>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="icon" type="image/png" href="img/logoonglet.png">
</head>
<body>
<!-- Entete de page -->
<header>
<div class="header">
<a href="index.html"><div class="div-logo"><img src="img/img-header.png" alt="" class="logo"></div></a>
<h1 class="title-responsive">Juste des 0 et des 1</h1>
<p class="sentence-header">Insérer un slogan ici</p>
</div>
</header>
<div class="clear"></div> <!-- Clear float -->
<!-- Menu -->
<nav>
<div class="menu">
<div class="liens">
<a class="menu-btn">Menu</a><!--
--><a href="index.html" class="main-lien">Accueil</a><!-- Commentaire pour retirer les espaces entres les liens
--><a href="#" class="main-lien">Cours</a><!--
--><a href="#" class="main-lien">Wiki</a><!--
--><a href="#" class="main-lien">Contact</a><!--
--><a href="#" class="main-lien">Soutenir le site</a>
</div>
</div>
</nav>
<div class="clear"></div> <!-- Clear float -->
<!-- Page principale -->
<section class="box1">
<div class="box">
<div class="screen-box">
</div>
<div class="explication-box">
<div class="explication-box-text">
<h2 class="entete-explication-box-text">Cours</h2>
<p>Dans cette section vous pourrez retrouver des cours gratuits et complets sur tout et n'importe quoi</p>
</div>
</div>
<div class="btn-box">
<a href="#" class="btn-box-txt">
Accéder aux cours
</a>
</div>
</div>
</section>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Merci du temps que tu as pris à rédiger tout cela, je prend note notamment au niveau des sémantiques et du display flex que je n'utilise pas assez.. En ce qui concerne les sélecteurs CSS, je remarque que je ne les exploites pas assez en effet.
Je tiens juste à préciser que je débute et que je compte encore m'améliorer.
Merci encore
- Edité par JordanLie 22 juillet 2018 à 16:26:45
Votre avis sur mon site web :D
× 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.
Compos sui.