AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
(CDAV) 50 à 150€ à cagnotter sur les Aspirateurs laveurs Tineco
Voir le deal

    Réseau social type FB (Profil)

    Nasträlya
    Nasträlya
    FémininAge : 29Messages : 245

    Mer 8 Avr 2020 - 10:57






    Réseau social type FB



    Bonjour :friends:


    Je vous propose une page de profil de type réseau social afin d'un peu plus pousser la personnalisation de votre personnage ! Elle a été testé sous chrome, donc elle fonctionne très bien avec celui-ci.

    Voici à quoi elle ressemble:

    Rendu:

    Il suffit simplement de mettre ce code dans votre post:

    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>

    L'image de couverture fait 700*300, tandis que les images de profils peuvent être mises en 136*136 :omg:

    Si vous voulez changer la couleurs (le bleu très clair), il vous faudra changer tous les petits logos ainsi que la barre du haut. La barre du haut est donc aussi une image: c'était pour éviter du code inutile à mes membres, puisque je considère déjà que c'est un code assez long!   :han:


    Le crédit est tout petit et d'une couleur sobre qui se fond avec le codage, c'est mon petit bébé vu que je débute en code, alors laissez le s'il vous plaît :lovebomb:





    Dernière édition par Nasträlya le Sam 27 Juin 2020 - 18:54, édité 8 fois



    :friends:
    Réseau social type FB (Profil) 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mer 8 Avr 2020 - 11:07

    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 :aww: ?

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



    sign
    Nasträlya
    Nasträlya
    FémininAge : 29Messages : 245

    Mer 8 Avr 2020 - 11:24

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

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

    Merci sinon :hug: Et oui, il y a après la fiche amis et photos! cheers (faut que je les rende propre en fait, c'est pour ça qu'elles sont pas encore là :ange:)
    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 :innocent:



    :friends:
    Réseau social type FB (Profil) 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    Syx
    Syx
    MasculinAge : 26Messages : 211

    Mer 8 Avr 2020 - 13:42

    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é Shocked

    Merci pour ce beau LS !




    ~
    Nasträlya
    Nasträlya
    FémininAge : 29Messages : 245

    Mer 8 Avr 2020 - 14:03

    Coucou ! Razz

    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à :love: Bien que je suis certaines qu'on trouvera des soucis à long terme :han:

    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! cheers



    :friends:
    Réseau social type FB (Profil) 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    Syx
    Syx
    MasculinAge : 26Messages : 211

    Ven 10 Avr 2020 - 16:26

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




    ~
    Shaneliae
    Shaneliae
    FémininAge : 28Messages : 313

    Ven 10 Avr 2020 - 18:06

    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 😉 ...



    Nasträlya
    Nasträlya
    FémininAge : 29Messages : 245

    Ven 10 Avr 2020 - 18:42

    Coucou @Shaneliae ! cheers

    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 scratch ) Je vais vérifier tout ça! ♫

    @Anon, merci :gene:

    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 scratch 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 scratch 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 :ange: fin toi si je réduis à 13, ça passe en tout cas Razz ) 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 :ouin:

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

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



    :friends:
    Réseau social type FB (Profil) 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    Shaneliae
    Shaneliae
    FémininAge : 28Messages : 313

    Lun 27 Avr 2020 - 17:59

    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 ! :bwaha: :patpat: 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. rambo

    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 😉 )



    Nasträlya
    Nasträlya
    FémininAge : 29Messages : 245

    Mar 28 Avr 2020 - 23:46

    Bonjour ! Very Happy

    Waaaaah ! Merci d'avoir prit le temps de corriger :hug2: 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 cheers

    Merci encore ! Very Happy



    :friends:
    Réseau social type FB (Profil) 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    Shaneliae
    Shaneliae
    FémininAge : 28Messages : 313

    Ven 8 Mai 2020 - 19:03

    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 !



    Nasträlya
    Nasträlya
    FémininAge : 29Messages : 245

    Jeu 14 Mai 2020 - 12:27

    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! :hudada:

    Merci !



    :friends:
    Réseau social type FB (Profil) 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 14 Mai 2020 - 14:25

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

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



    sign
    Shaneliae
    Shaneliae
    FémininAge : 28Messages : 313

    Jeu 14 Mai 2020 - 17:42

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



    Nasträlya
    Nasträlya
    FémininAge : 29Messages : 245

    Mer 24 Juin 2020 - 14:30

    Bonjour ! :yay:

    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 Suspect 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 :siffle: ) 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... :titanic:

    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 affraid C'est n'importe quoi :panic:



    :friends:
    Réseau social type FB (Profil) 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    Shaneliae
    Shaneliae
    FémininAge : 28Messages : 313

    Mer 24 Juin 2020 - 15:14

    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 ?




    Nasträlya
    Nasträlya
    FémininAge : 29Messages : 245

    Mer 24 Juin 2020 - 16:56

    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.. :ange: Mais du coup, sans float, je ne parviens pas à mettre l'écriture en face Crying or Very sad 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) :sad:

    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::



    :friends:
    Réseau social type FB (Profil) 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    Shaneliae
    Shaneliae
    FémininAge : 28Messages : 313

    Mer 24 Juin 2020 - 23:53

    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.



    Nasträlya
    Nasträlya
    FémininAge : 29Messages : 245

    Ven 26 Juin 2020 - 11:09

    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 :silence:

    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 :ange: En tout cas, je suis désolée, j'ai dû bien agacer la codeuse qui est en toi :patpat: )



    :friends:
    Réseau social type FB (Profil) 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    Shaneliae
    Shaneliae
    FémininAge : 28Messages : 313

    Ven 26 Juin 2020 - 16:28

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



    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 17:10