Réseau social type FB (Profil)

Salut !

J'aime beaucoup le rendu c'est très classe ! Juste, si c'est pour du libre service, peut-être enlever les liens de la fiche ? Enfin mettre les liens sans l'adresse, juste un # par exemple...
Et du coup ça fait parti de la collection avec la fiche des liens et tout non ?

En tout cas si tu débutes c'est que tu débutes suuuuper bien quand même ^^

Ah oui oups, j'ai pris le code de mon forum c'est pour ça! Pardon

Tu fais bien de me le dire parce que j'ai aussi mis sur un autre LS, alors je vais les enlever de partout!

Merci sinon Et oui, il y a après la fiche amis et photos! (faut que je les rende propre en fait, c'est pour ça qu'elles sont pas encore là )
Et oui je débute, mon premier code toute seule de A à Z, c'est la signature que j'ai proposé aussi en LS! Sinon, je savais juste comprendre les code déjà fait

Nasträlya a écrit:vu que je débute en code

Eh bah j'ai hâte de voir ce que ça donnera dans quelques années si ça c'est juste un début ! o.o
C'est très réussi; y'aurait juste un petit padding-top que j'aurais rajouté sur Introduction, mais je reste bluffé

Merci pour ce beau LS !

Comme j'ai dis à Sparrow-style, j'entend débutante dans le sens où se sont mes premiers codes de A à Z, la signature que je propose en LS (Ball signature) étant la toute toute première! Lui c'est mon deuxième, et je l'ai faite en deux fois, une très très sale avec des style partout à s'en crever les yeux, et après une version plus propre: celle là Bien que je suis certaines qu'on trouvera des soucis à long terme

Et pour le padding, merci de ta remarque! Je suis allée vérifié et j'avais oublié de convertir une balise style en class, et je sais pas pourquoi, il ne la prenait pas en style... bref! du coup, il y a une class pour l'introduction, un padding:5px =D et oui, ça rend mieux du coup!

Hepepep, pas d'excuse, tu assumes que c'est un joli code. >:[

Hello @Nasträlya !

Tout d'abord merci pour ce LS, il est vraiment cool et peut être super intéressant pour certains forums ! Je suis fan de ton idée

Par contre tu as quelques petites erreurs alors on va voir ensemble ce qui ne va pas et tenter de corriger cela. Puisque tu débutes, si tu as du mal pour certaines corrections n'hésites pas à te manifester pour que je t'aide, mais le but reste que tu corriges toi-même tes erreurs pour apprendre

Voici donc la liste des quelques erreurs que j'ai repéré en testant ton code :

• Ta façon de faire les commentaires dans le HTML est erronée, heureusement pour toi cela n'a pas créé de problème, voici la bonne manière de faire :

  Code:

  <!-- Je suis un commentaire -->

  Comme tu peux le voir, il n'y a pas de point d'exclamation pour fermer le commentaire.
  
• Tu as d'ailleurs mal ouvert ton premier commentaire, attention ! Cela fait qu'on le voit en au début du code lorsqu'on le test
  
• J'ai repéré plusieurs classes dans ton CSS que tu n'utilises jamais dans ton HTML. Est ce qu'il y a une raison à cela ? Est-ce un oubli ou des versions alternatives ? Si c'est des versions alternatives, il faudrait donner quelques explications. Si ce sont des oublis, alors il faut nettoyer cela
  
• Sinon j'ai testé ton code sur mon forum test, et le rendu n'est pas tout à fait le même... Peut être as-tu du CSS sur ton forum (dans la feuille de styles du forum) qui modifie ton rendu ? Si tu veux un aperçu de mon rendu le voici. N'hésites pas à tester ton code ailleurs que sur ton forum

Sinon, voici quelques petits trucs pour t'aider à améliorer la présentation de tes LS :

• Tout d'abord, n'hésites pas à piocher dans ce sujet les différentes mises en forme.
  
• Ensuite pour du code, on essaye souvent de séparer HTML et CSS. Ce n'est pas obligatoire évidemment, mais cela aide les membres à s'y retrouver et souvent cela leur évite de mélanger. On a aussi souvent pour habitude de mettre le CSS avant le HTML, cela permet au navigateur de le charger en premier et évites pour ceux ayant une mauvaise connexion d'avoir le rendu s'affichant sans le CSS pendant le chargement.
  
• N'hésites pas à ajouter plus de commentaires dans ton HTML et ton CSS, cela permet aux débutants de plus facilement se retrouver dans le code de quelqu'un d'autre. Et puis, plus les choses sont claires, moins on a de risque d'avoir des membres perdus qui viennent dans "Problème avec mon code"

En tous cas, c'est super pour un premier LS et je t'encourage vivement à continuer dans ce sens !

PS : On évitera de commenter ma surutilisation de ...

Je m'y atèle maintenant, mais je crois que tu vas régler un pb que j'avais quand je voulais mettre plusieurs publications! (du coup j'avais abandonnée en me disant que je devais pas avoir les connaissances ) Je vais vérifier tout ça! ♫

@Anon, merci

EDIT: Alors, j'ai modifié MAIS, j'ai un soucis de div. Déjà j'ai testé sur 4 forums différents, je comprends pas comment tu as ce rendu Parce que sur les quatre, il y pas du tout les bugs que tu as... et je me demande si c'est pas à cause de la version ? parce que ton forum ne prends aucun de mes #color Par contre, j'ai enlevé le font-size pour pour l'intro parce que la taille était pour mon forum, avec mon écriture, donc en 14px c'était bien... mais c'est stupide parce que 14 avec une autre police, bah ça peut faire plus gros et du coup ça faisait n'importe quoi avec certains forums! (sauf le tien, il faudrait un font-size au moins à 13px pour que ça fonctionne, parce que ta police doit être à 14 ou plus fin toi si je réduis à 13, ça passe en tout cas ) Et donc j'ai toujours ce pb de div... j'ai vérifié au moins 5 fois chaque div hier déjà, et je trouve pas où est le bug... d'où le fait qu'il y avait le ".publi2" dans le CSS, non utilisé dans le HTML, parce que je voulais mettre plus de publications, mais que le height:auto fonctionne pas et que quand je rajouter une autre publication (avec un bloc qui prend le contenu de toutes les publications, pour qu'elles s’alignent toutes) bah ça fonctionne pas, ça sort totalement du cadre

Je vais m'occuper de la présentation LS, mais j'aimerai bien régler ce problème de code - j'ai peut être mis trop de commentaires dans mon code

PS : je suis en train de modifier les autre LS avec ce que tu m'as dis là du coup :)

Hello !

Alors j'ai testé à nouveau et dans le doute, j'ai changé la version et j'ai tout reset (template, CSS, etc). Donc j'ai tout avec un forum de base, non modifié. J'ai ce rendu sur toutes les versions. Je précise que je n'ai vraiment aucun CSS personnalisé ! Je précise que je suis sur Firefox, mais j'ai aussi testé sous Chrome, mais le résultat est le même

Du coup, pour t'aider j'ai prit ton code et je l'ai mit sur cet outil magique et génial : HTML Beautifier
Il a déjà repéré un petite erreur dans ton code

Code:

<!--publication--!><div class="fontpublipraya"><div class="publipraya"> C'est thème Cyborg à la Fleurette ! Ton cocktail t'attends :coktail:</div></div>

*sors la tapette à erreur* Qu'est-ce qu'on a dit sur les commentaires ? è_é
Je rigole, évidement ! Du coup j'ai testé en corrigeant cette erreur, mais ça ne change pas grand chose. Je passe donc au 2ème level de vérification, je vais tout mettre ça sur mon éditeur de code.

Du coup j'ai prit le temps d'inspecter ton code, et je pense avoir trouvé déjà quelques solutions à tes problèmes. Mais avant cela, je me permet de poster le rendu de ton code ici pour voir si le problème ne viendrait pas réellement de mon forum (il fait des trucs trop bizarres). Je mets sous hide et j'enlève après inspection et les quelques réglages que j'imagine.

[EDIT] J'ai trouvé d'où vient une partie du problème : l'activation par défaut des tags de mots-clés, ainsi toutes les couleurs avec un # sont converties en tag et non en couleur. Je ne connaissais pas ce bug, puisque beaucoup de forums le désactive et je n'ai pas fait spécialement attention quand j'ai configuré le mien. En le désactivant et en rechargeant, le problème est résolu. J'avoue quand même que c'est la première fois que j'ai ce problème. Il y a aussi un oublie d'un point virgule après ton tout premier background-color. L'avoir ajouté à fait fonctionner certaines couleurs.

Sinon, pour le "a étudié à", là il s'agit plutôt d'un abus de l'utilisation du float de ta part. Il faut éviter d'en abuser, et au final tu t'es compliqué la vie. Je te propose une version plus simple de ce bloc et avec moins de float :

Pour le HTML ça donne :

Code:

<div class="infointro">
            <img src="https://zupimages.net/up/20/06/cd5z.png"/>
            <!-- le métier -->
            Ingénieur Robotique
        </div>
        <div class="infointro">
            <img src="https://zupimages.net/up/20/06/5fcz.png"/>
            <!-- le lieu d'habitation -->
            District 2
        </div>
        <div class="infointro">
            <img src="https://zupimages.net/up/20/06/i96z.png"/>
            <span>A étudié à:</span>
            <!-- l'école où le personnage a étudié -->
            E.I.R du District 1
        </div>
        <div class="infointro">
            <img src="https://zupimages.net/up/20/06/gu3q.png"/>
            <!-- Situation -->
            Célibataire
        </div>

Plus de div qui font des retours à la ligne embêtant. On va mettre le style du texte directement sur les .infointro, on ajoutera un padding sur l'image pour faire l'espacement. Et quand tu veux une autre couleur comme pour l'éducation on utilise plutôt un span qui permet ce genre de choses justement.

Maintenant le CSS :

Code:

.infointro {
        padding-left: 7px;
        padding-bottom: 8px;
        color: #191919;
    }

    .infointro span {
        font-size: 12px;
        color: #a5a5a5;
        padding-right: 6px;
    }

    .infointro img {
        margin-right: 6px;
    }

Tous tes infointro avaient le même style au final, mais tu t'embêtais à cible le texte. Là on dit par défaut le style du texte dans infointro, ensuite on lui dit que s'il y a un span dedans (comme la mention pour l'école), on lui donne une autre couleur, une autre taille, etc. Enfin pour les images, on ajoute le petit écart que tu souhaitais.

Bref, j'ai joué sur les sélecteurs et la différence entre div et span pour corriger ce petit problème. J'ai essayé d'être claire dans mes explications, mais n'hésites pas à le faire savoir si tu as des difficultés à comprendre certaines choses.

Voilà, je te laisse regarder et corriger. N'hésites pas à poser des questions si tu en as.

Je m'excuse aussi d'avoir répondu aussi tardivement, j'essayerai de te répondre plus rapidement pour tes prochaines corrections sur ce sujet (je ferais les autres une fois celui-ci terminé, j'ai vu que tu avais de la demande sur d'autres forums de LS )

Bonjour !

Waaaaah ! Merci d'avoir prit le temps de corriger j'avoue que je ne comprenais pas vraiment l'utilisation des span ! J'ai vu certains mettre des p (entre <>) également ! Je vais me pencher dessus :)

Étant en déménagement, je le ferai quand je serais sortie des cartons et quand j'aurai le temps aussi, mais je ferai au plus vite

Merci encore !

Pas de problème ! Pour t'aider à comprendre les différentes balises HTML je te conseille d'aller faire un tour du côté du cursus codage (1ère étape) (en plus lire le cursus rapporte de l'XP !) ou tu peux regarder ou tu peux faire un tour du côté du site HTML5 Doctor (en anglais) qui explique l'utilité et comment utiliser chacune des balises valides du HTML5

Puisque tu es en déménagement je mets ce sujet en pause le temps que tu puisse revenir. Comme ça on évitera de te relancer et d'archiver ton sujet.

Bon courage pour ton déménagement !

Coucou !

Merci pour les informations =D
Je suis en déménagement et j'accouche dans moins de 10 jours, donc oui une pause s'impose pour ce LS vu tout ce que je dois préparer!

Merci !

Je suis en déménagement et j'accouche dans moins de 10 jours

Whow ! Bon courage pour tout alors (tu nous tiendras au courant^^)

Effectivement bon courage à toi
Ce sujet aura bien le temps d'attendre ton retour

J'ai repris ce que tu avais dis, mais alors j'ai un soucis... je sais pas pourquoi, dans un premier temps, le span ne fonctionne pas du tout et dans un second temps, j'ai tout le texte qui va sous l'image. Et je me souviens pourquoi j'avais ciblé le texte, justement pour ce soucie de décalage dont je n'ai pas trouvé de solution... du coup j'avais mis des float:left partout pour réglé le truc (ouais je suis une débutante ouais ) BREF, du coup, je suis dans la penade, et j'ai beau essayer sur d'autre forum, ca ne fonctionne pas non plus... Donc je me suis dis que ça venait du code et non des options de mon forum! Sauf que j'ai beau vérifier, je vois pas ce qui cloche... Donc j'ai fais plusieurs choses:
1 - Déjà j'ai regardé si c'était pas le Span qui me faisait le décalage en ne fonctionnant pas: visiblement non, avec ou sans span, j'ai le décalage
2 - J'ai regardé avec DevTolls si mon code était bien pris en charge: oui tout est ok, sauf le span qui ne semble pas exister
3 - J'ai réduit le font-size pour voir si c'était pas trop grand, ce qui pourrait expliquer le décalage: non ça ne change rien non plus...
4 - J'ai regardé tous les espaces dans le style pour voir si c'était pas ça qui pouvait bugger... mais visiblement non

Du coup...

Voici le code corrigé:

Code:

 <style> .prayablock {margin:auto; width:700px; height:auto; background-color: #a5a5a5} .profilpraya { float: left; margin-top: -100px; position: relative; margin-left: 31px; border-radius: 50%; border: 3px solid #ffffff; } .barreblanche { background-color: #ffffff; height: 50px; margin-bottom: -21px; } .barrenav_praya { float: right; height: 30px; margin-top: 12px; padding-right: 33px; } .info_praya { background-color: #ffffff; float: left; height: auto; width: 200px; } .publi_praya {background-color:#ffffff; float: left; height:auto; width:478px; } .Idpraya { position: absolute; color: #ffffff; margin-left: 190px; margin-top: -27px; font-size: 20px; font-family: arial; } .Idpost { color: #a4cecc; font-size: 15px; font-family: arial; font-weight: bold; margin-top: 15px; margin-left: 63px; } .date_praya { color: #a5a5a5; margin-left: 62px; font-size: 12px; } .contenant_praya {color: #a5a5a5; font-size: 12px; font-family: arial; margin-top: -30px; float: right; display: flex; } .praya_tiret {padding-left:10px; padding-right:10px; color:#a4cecc;} .citapraya{background-color:transparent; width:200px; margin:auto; text-align:center;} .textcitapraya{color:#191919; font-size:12px; font-family:arial; padding:7px;} .separapraya{margin-left:50px;} .infointro{padding-left:7px;padding-bottom:8px;color:#191919;}     .infointro span{font-size:12px; color:#a5a5a5; padding-right:6px;} .infointro img{margin-right:6px;} .textinfo{padding-bottom:8px; padding-left:6px; float:right; color:#191919;}.etudeinfo{font-size:12px; color:#a5a5a5;float:left; padding-left:6px;} .imgecole{float:left;} .imgpost{border-radius:50%; float:left; padding-right:10px; padding-left:6px; padding-top:5px; width:40px; height:40px;} .fontpublipraya{ background-color:transparent; margin:auto; text-align:center;}.publipraya{color:#191919; font-size:12px; font-family:arial; padding:9px;} .fontjaime{background-color:transparent; float:left; width:200px;} .likepraya{color:#a5a5a5; font-size:14px; font-family:arial; float:left;    padding-left:5px; padding-top:2px;} .imglikepraya{margin-left:7px; margin-bottom:7px; margin-right:5px; float:left;} .nbrcom{color:#a5a5a5; font-size:14px; font-family:arial; float:right; padding-top: 2px; padding-right:7px;} .comentbarre{margin-bottom: 10px;} .fontinfopubli{background-color:transparent; width:700px; height:auto;} .copyright_oceen{background-color:transparent; margin:auto; text-align:center; color:#BDBDBD; font-size:10px; padding:5px;} .blocpublicationP{float:right; background-color:transparent; margin-top:-36px;} .intropad{padding:5px;}
</style>

<!-- le haut de page --><div class="prayablock"><img src="https://zupimages.net/up/20/06/p4qr.png"/>
<!-- l'url de l'image de couverture --><img src="https://zupimages.net/up/20/06/yljn.jpg" alt="image de couverture" /><!-- le nom et prenom --><div class="Idpraya">Lëan Vandorallen</div>
<!-- l'image de profil --><img src="https://zupimages.net/up/20/06/t80b.jpg" alt="image de profil" class="profilpraya"/><div class="barreblanche"><div class="barrenav_praya">

<!-- les liens --><div class="contenant_praya"><a href="URL ICI">Amis</a><div class="praya_tiret">|</div><a href="URL ICI">Photos</a><div class="praya_tiret"> |</div><a href="URL ICI">Plus ▼</a></div></div></div>

<!-- la colonne introduction --><div class = "info_praya"><img src="https://zupimages.net/up/20/06/o8cy.png" alt="symbole intro" class="intropad"/><div class="citapraya"><!-- le texte d'introduction --><div class="textcitapraya">"Si vous voulez dépasser les limites dans lesquelles la société vous cantonne, il faut vous battre."</div></div>
<div class="separapraya"><img src = "https://zupimages.net/up/20/06/43gq.png"/></div>
<div class="infointro"><img src="https://zupimages.net/up/20/06/cd5z.png"/>
<!-- le métier --> Ingénieur Robotique </div><div class="infointro"><img src="https://zupimages.net/up/20/06/5fcz.png"/>
<!-- le lieu d'habitation --> District 2 </div><div class="infointro"> <img src="https://zupimages.net/up/20/06/i96z.png"/><span>A étudié à:</span><!-- l'école où le personnage a étudié --> E.I.R du District 1</div> <div class="infointro"><img src="https://zupimages.net/up/20/06/gu3q.png"/>
<!-- Situation -->Célibataire </div></div>

<!-- profil et pseudo publication --><div class="blocpublicationP"><div class="publi_praya"><!-- url image de profil --><img src="https://zupimages.net/up/20/10/b7ak.jpg" alt="image de profil" class="imgpost"/><!-- nom prénom --><div class="Idpost">Tom Waller</div><!-- date publication --><div class="date_praya">2 Juin, 23:12</div>

<!--publication--><div class="fontpublipraya"><div class="publipraya"> C'est thème Cyborg à la Fleurette ! Ton cocktail t'attends :coktail:</div></div>

<!-- bas de la publication --><img src="https://zupimages.net/up/20/06/bm14.png" alt="barre séparation"/>
<div class="fontjaime"><img src = "https://zupimages.net/up/20/06/smvg.png" alt="like" class="imglikepraya"/><!-- nombre de likes --><div class="likepraya">32</div></div><!-- nombre de commentaires --><div class="nbrcom">10 commentaires</div>
<img src="https://zupimages.net/up/20/06/bm14.png" alt="barre séparation"/>
<img src="https://zupimages.net/up/20/06/9fy3.png" alt="barre commenter" class="comentbarre"/></div>
</div>

<div class="copyright_oceen">@Nasträlya</div></div>

Il vient de se passer un truc trop bizarre, j'ai vu le span... genre il a fonctionné, et quand j'ai réactualisé la page sans rien touché, il fonctionnait plus C'est n'importe quoi

Hello !

Je ne suis pas sûre de quoi tu parles qui fait un décalage... Le "A étudié à" ? Qu'est-ce qu'il fait comme décalage ?

aaaaah.... mais en fait, l'écriture doit être en face de l'image =)

J'ai zoomé dessus:

Je suis désolée, c'est compliqué puisqu'on ne voit pas la même chose.. Mais du coup, sans float, je ne parviens pas à mettre l'écriture en face et bizarrement, je ne vois pas le span (là je t'ai pris le code non corrigé de mon forum, donc sans le span. Quand je poste le corrigé, je ne le vois pas et ça met juste le bloc normal d'introinfo)

EDIT: je me dis, peut être que tu devrais prendre un screen de ce que tu vois.. parce que comme le code corrigé ne fonctionne pas pour moi mais pour toi oui... en fait, je sais pas, mais j'ai l'impression qu'avec les même code, on voit pas la même choses... mais que si ça se trouve, avec nos ordi respectif, on voit la même chose... je sais pas si je me fais comprendre...

voici ce que je vois sur ton fofo test::

Je vois la même chose que sur ton screen. Tu peux utiliser un display: flex sur ton .infointro pour faire ce genre de chose. Sinon tu peux remettre ton span autour du texte mais tu peux utiliser un display: inline-block; plutôt qu'un float.

Olala... mais je suis trop nulle, tu vas me taper sur les doigts, c'était une erreur hyper naze, que je te dirais même pas

Code:

 <style> .prayablock {margin:auto; width:700px; height:auto; background-color: #a5a5a5} .profilpraya { float: left; margin-top: -100px; position: relative; margin-left: 31px; border-radius: 50%; border: 3px solid #ffffff; } .barreblanche { background-color: #ffffff; height: 50px; margin-bottom: -21px; } .barrenav_praya { float: right; height: 30px; margin-top: 12px; padding-right: 33px; } .info_praya { background-color: #ffffff; float: left; height: auto; width: 200px; } .publi_praya {background-color:#ffffff; float: left; height:auto; width:478px; } .Idpraya { position: absolute; color: #ffffff; margin-left: 190px; margin-top: -27px; font-size: 20px; font-family: arial; } .Idpost { color: #a4cecc; font-size: 15px; font-family: arial; font-weight: bold; margin-top: 15px; margin-left: 63px; } .date_praya { color: #a5a5a5; margin-left: 62px; font-size: 12px; } .contenant_praya {color: #a5a5a5; font-size: 12px; font-family: arial; margin-top: -30px; float: right; display: flex; } .praya_tiret {padding-left:10px; padding-right:10px; color:#a4cecc;} .citapraya{background-color:transparent; width:200px; margin:auto; text-align:center;} .textcitapraya{color:#191919; font-size:12px; font-family:arial; padding:7px;} .separapraya{margin-left:50px;} .infointro{padding-left:7px;padding-bottom:8px;color:#191919;}    .infointro span{font-size:12px; color:#a5a5a5; padding-right:6px;} .infointro img{margin-right:6px;} .textinfo{padding-bottom:8px; padding-left:6px; float:right; color:#191919;}.etudeinfo{font-size:12px; color:#a5a5a5;float:left; padding-left:6px;} .imgecole{float:left;} .imgpost{border-radius:50%; float:left; padding-right:10px; padding-left:6px; padding-top:5px; width:40px; height:40px;} .fontpublipraya{ background-color:transparent; margin:auto; text-align:center;}.publipraya{color:#191919; font-size:12px; font-family:arial; padding:9px;} .fontjaime{background-color:transparent; float:left; width:200px;} .likepraya{color:#a5a5a5; font-size:14px; font-family:arial; float:left;    padding-left:5px; padding-top:2px;} .imglikepraya{margin-left:7px; margin-bottom:7px; margin-right:5px; float:left;} .nbrcom{color:#a5a5a5; font-size:14px; font-family:arial; float:right; padding-top: 2px; padding-right:7px;} .comentbarre{margin-bottom: 10px;} .fontinfopubli{background-color:transparent; width:700px; height:auto;} .copyright_oceen{background-color:transparent; margin:auto; text-align:center; color:#BDBDBD; font-size:10px; padding:5px;} .blocpublicationP{float:right; background-color:transparent; margin-top:-36px;} .intropad{padding:5px;}
</style>

<!-- le haut de page --><div class="prayablock"><img src="https://zupimages.net/up/20/06/p4qr.png"/>
<!-- l'url de l'image de couverture --><img src="https://zupimages.net/up/20/06/yljn.jpg" alt="image de couverture" /><!-- le nom et prenom --><div class="Idpraya">Lëan Vandorallen</div>
<!-- l'image de profil --><img src="https://zupimages.net/up/20/06/t80b.jpg" alt="image de profil" class="profilpraya"/><div class="barreblanche"><div class="barrenav_praya">

<!-- les liens --><div class="contenant_praya"><a href="URL ICI">Amis</a><div class="praya_tiret">|</div><a href="URL ICI">Photos</a><div class="praya_tiret"> |</div><a href="URL ICI">Plus ▼</a></div></div></div>

<!-- la colonne introduction --><div class = "info_praya"><img src="https://zupimages.net/up/20/06/o8cy.png" alt="symbole intro" class="intropad"/><div class="citapraya"><!-- le texte d'introduction --><div class="textcitapraya">"Si vous voulez dépasser les limites dans lesquelles la société vous cantonne, il faut vous battre."</div></div>
<div class="separapraya"><img src = "https://zupimages.net/up/20/06/43gq.png"/></div>
<div class="infointro"><img src="https://zupimages.net/up/20/06/cd5z.png"/><!-- le métier --> Ingénieur Robotique </div><div class="infointro"><img src="https://zupimages.net/up/20/06/5fcz.png"/><!-- le lieu d'habitation --> District 2 </div><div class="infointro"> <img src="https://zupimages.net/up/20/06/i96z.png"/><span>A étudié à:</span><!-- l'école où le personnage a étudié --> E.I.R du District 1</div> <div class="infointro"><img src="https://zupimages.net/up/20/06/gu3q.png"/><!-- Situation -->Célibataire </div></div>

<!-- profil et pseudo publication --><div class="blocpublicationP"><div class="publi_praya"><!-- url image de profil --><img src="https://zupimages.net/up/20/10/b7ak.jpg" alt="image de profil" class="imgpost"/><!-- nom prénom --><div class="Idpost">Tom Waller</div><!-- date publication --><div class="date_praya">2 Juin, 23:12</div>

<!--publication--><div class="fontpublipraya"><div class="publipraya"> C'est thème Cyborg à la Fleurette ! Ton cocktail t'attends :coktail:</div></div>

<!-- bas de la publication --><img src="https://zupimages.net/up/20/06/bm14.png" alt="barre séparation"/>
<div class="fontjaime"><img src = "https://zupimages.net/up/20/06/smvg.png" alt="like" class="imglikepraya"/><!-- nombre de likes --><div class="likepraya">32</div></div><!-- nombre de commentaires --><div class="nbrcom">10 commentaires</div>
<img src="https://zupimages.net/up/20/06/bm14.png" alt="barre séparation"/>
<img src="https://zupimages.net/up/20/06/9fy3.png" alt="barre commenter" class="comentbarre"/></div>
</div>

<div class="copyright_oceen">@Nasträlya</div></div>

Tout est bon avec ce code, je le met en haut ! =D Je vais pouvoir proposer les autres et ne t'inquiète pas, je les avais tous rendu propre (lui étant mon deuxième toute seule, il était vraiment pas propre En tout cas, je suis désolée, j'ai dû bien agacer la codeuse qui est en toi )

Tout est bon de mon côté, je valide et déplace !