avatar
Sexe : Féminin
Date d'inscription : 07/11/2015
Messages : 70
Newbie
Voir le profil de l'utilisateur
# [Facile] Exercice 4 - Fiche - Orile Mer 15 Mar 2017 - 20:58
Bonjour / Bonsoir,

Je poste ici un schema assez simple qui peut servir à différentes choses, bestiaire, boutique, liens etc...
Couleur : #a3a3c7
Police : Tahoma



Bonne chance !
avatar
Sexe : Féminin
Date d'inscription : 23/03/2017
Messages : 205
Membre timide
Voir le profil de l'utilisateur
J'espère que ça marche

Edit : yesss ! Merci pour l'exercice ^^



avatar
Sexe : Masculin
Date d'inscription : 17/06/2016
Messages : 722
Accro au forum
Voir le profil de l'utilisateur
# Re: [Facile] Exercice 4 - Fiche - Orile Mer 29 Mar 2017 - 19:44
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/
avatar
Sexe : Féminin
Date d'inscription : 23/03/2017
Messages : 205
Membre timide
Voir le profil de l'utilisateur
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 !

avatar
Invité
Invité
# Re: [Facile] Exercice 4 - Fiche - Orile Jeu 11 Mai 2017 - 15:15
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 :/
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 4864
Admin Designeuse & Briseuse de nuques
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
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


J'aime les activités à risque, comme donner mon avis, par exemple.

avatar
Sexe : Féminin
Date d'inscription : 23/07/2017
Messages : 1145
Member One
Voir le profil de l'utilisateur
# Re: [Facile] Exercice 4 - Fiche - Orile Mar 25 Juil 2017 - 19:20
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 !
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 4864
Admin Designeuse & Briseuse de nuques
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: [Facile] Exercice 4 - Fiche - Orile Mer 2 Aoû 2017 - 10:33
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 !


J'aime les activités à risque, comme donner mon avis, par exemple.

avatar
Sexe : Féminin
Date d'inscription : 23/07/2017
Messages : 1145
Member One
Voir le profil de l'utilisateur
# Re: [Facile] Exercice 4 - Fiche - Orile Mer 2 Aoû 2017 - 11:44
Merci beaucoup Chesire !
avatar
Sexe : Féminin
Date d'inscription : 13/01/2018
Messages : 409
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: [Facile] Exercice 4 - Fiche - Orile Mar 6 Fév 2018 - 18:30
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. Panique 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 :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2849
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: [Facile] Exercice 4 - Fiche - Orile Lun 26 Fév 2018 - 18:00
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 ♥️



avatar
Sexe : Féminin
Date d'inscription : 13/01/2018
Messages : 409
Fidèle au poste !
Voir le profil de l'utilisateur
Coucou Reine. :)

Je suis passé à côté de la notification, désolée ! Super héro
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 ♥️
avatar
Sexe : Féminin
Date d'inscription : 07/03/2018
Messages : 30
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. Panique 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

avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3800
Modo Maxi-Code master - Ex-admin gangsta du Québec
Voir le profil de l'utilisateur
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 ;)



avatar
Sexe : Féminin
Date d'inscription : 07/03/2018
Messages : 30
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. :)
avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3800
Modo Maxi-Code master - Ex-admin gangsta du Québec
Voir le profil de l'utilisateur
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



avatar
Sexe : Féminin
Date d'inscription : 07/06/2016
Messages : 328
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: [Facile] Exercice 4 - Fiche - Orile Ven 10 Aoû 2018 - 22:47
Ouais ! Du violet ! Trop beau ! plz Voilà le lien !

avatar
Sexe : Féminin
Date d'inscription : 22/12/2016
Messages : 210
Maxi-Code master
Voir le profil de l'utilisateur
@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)
avatar
Sexe : Féminin
Date d'inscription : 07/06/2016
Messages : 328
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: [Facile] Exercice 4 - Fiche - Orile Mar 11 Sep 2018 - 21:18
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...)
avatar
Sexe : Féminin
Date d'inscription : 22/12/2016
Messages : 210
Maxi-Code master
Voir le profil de l'utilisateur
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



Cadeau de la loterie, par Reine des Ténèbres **


Merci beaucoup Moony
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum