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,

Aller en bas
Accro au forum
Sygea

C'est une très ancienne maquette qui n'a jamais été codée, aussi je n'ai malheureusement plus les images. Comme j'ai fait sur la maquette, prenez des images que vous avez en réserve qui vous plaisent ça marchera très bien

La fiche fait 500*500px

-> La police du titre, des liens, des pseudos et de join us est Oswald
-> Le reste est calibri mais arial ou roboto passent aussi très bien

- Le bloc clair du contexte fait 440*160px
- Le bloc clair des informations fait 145*170px
- Les 2 blocs pour les membres VIP font 160*165px avec une bordure en #000000

-> La barre noire à droite est en #000000
-> La bordure du titre principal est aussi #000000
-> Les blocs clairs sont en #ffffff opacité 0.6 ou 0.7
-> Les liens sont en #000000 écrit en #ffffff
-> Tout ce qui est rouge est #9f0a08

Effet(s):
Il n'y a, a priori, pas d'animations particulières, mais si vous êtes à l'aise avec tout ça, amusez vous ! Y'a moyen de faire des trucs sympas en vrai (changement de couleur du bouton rejoindre, hover pour les membres VIP, transitions de couleur sur les liens...)

Une fois bien réalisée, n'hésitez pas à mettre fièrement votre fiche en libre-service !

[Intermédiaire] Exercice 12 - Fiche de pub 3775839356
Sygea
Accro au forum
Date d'inscription : 04/04/2016
Messages : 1009


Ancien.ne du staff
Batty
Merci du partage Elle est très jolie !

Je l'ajoute à la l'index et voici quelque tuto qui pourrais aider

Positionnement avec display ou Positionnement float
Différence entre DIV et SPAN
Les listes
Les balise HTML
Utilisation des sélecteurs

Si vous souhaiter mettre la fiche pub dans une page HTML :
Structure d'une page HTML
Iframe
Batty
Ancien.ne du staff
Date d'inscription : 05/06/2014
Messages : 3513
Mini-graphiste
Alek
Bloup~
Je n'ai pas respecté les tailles #thug [Intermédiaire] Exercice 12 - Fiche de pub 1717827495



je n'ai pas pu faire comme sur la maquette, les blocs décalés, parce que mon tout est dans un bloc avec une largeur définis étou.. voilou [Intermédiaire] Exercice 12 - Fiche de pub 3655035957
Alek
Mini-graphiste
Date d'inscription : 20/01/2018
Messages : 2298
Ancien.ne du staff
Reine des Ténèbres
Bonsoir, @Alek :3
Je te réponds avec un mois de retard, sorry.

Concernant ton choix de coder sur scratchpad, je trouve ça pas très pertinent pour un exo, vu que le code peut être modifier en temps réel. Ce site sera plus adapté pour un tuto en direct ou pour coder un projet en collaboration entre deux ou plusieurs codeurs. Pour que ton code soit plus en sécurité il sera préférable d'utiliser un éditeur comme Codepen ou JSfiddle.

Sinon tu t'en sors plutôt bien pour cette fiche, par contre il y a quelques disparités à voir.
Niveau visuel, le dernier avatar n'est pas décalé en effet et il manque le cadre noir au bloc du contexte.
Il te manque aussi tout ce qui est interactif. contexte, prédéfini, annexe et join us sont supposé être des liens.

Alors petit faute d'inattention à la fin de ton CSS, il y a un point virgule après ton commentaire sur la couleur de l'ascenseur.

Comme tu le sais déjà, t'es très copine avec les div, un peu trop quand même x). Je t'invite donc à voir ce tuto pour découvrir les autres balises HTML.

Alors on a .bloc et .fond qui entoure le même contenu, une de moins serait bien :p
Tu n'as besoin d'un seul bloc parent, qui aura une grosse bordure droite noire (border-right).
De même pour .contexte et .texte ça fait deux div alors que tu peux juste mettre tout ton CSS dans contexte directement.

Ton titre et sous-titre ont tous les deux une marge de 8px. Tu peux si tu veux mettre un padding de 8px au cadre ça t'évitera de mettre une marge à chaque élément. Ici tu n'as que deux mais imagine quand tu en as plus et là ça te fait déjà une ligne de moins.

.pitit et .info encore deux div mais pourquoi ? Avoue que tu le fais exprès /pan.
Pour bien centrer verticalement le texte tu peux soit utiliser un padding et donc au lieu du margin-top: 5px dans info tu mets un padding-top dans .pitit. Sinon tu peux utiliser la propriété line-height (littéralement interligne), celle-ci doit avoir la valeur de la hauteur de ton bloc. Attention par contre ça ne fonctionne pas si tu as plusieurs lignes parce que comme c'est un interligne tu auras la première ligne au centre mais les autres à exactement la même distance, very far away :p

Un peu plus loin on a la div cadre autour de boite1, encore une div dont on va se débarasser grâce à la propriété magique "outline" littéralement line externe et qui fonctionne comme un border avec trois petites différences.
- une bordure fait partie de la largeur et hauteur d'un bloc, outline se place à l'extérieur :
j'ai un border
j'ai un outline
j'ai les deux je suis cool

- On peut définir à quel distance sera l'outline avec la propriété outline-offset, quand c'est positif c'est plus loin de la bordure et quand c'est négatif c'est une bordure à l'intérieur comme dans le cas de notre schéma.
on aura un truc du genre :
Code:
outline: 1px solid black;
outline-offset: -5px;
- La troisième particularité de l'outline c'est qu'il est toujours rectangulaire, donc une propriété comme le border-radius n'existe pas pour l'outline et donc si notre bloc est rond, c'est mort, on va devoir utiliser deux div comme tu aimes :p

Retournons à notre petite fiche. Alors toujours dans la boite1, ça m'étonne que tu aies utilisé des span et pas des div *sort les feux d'artifices*
mais en fait, ironiquement des div t'auraient éviter de mettre deux fois br, la div te garanti un saut de ligne et la gestion de l'espace entre les textes avec margin. Ceci dit, c'est quand même une fiche qui sera utilisée dans le message d'un forum et donc "entrer" fera très bien l'affaire. Donc les span c'est bien :p

La boite2, C'est moi ou il y a trois div ? *recompte* nan c'est trois div *meurt*
Alors là le flex ça sert strictement à rien. Tu peux supprimer le CSS de colonne et tu me diras si tu vois une différence.
Dans le schéma le dernier avatar dépasse la partie rouge et se superpose à la barre noire. Il suffit donc d'augmenter la largeur du bloc qui entoure les trois bloc (ici display). Donc pour changer uniquement la deuxième ligne vu que la line des liens est aussi appelé display tu peux soit changer de nom à la deuxième ou sélectionner le deuxième display de la sorte :
Code:
.display + .display {
  width: 500px;
}
+ veut dire "qui suit", donc là uniquement le display qui suit un autre display sera affecté.

Les images membres du mois et rpg du mois sont des avatars et pas des décorations, donc il est préférable de les mettre dans le HTML et non en background. Faire la distinction entre image décorative et image en rapport avec le contenu permet à ton code d'être accessible aux non-voyants.

Voilà voilà j'espère que mes remarques t'aideront à progresser et que tu t'es amusée en me lisant :p
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
Contenu sponsorisé
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum