epicode
Epicode, c'est sept ans d'entraide dans la création de forums. Vous y trouverez une gamme complète de libre-service, allant du simple avatar jusqu'à l'index codé intégralement. Venez fouiller pour trouver votre bonheur ! Si jamais vous n'y parvenez pas, vous pourrez toujours commander ! Nos graphistes et codeurs sont là pour vous, pour répondre à vos demandes et vous aider dans la conception de vos forums.

Epicode, c'est une offre complète allant jusqu'au conseil sur forum. Envie d'avis sur votre contexte, d'une relecture ? Nos conseillers se feront une joie de vous aider dans ces tâches difficiles, vous permettant d'avoir un forum parfait jusqu'à la virgule près.

Pour finir, Epicode c'est aussi des animations, des jeux, des concours, des défis, avec des animateurs haut en couleurs prêt à vous embarquer dans de folles aventures. Mais surtout, Epicode, c'est avant tout une ambiance chaleureuse, un staff disponible et un forum actif ! Rejoignez-nous !
entre donc,

Page 1 sur 2 1, 2  Suivant
Aller en bas
# [Facile] Exercice 4 - Fiche - Ori - le 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

[Facile] Exercice 4 - Fiche - Ori 678367codeinventairebestiaire

Bonne chance !
Ori
Newbie
Date d'inscription : 07/11/2015
Messages : 97
# Re: [Facile] Exercice 4 - Fiche - Ori - le Sam 25 Mar 2017 - 2:11
J'espère que ça marche

Edit : yesss ! Merci pour l'exercice ^^



Luinil.
Membre timide
Date d'inscription : 23/03/2017
Messages : 206
# Re: [Facile] Exercice 4 - Fiche - Ori - le 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/
Nirvage
Accro au forum
Date d'inscription : 17/06/2016
Messages : 778
# Re: [Facile] Exercice 4 - Fiche - Ori - le Jeu 30 Mar 2017 - 8:23
Coucou, merci pour vos retours Maitre [Facile] Exercice 4 - Fiche - Ori 3775839356

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 [Facile] Exercice 4 - Fiche - Ori 3482194067 Mais j'ai découvert JSbin ici et je suis tombée amoureuse alors je vais surement être plus assidue !

Luinil.
Membre timide
Date d'inscription : 23/03/2017
Messages : 206
Invité
# Re: [Facile] Exercice 4 - Fiche - Ori - le 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 :/
Anonymous
Invité
# Re: [Facile] Exercice 4 - Fiche - Ori - le Lun 5 Juin 2017 - 3:28
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é [Facile] Exercice 4 - Fiche - Ori 3313101865
- 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 [Facile] Exercice 4 - Fiche - Ori 3775839356
Cheshire Cat
Vieille admin - Briseuse de nuques
Date d'inscription : 15/12/2012
Messages : 4815
# Re: [Facile] Exercice 4 - Fiche - Ori - le 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 !
Lazy
Accro au forum
Date d'inscription : 23/07/2017
Messages : 1150
# Re: [Facile] Exercice 4 - Fiche - Ori - le 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 ! [Facile] Exercice 4 - Fiche - Ori 3775839356
Je n'ai rien à redire !
Cheshire Cat
Vieille admin - Briseuse de nuques
Date d'inscription : 15/12/2012
Messages : 4815
# Re: [Facile] Exercice 4 - Fiche - Ori - le Mer 2 Aoû 2017 - 11:44
Merci beaucoup Chesire !
Lazy
Accro au forum
Date d'inscription : 23/07/2017
Messages : 1150
# Re: [Facile] Exercice 4 - Fiche - Ori - le 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. [Facile] Exercice 4 - Fiche - Ori 2979024130

Visuel :


HTML :


CSS :
Peluushe
Fidèle au poste !
Date d'inscription : 13/01/2018
Messages : 487
# Re: [Facile] Exercice 4 - Fiche - Ori - le 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 ♥️

Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: [Facile] Exercice 4 - Fiche - Ori - le Mer 7 Mar 2018 - 20:36
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 ♥️
Peluushe
Fidèle au poste !
Date d'inscription : 13/01/2018
Messages : 487
# Re: [Facile] Exercice 4 - Fiche - Ori - le Jeu 8 Mar 2018 - 16:16
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

Rozenbreizh
Newbie
Date d'inscription : 07/03/2018
Messages : 34
# Re: [Facile] Exercice 4 - Fiche - Ori - le Jeu 8 Mar 2018 - 17:39
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 ;)
Batty
Ancien.ne du staff
Date d'inscription : 05/06/2014
Messages : 3513
# Re: [Facile] Exercice 4 - Fiche - Ori - le Jeu 8 Mar 2018 - 18:05
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. [Facile] Exercice 4 - Fiche - Ori 885843852 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. [Facile] Exercice 4 - Fiche - Ori 2979024130 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. :)
Rozenbreizh
Newbie
Date d'inscription : 07/03/2018
Messages : 34
# Re: [Facile] Exercice 4 - Fiche - Ori - le Jeu 8 Mar 2018 - 20:00
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
Batty
Ancien.ne du staff
Date d'inscription : 05/06/2014
Messages : 3513
# Re: [Facile] Exercice 4 - Fiche - Ori - le Ven 10 Aoû 2018 - 22:47
Ouais ! Du violet ! Trop beau ! plz Voilà le lien !

Nanto
Fidèle au poste !
Date d'inscription : 07/06/2016
Messages : 330
# Re: [Facile] Exercice 4 - Fiche - Ori - le Sam 8 Sep 2018 - 10:44
@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 [Facile] Exercice 4 - Fiche - Ori 3969863598

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 [Facile] Exercice 4 - Fiche - Ori 3969863598 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)
Sun
Ancien.ne du staff
Date d'inscription : 22/12/2016
Messages : 266
# Re: [Facile] Exercice 4 - Fiche - Ori - le 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...)
Nanto
Fidèle au poste !
Date d'inscription : 07/06/2016
Messages : 330
# Re: [Facile] Exercice 4 - Fiche - Ori - le Jeu 13 Sep 2018 - 8:34
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 [Facile] Exercice 4 - Fiche - Ori 3313101865
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 [Facile] Exercice 4 - Fiche - Ori 3775839356
Sun
Ancien.ne du staff
Date d'inscription : 22/12/2016
Messages : 266
Alek
Mini-graphiste
Date d'inscription : 20/01/2018
Messages : 2270
# Re: [Facile] Exercice 4 - Fiche - Ori - le Dim 3 Mar 2019 - 12:25
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 !  [Facile] Exercice 4 - Fiche - Ori 3775839356
Artemis
Modo en stage et designer
Date d'inscription : 14/01/2017
Messages : 2100


[Facile] Exercice 4 - Fiche - Ori Nng7
Spoiler:
[Facile] Exercice 4 - Fiche - Ori 51Nr7
Merci Sygea ! **Merci Shigurai !
[Facile] Exercice 4 - Fiche - Ori J3lo
[Facile] Exercice 4 - Fiche - Ori Dn89
[Facile] Exercice 4 - Fiche - Ori Uan6
Merci Fufu :3
Merci Milou !  c: ♥️
[Facile] Exercice 4 - Fiche - Ori Ly4jFos
Merci xMia et Alek !  [Facile] Exercice 4 - Fiche - Ori 3775839356
[Facile] Exercice 4 - Fiche - Ori Essai_Cadeau
[Facile] Exercice 4 - Fiche - Ori Qz09
Merci Funeral !  [Facile] Exercice 4 - Fiche - Ori 3775839356
[Facile] Exercice 4 - Fiche - Ori 1no3
Merci Naütilus. ! :'D
[Facile] Exercice 4 - Fiche - Ori Signaa10
Merci Reine des Ténèbres !  Coeur 2
[Facile] Exercice 4 - Fiche - Ori 18041502233812811115668294
Merci Eskimo. !  Coeur

[Facile] Exercice 4 - Fiche - Ori 447717kdoartemis
# Re: [Facile] Exercice 4 - Fiche - Ori - le Dim 3 Mar 2019 - 13:58
Merci beaucoup Arte pour cette correction [Facile] Exercice 4 - Fiche - Ori 3775839356

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/
Alek
Mini-graphiste
Date d'inscription : 20/01/2018
Messages : 2270
# Re: [Facile] Exercice 4 - Fiche - Ori - le Dim 3 Mar 2019 - 14:31
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*



Artemis
Modo en stage et designer
Date d'inscription : 14/01/2017
Messages : 2100


[Facile] Exercice 4 - Fiche - Ori Nng7
Spoiler:
[Facile] Exercice 4 - Fiche - Ori 51Nr7
Merci Sygea ! **Merci Shigurai !
[Facile] Exercice 4 - Fiche - Ori J3lo
[Facile] Exercice 4 - Fiche - Ori Dn89
[Facile] Exercice 4 - Fiche - Ori Uan6
Merci Fufu :3
Merci Milou !  c: ♥️
[Facile] Exercice 4 - Fiche - Ori Ly4jFos
Merci xMia et Alek !  [Facile] Exercice 4 - Fiche - Ori 3775839356
[Facile] Exercice 4 - Fiche - Ori Essai_Cadeau
[Facile] Exercice 4 - Fiche - Ori Qz09
Merci Funeral !  [Facile] Exercice 4 - Fiche - Ori 3775839356
[Facile] Exercice 4 - Fiche - Ori 1no3
Merci Naütilus. ! :'D
[Facile] Exercice 4 - Fiche - Ori Signaa10
Merci Reine des Ténèbres !  Coeur 2
[Facile] Exercice 4 - Fiche - Ori 18041502233812811115668294
Merci Eskimo. !  Coeur

[Facile] Exercice 4 - Fiche - Ori 447717kdoartemis
# Re: [Facile] Exercice 4 - Fiche - Ori - le Ven 30 Aoû 2019 - 16:22
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:

HTML
Code:
<html>
<link rel="stylesheet" href="css.css">

<link href="https://fonts.googleapis.com/css?family=Tahoma" rel="stylesheet">


<div class="top">
    <h2>UN JOLI TITRE ICI</h2>
    <h5>ET UN PETIT SOUS TITRE POUR FAIRE BEAU</h5>
</div>

<div class="Fondcategorie">
    <div class="categorie">
        <div class="nom">
        Nom creature ou objet
            <div class="description">
            Description du grand Fitzgerald:Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            </div>
        </div>
     </div>

     <div class="categorie">
            <div class="nom">
            Nom creature ou objet
                <div class="description">
                Description du grand Fitzgerald:Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                </div>
            </div>
         </div>
         <div class="categorie">
                <div class="nom">
                Nom creature ou objet
                    <div class="description">
                    Description du grand Fitzgerald:Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    </div>
                </div>
             </div>

             <div class="categorie">
                    <div class="nom">
                    Nom creature ou objet
                        <div class="description">
                        Description du grand Fitzgerald:Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                        </div>
                    </div>
                 </div>

                 <div class="categorie">
                        <div class="nom">
                        Nom creature ou objet
                            <div class="description">
                            Description du grand Fitzgerald:Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                            </div>
                        </div>
                     </div>
            </div>
        <div class="violet"></div>

</html>

Le CSS


Code:
.top{
   background-color: #a3a3c7;
   width: 500px;
   height: 95px;
   text-align: center;
   border-style: solid;
   border-color: white;
   border-width: 2px;
   outline: 10px solid #a3a3c7;
   text-align: justify;
 
}

h5 {
   top: 25px;
   text-align: center;
   font-family:  Tahoma, sans-serif;
   color: white;
   }

h2 {
   text-align: center;
   font-family:  Tahoma, sans-serif;
   color: white;
}

.Fondcategorie {
top: 900px;
background-color: white;
width: 500px;
height: 600px;
}

.categorie {
   width: 100px;
   height: 100px;
   margin-left: 2px;
   margin-top: 20px;
   background-image: url("https://66.media.tumblr.com/20c9fba0599713bb7affccc3c8bb17f9/4a601ffad93dea84-58/s128x128u_c1/d5ac75c5f849db1d940f73a7d453564ede727fcc.pnj");
}

.nom {
   background-color: #a3a3c7;
   width: 365px;
   height: 20px;
   text-align: center;
   border-style: solid;
   border-color: white;
   border-width: 2px;
   outline: 3px solid #a3a3c7;
   text-align: center;
   float: center;
   position: absolute;
   left: 135px;
   color: white;
   font-family:  Tahoma, sans-serif;
   font-size: 14px;
}

.description {
float: center;
text-align: center;
color: gray ;
position: relative;
bottom: -10px;
height: 80px;
overflow: scroll;
overflow-x: hidden;
font-family:  Tahoma, sans-serif;
}

.violet {
   width: 500px;
   height: 20px;
   background-color: #a3a3c7;
   position: absolute;
   left: auto;
}


merci !
Sora
Newbie
Date d'inscription : 19/08/2019
Messages : 7
Contenu sponsorisé
Revenir en haut
Page 1 sur 2 1, 2  Suivant
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum