J'espère que ça marche

Edit : yesss ! Merci pour l'exercice ^^

Piouuuuuu \O/
j'ai plusieurs choses à redire, en premier je vais te lister le css inutile/qui n'existe pas:

-height:auto=> c'est sa valeur par défaut, du coup pas besoin de le mettre
-margin:center=> ça n'existe pas, center horizontalement c'est margin:auto


Des balises ne sont pas fermées, un indenteur comme http://tab-it.fr/ permettra de t'en rendre mieux compte (mais ça sent le fail de c:c pour refaire les élèments %D)

N'oublie pas que les gens doivent pouvoir utiliser ton code et qu'il soit clair, n'hésite pas à l'aérer un peu (genre les br/ peuvent être remplacés par un retour à la ligne)

Vu que la structure se répète je te conseille de mettre le code css dans une balise style, tu gagneras énormément en clarté de code tout en minimisant les erreurs potentielles, ceci mit de coté bon travail jeune padawan o/

Coucou, merci pour vos retours Maitre

Oups margin je me suis trompée !

Je penserais à mettre en style, j'avoue que j'aime bien tout faire en linéaire mais après c'est pas beau Mais j'ai découvert JSbin ici et je suis tombée amoureuse alors je vais surement être plus assidue !

Voilà pour moi avec quelques petites modif' (notamment la couleur parce que mauve :x... voilà quoi XD) :)

Code:

<style>.liTitre{background-color:#951010;width:454px;height:70px;text-align:center;color:#fff;text-transform:uppercase;padding-top:20px;text-shadow:1px 1px 5px #a4848f;font-family:Tahoma;border:1px solid white;outline:5px solid #951010}.liBestiaire{margin-top:-40px;background-color:#ffffff;width:465px;color:#000;border-bottom:10px solid #951010;margin-left:-5px}.liImage{margin-left:10px;margin-top:-20px;height:200px;width:100px;clear:both;overflow:hidden}.liNom{background-color:#951010;width:305px;color:#fff;text-transform:uppercase;height:25px;text-align:center;border:1px solid white;outline:4px solid #951010;margin-left:120px;margin-top:-215px;padding:5px;}.liDesc{background-color:#951010;width:310px;margin-left:117px;margin-top:-23px;color:white;padding:5px;height:137px;overflow:hidden}.liDesc:hover{background-color:#951010;width:310px;margin-left:117px;margin-top:-23px;color:white;padding:5px;height:137px;overflow:auto}</style>

<div class="liTitre">Le Bestiaire<div class="liSSTitre">Les créatures marines</div></div>


<div class="liBestiaire">
 <div class="liImage"><img src="http://i.imgur.com/EKl3QwQ.png" />
 </div>
<div class="liNom">Nom créature</div>
   <div class="liDesc">Description de la créature</div>
 
   <div class="liImage"><img src="http://i.imgur.com/EKl3QwQ.png" />
 </div>
<div class="liNom">Nom créature</div>
 <div class="liDesc">Description de la créature</div>  
   
 <div class="liImage"><img src="http://i.imgur.com/EKl3QwQ.png" />
 </div>
<div class="liNom">Nom créature</div>
 <div class="liDesc">Description de la créature</div>

 <div class="liImage"><img src="http://i.imgur.com/EKl3QwQ.png" />
</div>
<div class="liNom">Nom créature</div>
   <div class="liDesc">Description de la créature</div>

   <div class="liImage"><img src="http://i.imgur.com/EKl3QwQ.png" />
</div>

EDIT : Seul truc que je comprends paaaas du tout (je vois pas mon erreur en fait :x) c'est que quand j'ajoute un cinquième bloc, celui-ci décale tout son contenu vers le bas. L'image est ok, mais le nom de la créature et sa description est décalé de quelques px vers le bas :/

Bonjour @Linaewen et désolée pour le retard de réponse à cet exercice :/

Pour commencer, je pense que tu devrais retravailler ton code autrement pour éviter les bugs d'affichage. Il faudrait que tu apprennes à mieux utiliser le système de mise en page via le CSS. Pour le moment, tu utilises les margin négatifs afin de placer tes éléments, mais ce n'est pas la fonction pour laquelle la propriété margin est utilisée : elle créé des marges entre les éléments HTML.

On préfèrera utiliser soit le système de float ou de inline. Pour résumer, la propriété float permet de placer ton élément hors du flux normal à droite ou à gauche de son bloc conteneur.



Si l'on modifie la taille de #conteneur dans mon exemple et qu'on l'agrandit, tu pourras remarquer que les deux blocs se placeront aux deux extrémités de leur bloc conteneur quelque soit sa taille.

De même, si tu veux aligner trois blocs avec le float, tu auras juste à ajouter soit float:left; soit float:right; dans le CSS du bloc central et ainsi de suite :) (exemple juste en dessous)



Maintenant, pour en revenir précisément à ton cas, pense ton code avec le système de tableau, sans pour autant coder avec ce système. Essaye de voir comment se comporte les attributs comme rowpsan et colspan qui servent à fusionner les cellules pour te servir judicieusement de ce que je t'ai expliqué plus haut :)

Par contre, il reste tout de même des petits caffouillages dans ton code. Je vais t'en faire une petite liste :
- div style="clear:both;" je ne vois pas pourquoi tu l'utilises, car tu n'as aucune propriété float dans ton code qui demande l'utilisation de cette propriété
- overflow:auto il manque un point virgule après la valeur auto

Sinon je crois que c'est tout ce que j'ai pu remarquer ^-^

Bonne journée

Plop !
J'ai à mon tour réalisé cette sympathique fiche, histoire de me dérouiller un peu après ma pause. Vu que je n'ai pas codé depuis un certain temps il y a peut-être des erreurs que j'ai loupées. En tout cas ce fut vraiment chouette à coder !



Bonne soirée !

Coucou @Hotake !
Un très bon code que voilà à l'issu de cet exercice, c'est très réussi !
Je n'ai rien à redire !

Merci beaucoup Chesire !

Bonjour !
Bon, voila ce que j'ai réussi à faire pour cet exercice ... Je me suis un peu embrouillée, il doit y avoir pas mal d'erreur dans le code, je pense qu'il est possible de faire plus simple. Notamment pour .descri, je voulais mettre tout les effets de texte dans la div .fiche à la base et ça ne fonctionnait pas. :(
Et je n'ai pas réussi à faire les bordures comme sur l'exemple aussi.

Visuel :


HTML :


CSS :

Coucou, @Peluushe.

Tu as bien réussi, bravo :3, on va sans attendre s'attaquer aux petites remarques.

Je commence par la partie où tu as bloqué et donc la double bordure.
Je prends donc cette partie en exemple, et ceci s'applique évidemment sur les autres parties de la même façon.

Code:

.bloc_haut {
background-color: #A3A3C7;
height: 80px;
width: 510px;
border-style: solid;
border-color: white;
border-width: 2px;
}

Premièrement, tu peux réduire considérablement les lignes relatives à la bordure en utilisant le racourci border, on écrit : border: taille style couleur; dans ton exemple : border: 2px solid white;
Pour ce qui est de l'autre bordure externe, on utilise la propriété outline, littéralement ligne externe, de la même façon que la bordure et donc on aura : outline: 5px solid #a3a3c7;

Je vois que tu as choisi de faire la fiche en tableau. Les tableaux sont plus adaptés à la présentation des données et donc on évite de les utiliser pour structurer. N'hésite pas à revoir les tutoriels relatifs au positionnement et notamment le float.

Je vois que tu dis vouloir appliquer des propriétés à la div parente fiche, je n'ai pas bien compris mais puisque tu as utilisé un tableau, cette div est inutile, ça sera plus correct d'appliquer le CSS directement à la balise table plutôt que de l'entourer d'une div.

Ma dernière remarque concerne la span descri, la span est un élément inline et donc la hauteur de ton tableau s’adaptera au texte. D'ailleurs si tu essaies ton code sur une page libre, sur Codepen par exemple, tu verras que tes cellules droites et gauches ne sont pas alignées comme sur l'image. J'aurais plutôt mis une div avec une hauteur fixe et un overflow auto.
Donc on a l'image dans la cellule droite qui fait 100px de hauteur. On doit avoir la même hauteur à droite. C'est à dire que h4 + la div descri doivent faire 100px aussi. On commence par réinitialiser les marges de h4 (margin-top/bottom = 0). N'oublie pas que les headings h ont une marge en haut et en bas par défaut ce qui peut être parfois gênant. Donc on définit une hauteur fixe pour h4 et pour la div descri (20px pour h4 et 80px pour la div par exemple ça fait 100px) et un overflow pour la div pour que le texte ne dépasse pas. Pour la hauteur exacte il faut bien sûr prendre en considération les marges et les bordures.

Je pense que c'est tout, j'espère t'avoir aidé un minimum et si tu as des questions n'hésite pas, bon courage

Coucou Reine. :)

Je suis passé à côté de la notification, désolée !
Merci beaucoup pour ton avis et pour ton aide, je prends note de ce que chacun d'entre vous me dit lors de mes codages. =) Et c'est toujours un plaisir de vous lire, puisque j'apprends à chaque fois de nouvelles choses !

Merci

Hellooow. :D

Merci Ori pour cet exercice que je pensais simple, mais finalement pas tant que ça au vue de mes nombreuses lacunes sur les propriétés et liage entre HTML et CSS. Je me suis appliquée, essayant de mettre en pratique les conseils déjà annoté par les codeurs aux autres participants.

J'ai eu deux gros problèmes que je n'ai pas sue régler. Le premier est visible dans le résultat, le fait que le bloc contenant la description n'est pas à la même largeur que le bloc du titre, en plus il manque quelques pixels et c'est d'autant plus rageant de ne pas avoir sue trouver la solution. x)

Le second problème est au niveau du second bloc principal contenant les blocs d'images, titres et descriptions. Comme vous pouvez le voir j'ai du mettre une hauteur car ça ne voulait pas s'adapter automatiquement à cause des "float" je crois. @.@

En tous les cas merci, car j'ai appris à faire une bordure à l'intérieur d'un bloc, chose que je ne savais pas faire et que je n'arrivais pas du tout à comprendre en décortiquant les LS qui en sont pourvue et pourtant c'est tout bête. u.u

Hello miss !

Heureuse de te voir dans cette section et que tu es tenté un exercice. Même s’il n’est pas parfait et qu’il y a des erreurs c’est un très bon début et tu as le mérite d’avoir réussie à avoir un rendu plutôt similaire =) Du coup, je vais essayer de t’apprendre encore plus de chose ;)

La première erreur que je voie c’est l’utilisation d’une span comme conteneur pour ton titre. Premièrement la balise span est une balise « inline » ce qui veut dire qu’elle ne peut normalement pas accueillir de balise bloc à l’intérieur d’elle. Je voie que tu as utilisé un display pour la transformé en bloc. Pourquoi ne pas avoir pris une balise qui est par défaut une balise bloc, comme une div ? En gros c’est comme si tu avais essayé de mettre une piscine à l’intérieur d’un verre d’eau. Aimes-tu mon image ? XD (oui, oui je me trouve drôle ._.)

Ensuite pour ton sous-titre, tu à utiliser une div. Donc une balise bloc pour mettre une phrase. Ce n’est pas mal, mais il aurait été plus logique de réserver la balise div pour le conteur du texte et une span pour le sous-titre ;)

Ensuite pour ton souci de hauteur qui ne s’adapte pas a sont contenue tu a en effet plus ou moins raison. Lorsqu’un élément est positionné à l’aide d’un float, il sort du flux. C’est-à-dire que le reste du code en prend plus vraiment compte. Qu’il est une hauteur de 100px où 200px il n’en a rien à faire x) Du coup il faut nous même spécifier une hauteur. Tu étais bien partie avec ta div « .mo_fichexo1 ». Cette div créait un conteneur pour ton image et le texte. Il ne suffisais que de lui ajouter une hauteur : height :100px; la même hauteur que ton image par exemple. À ce bloc tu pourrais ajouter une marge en haut et en bas pour espacer les informations.

Pour ton deuxième problème, le sous-titre pas alignée avec la description. Tu as surement remarquée qu’un bloc de 100px de large auquel on ajoute une bordure de 5px devient donc un bloc de 110px de large. Si on souhaite que notre bloc soit vraiment de 100px on doit donc rétrécir sa largeur à 90px. Pour ton sous-titre c’est pareille sauf que tu à deux bordure : Une de 1px et une de 3px ont devra donc amputer notre div de 8px (3+1+1+3). La largeur de ta DIV « .titre2_fichexo1 » donnera donc 372px. Par contre, nous sommes toujours décaler…. Pour une raison que j’ignore la bordure outline n’est pas prise en compte dans le calcul. Pour remédier a cette situation on va donc donner à notre div un marge de 3px (la largeur de la bordure) à droite. Voilà tout est aligné !

Dans ton code on a par la suite les descriptions qui se retrouvent dans une balise inline. Comme dit plus haut. Ce sont des balises de ligne. Normalement elles ne sont pas faites pour accueillir beaucoup de texte et avoir une dimension et des marges. Je te conseille de mètre une div ou une balise paragraphe (p). Cette dernière est une balise bloc qui est dédié à recevoir du texte et une mise en page comme des marges. Elle a même des marge extérieur par défaut ;)

Et voilà j’ai pas mal fait le tour ! Ça fait beaucoup mais rasure toi dans l’ensemble c’est très bien =) Je t’encourage à essayer d’autres exercices ;)

Merci pour ton regard avisé et tes précieux conseils. :)

Batty a écrit:La première erreur que je voie c’est l’utilisation d’une span comme conteneur pour ton titre. Premièrement la balise span est une balise « inline » ce qui veut dire qu’elle ne peut normalement pas accueillir de balise bloc à l’intérieur d’elle. Je voie que tu as utilisé un display pour la transformé en bloc. Pourquoi ne pas avoir pris une balise qui est par défaut une balise bloc, comme une div ? En gros c’est comme si tu avais essayé de mettre une piscine à l’intérieur d’un verre d’eau. Aimes-tu mon image ? XD (oui, oui je me trouve drôle ._.)


Ensuite pour ton sous-titre, tu à utiliser une div. Donc une balise bloc pour mettre une phrase. Ce n’est pas mal, mais il aurait été plus logique de réserver la balise div pour le conteur du texte et une span pour le sous-titre ;)

En faite, j'ai voulue diversifier l'utilisation des div et des span, car de base je code tout en div et parfois ça capote un peu beaucoup. Voilà pourquoi je suis partie sur un span pour le bloc du titre, j'étais aussi partie sur un span pour le sous-titre, mais voyant que ça n'allait pas, j'ai opté pour la div. Pourtant je me suis aidée du tuto de Mello sur la différence entre les div et span, mais je me suis quand même emmêlée les pinceaux. Et j'adore ta comparaison, elle est très drôle en plus d'être bien explicative. ^^

Batty a écrit:Ensuite pour ton souci de hauteur qui ne s’adapte pas a sont contenue tu a en effet plus ou moins raison. Lorsqu’un élément est positionné à l’aide d’un float, il sort du flux. C’est-à-dire que le reste du code en prend plus vraiment compte. Qu’il est une hauteur de 100px où 200px il n’en a rien à faire x) Du coup il faut nous même spécifier une hauteur. Tu étais bien partie avec ta div « .mo_fichexo1 ». Cette div créait un conteneur pour ton image et le texte. Il ne suffisais que de lui ajouter une hauteur : height :100px; la même hauteur que ton image par exemple. À ce bloc tu pourrais ajouter une marge en haut et en bas pour espacer les informations.

Je n'ai pas du tout pensé à mettre une hauteur au bloc ".mo_fichexo1", j'ai essayé de mettre un margin-bottom pour espacer le tout sans succès et je me suis donc rabattue sur l'image et la description pour séparer les divers bloc.

Batty a écrit:Pour ton deuxième problème, le sous-titre pas alignée avec la description. Tu as surement remarquée qu’un bloc de 100px de large auquel on ajoute une bordure de 5px devient donc un bloc de 110px de large. Si on souhaite que notre bloc soit vraiment de 100px on doit donc rétrécir sa largeur à 90px. Pour ton sous-titre c’est pareille sauf que tu à deux bordure : Une de 1px et une de 3px ont devra donc amputer notre div de 8px (3+1+1+3). La largeur de ta DIV « .titre2_fichexo1 » donnera donc 372px. Par contre, nous sommes toujours décaler…. Pour une raison que j’ignore la bordure outline n’est pas prise en compte dans le calcul. Pour remédier a cette situation on va donc donner à notre div un marge de 3px (la largeur de la bordure) à droite. Voilà tout est aligné !

J'ai tenté de rétrécir la largeur du bloc titre et effectivement ça décalait toujours. Du coup j'ai abandonné assez vite voyant que je ne trouvais pas de solution, qui été plutôt simple, fallait juste y penser. xD

Betty a écrit:Dans ton code on a par la suite les descriptions qui se retrouvent dans une balise inline. Comme dit plus haut. Ce sont des balises de ligne. Normalement elles ne sont pas faites pour accueillir beaucoup de texte et avoir une dimension et des marges. Je te conseille de mètre une div ou une balise paragraphe (p). Cette dernière est une balise bloc qui est dédié à recevoir du texte et une mise en page comme des marges. Elle a même des marge extérieur par défaut ;)

Pareil qu'en haut, j'ai voulue diversifier les div et span. xD Pour la balise paragraphe, j'avoue ne pas tenter l'utiliser car je ne sais pas si on peut lui lier du CSS, du coup je suis preneuse pour de plus amples explications. :D

Encore merci pour ton avis. Je me rend compte que je n'ai pas du tout compris comment utiliser les span et les div, je suis allée trop vite en besogne pour le coup. Je note le tout et j'essayerais d'appliquer tous tes conseils pour le prochain exercice. :)

Heureuse que mes explication était claire ! Je suis sur qu'à ta prochaine expérience avec les span tu va penser à ma piscine ;)

Pour les balises paragraphe :

Code:

<p></p>

Elle sont presque comme les balise div. Les DIV sont en fait une balise de contenue. On peux mettre plein de truck dedans comme une grosse boîte. Les balise paragraphe elle sont spécifique à du texte. On peux ajouter des mot et des balise inline, mais pas de DIV. Elle reste tout de même une balise bloc qui crée un saut de ligne lorsqu'elle est utiliser. Donc si c'est une balise bloc on peux leur ajouter une class ou un id. Tu va me dire "les balises inline aussi non ? " Oui ! Mais on ne peux pas ajouter des valeurs de hauteur et de largeur ou même des marges extérieur à une balise inline (du moins pas sans modifier sa nature avec un display). Une balise paragraphe peu !

Les balise paragraphe on également une marge top et bottom par défaut(il est possible de la changer avec un margin). Voila j'espère avoir un peux démystifier la balise P

Ouais ! Du violet ! Trop beau ! Voilà le lien !

@Nanto
Bonjour toi ! Alors déjà, ton rendu est super, ça part bien x) Il me semble tip-top pareil que la maquette, bravo :DD

Ton code est assez propre dans l’ensemble, mais vu que t’es là pour t’améliorer, je vais chipoter un peu

Les balises p, h, img >< div.
Alors, la première chose que je remarque en parcourant la partie html de ton code, c’est que tu utilises uniquement des balises div, qu’importe le contenu de ta balise. Ça marche, c’est sûr, mais si tu veux rendre ton code plus clair et correct (surtout si quelqu’un passe derrière toi), il vaut mieux utiliser aussi les balises p, h, img, etc.
La div, c’est une balise de bloc (elle s’utilise donc pour un bloc général, un cadre, des trucs comme ça).
Le p, c’est une balise de paragraphe, à utiliser donc pour les textes.
Les h, ce sont des balises de titres et sous-titres. Après le h, on ajoute un chiffre qui indique l’importance du titre (h1, c’est ton gros titre, h2, un sous-titre, h3 un sous-sous-titre, etc).
L’img, c’est une balise d’image (logique tu vas me dire).
Alors il y a encore le span, qui peut s’utiliser lorsque tu veux modifier uniquement une lettre, un mot ou une ligne.
La balise a, qui correspond aux liens.

Bon, ça ce sont les balises générales, celles qu’on utilise fréquemment sur les forums du moins. Les p, les h et les span s’utilisent exactement comme une div. Exemple:

Code:

<h1>Ici j’écris mon titre</h1>
<p>Ici j’écris mon texte</p>
<span>Blabla</span>

Ici j’écris mon titre

Ici j’écris mon texte

Blabla

La balise img s’utilise comme ceci :

Code:

<img src="url de l’image"/>

Comme tu peux le voir, elle se ferme directement. Si tu veux ajouter un style, une class ou un id, tu le places comme le src.

Code:

<img src="url de l’image" class="machin-truc" id="chose"/>

Quant à la balise a, ça donne ça :

Code:

<a href="url de ton lien" class="truc">Mon lien se nomme comme ceci</a>

Je te donne le lien d’Epicode

Dans ton css, quand tu crées quelque chose qui se rapporte, disons, à un h1, tu peux l’écrire

Code:

h1.titreexquatre{ }

. Ça permet aux navigateurs de charger plus rapidement (bon là le code est tout petit, ça ne changera rien, mais pour un long code c’est utile). En gros, tu lui dis que ces paramètres s’appliquent à ce qui porte la class titreexquatre parmi les h1, ce qui est plus rapide que de chercher parmi touuuuutes les balises du code.

Si jamais tu veux plus d’infos sur toutes ces balises, je te laisse le lien de ce tutoriel sur les balises en général, ainsi que celui de ce tutoriel-ci qui explique bien le span.


2) Ton image

Alors, là j’ai pas trop compris ce que tu m’as fait. T’avais bien tout séparé ton HTML et ton CSS, mais là il y a un petit style qui traîne. Je comprends que c’était parce que tu voulais mettre l’image en background, ceci dit tu l’as mise aussi dans le CSS et là je vois pas l’intérêt.
En dehors de ça, avec la balise img src, tu n’as pas besoin de la mettre en background d’un bloc, d’autant plus que tu n’as ni hover dessus, ni quoi que ce soit d’autre qui doit passer par-dessus. Donc je te propose, pour te simplifier la vie :

Code:

Dans l’HTML, tu mets quelque chose comme ceci :
<img src="https://image.noelshack.com/fichiers/2018/32/5/1533933517-exoquatre.png" class="photoexquatre"/>

Et dans le CSS, quelque chose comme ceci :
img.photoexquatre{
  width: 100px;
  height: 100px;
  margin: 8px 15px 0px 0px;
}

Ah et pas besoin du display: inline-block du coup, parce qu’une img est en inline-block de base x)


3) Les sélecteurs

Je pense que c’est le dernier point. Je vois que tu t’y connais au moins un minimum, étant donné que tu en as utilisé un pour ton entête (d’ailleurs on va en reparler de cet entête, finalement il y aura un point 4 :frite: ).
Le principe du coup, c’est de limiter le nombre de class dans ton html, et avec les balises mentionnées plus haut, tu vas pouvoir le diminuer grandement. Par exemple, tu n’auras techniquement qu’un seul h1, un seul h2, des h3 si tu utilises ça pour le nom, un seul type de p, un seul type d’image. En disant un seul type, je veux dire qu’ils ont tous les mêmes paramètres, et là tu les as nommés de la même manière. Donc, en utilisant toutes ces balises, tu pourrais avoir, dans ton css :

Code:

.exquatre{  
 }

.exquatre h1{  
 }

.exquatre h2{  
 }

.exquatre img{  
 }

.exquatre h3{  
 }

.exquatre p{  
 }


C’est beaucoup plus propre et plus compréhensible si quelqu’un veut passer derrière, ou même pour t’y retrouver toi même x)


4) Les bordures

Alors, ça c’est plus des petits trucs bons à savoir xD
Premièrement, pour ton entête, pas besoin de faire deux div Pour faire les bordures, tu as deux propriétés: border, et outline. La propriété border se placera toujours juste à l’intérieur de ton cadre, et la propriété outline, juste à l’extérieur. De ce fait, à la place d’avoir ceci :

Code:

.enteteexquatre{
  height: 60px;
  background-color: #a3a3c7;
  padding: 5px;
}

.enteteexquatre > div {
  border: solid 1px white;
  height: 58px;
  text-align: center;
}


tu peux écrire ceci :

Code:

.enteteexquatre{
  width: 430px;
  height: 60px;
  border: solid 1px white;
  outline: solid 4px #a3a3c7;
  margin-left: 4px;
  background-color: #a3a3c7;
  text-align: center;  
  padding: 5px;


Et ça t’économise une div :frite: (oui, en codage on est souvent paresseux). Et c’est valable aussi pour tes noms :sisi:
Merci à @Kayl de m’avoir filé ce tuyau d’outline, c’est bien pratique xD

La deuxième chose, c’est toujours une question de paresse. Tu as ceci dans ton CSS :

Code:

.corpsexquatre{
  background-color: white;
  margin-top: 5px;
  padding: 8px 12px 25px 12px;
  border: solid #a3a3c7;
  border-width: 0px 0px 13px 0px;
}

En tant que flemmarde, j’aurais plutôt fait ceci :

Code:

.corpsexquatre{
  background-color: white;
  margin-top: 5px;
  padding: 8px 12px 25px 12px;
  border-bottom: 13px solid #a3a3c7;
}

Si tu as une bordure à ne placer que sur un (voire deux) côté(s), je trouve ça plus simple d'utiliser la propriété border-côté (border-top, border-right, border-bottom, border-left) et de lui assigner les trois paramètres que ton système, mais ce que tu as fait est bien aussi, c’est juste une autre façon de faire, un peu plus longue à écrire x)


Je pense que c’est tout (c’est déjà beaucoup tu vas me dire :rip:). Ne te décourage pas par mon pavé, ton code était déjà vraiment bien (bon à part le fait qu’il n’y ait que des div, ça on essaie d’éviter), mais le but c’est de s’améliorer alors j’ai chipoté xD Je te laisse corriger/tester tout ça, si tu as encore des questions n’hésite surtout pas x)

Oh que c'est long... Alors oui, c'est exactement comme l'image de base puisque j'ai mesuré et tout sur photofiltre, à part peut-être les polices, je suis un peu perfectionniste.

Je connais toutes ses balises, mais, excepté pour les images, les blocs me semblent plus adaptés. Et... Je hais les h, je ne sais pas pourquoi... Le fait que le style soit prédéfini sans doute, j'ai l'impression de ne rien contrôler.

Pour l'image... Oui, mais... Je n'y ai pas pensé, en fait, je n'ai aucune excuse...

Pour les sélecteurs, comme dis plus haut, je n'aime pas les h... Et puis il faudrait mettre les cadres en fond des titres de toute manière...

Alors n'importe qui me trouve paresseuse, et quand je m'y mets, on me critique ?! Non mais on vit dans quel monde ?! XD
Mais les bordures sont à combien de distance dans ton exemple ?

Je ne crois pas que je corrigerais, en fait, puisque j'ai encore plein de codes prioritaires (pour mes études), mais c'est noté. Et sérieux, faut que je me rappelle que les div, c'est pratique, on peut quasiment tout faire avec (puisqu'elle existe justement dans cette optique en même temps), mais c'est pas hyper varié. (Bon, après, si c'est fonctionnel...)

Alors pour les balises, techniquement si tu fais un bloc avec un texte en n'utilisant qu'une seule balise, oui, autant utiliser une div. Mais sinon, c'est toujours mieux d'utiliser les bonnes... Et pour les h, même s'ils ont un style prédéfini (ce qui est le cas pour tout d'ailleurs), c'est toujours modifiable. Tout ce que tu donnes comme paramètre à une balise, qu'elle soit div, p, h, a img ou quoi que ce soit d'autre, sera prioritaire sur le prédéfini
Quant à la paresse c'est pas grave xD Mais c'est vrai que c'est assez paradoxal xDD Et mes bordures sont à même distance que les tiennes :sisi:

Pas de souci, de toute manière c'est ton exercice et c'est toi qui vois ce que tu en fais x) Bon courage pour tes cours du coup

C'était bien sympas~

http://scratchpad.io/sincere-yard-7165

Hey @Alek ! Je viens commenter ton code et te donner quelques conseils sur ces derniers :3
Comme ça fait un moment que tu l'as fait, peut-être que tu t'es améliorée depuis, auquel cas je m'excuse d'avance de répéter ce que tu sais déjà. XD

Alors, la première chose que je vois, c'est qu'il y a... BEAUCOUP, BEAUCOUP de div. xDD
Outre le fait qu'il est mieux d'utiliser des balises sémantiques (c'est-à-dire une balise titre pour un titre, une balise p pour une zone de texte), ce qui me "dérange" surtout c'est que tu imbriques des div dans des div et que... bah tu te compliques la vie :D

Par exemple, tu mets ton image dans une div, ce qui est inutile car tu peux la cibler avec le CSS (ou, au pire, lui attribuer une class).
Pour les titres, tu imbriques des div pour faire le "cadre", si j'ai bien compris, alors qu'il y a une propriété GÉNIALE qui peut tellement te simplifier la vie ! Approche-toi, je vais te dévoiler toussa 8D

Tu peux combiner la propriété border et la propriété outline. Avec cette dernière, tu peux créer un cadre qui sera à l'extérieur du premier border. Par exemple, pour coder ton premier titre hyper simplement, tu aurais pu faire comme ça :

Code:

h1 {
 height: 100px;
 width: 600px;
 background-color: #a3a3c7;
 margin:0px auto;
  border: 3px solid white;
  outline: 10px solid #a3a3c7;
}

Ce qui donne : https://prnt.sc/msjw7b. D'abord, tu définis le cadre avec border, et ensuite tu rajoutes outline avec la même couleur que le block pour en faire un autre, et donner cette impression de cadre dans un block. ;)

Ensuite, tu as l'habitude d'encadrer tes titres (et tout, de manière générale) avec des div, et ça alourdi beaucoup le html. :c

Ton premier titre, que tu as codé comme ça :

Code:

<div class="cadre">
 <div class="bis">
 
   <div class="titre">
     UN JOLI TITRE ICI
   </div>
   <div class="sous">
     ET UN PETIT SOUS FORUM LA
   </div>

Peut se coder comme ça

Code:

<h1>Un joli titre ici <span>Et un petit sous forum là</span>
</h1>

Ce qui est beaucoup plus simple. Rappelle-toi que, le texte qui est dans ta div, tu peux le mettre en forme en ajoutant ses propriétés dans le block parent. Et pour le sous-titre (pour le mettre à la ligne et réduire sa taille par exemple), pas besoin de class ni de div, tu peux le cibler de cette manière :

Code:

h1 span {
display: block;
font-size: 13px;
}

Un display block afin qu'il passe à la ligne et le font-size pour réduire la taille, c'est tout. ;)

N'hésite pas, si tu as des questions !  

Merci beaucoup Arte pour cette correction

Ha oui, les div's, les fameuses xD
A chaque fois je me dit qu'il faut que j'en utilise moins.. Mais je crois que c'est ma zone de confort. Quoique quatre /div à la suite, c'est un peu ridicule ahem
Si j'ai bien compris, 'outline' permet d'ajouter un border à l'extérieur d'un border ? Merci en tout cas, je connaissais pas du tout cette propriété **

je m'excuse d'avance si tu recroise un de mes exos, ça seras bourrer de div /meurs/

C'est une habitude à prendre, ne t'en fais pas ! Moi aussi j'utilisais beauuucoup de div, mais même si c'est pas trop problématique quand tu codes une fiche ou la structure d'un template simple, ça devient très vite le boxon quand il faut coder une P.A complexe avec des hovers ou une fiche de présentation bien compliquée xDD

Et oui, tu as tout à fait compris la fonction de la propriété outline ! Quand j'ai découvert ça, ma vie a changé *sort*

Coucou,
je suis débutante en code et du coup j'ai essayé l'exercice !
j'ai mis plus de deux heures //vous pouvez me juger

codes:

merci !