"Fiche" qui ne s'affiche pas |
|
"Fiche" qui ne s'affiche pas posté le : Lun 19 Sep - 21:52 | Bonjour à tous ! J'ai un petit soucis : j'ai plus ou moins reussi à créer une trop zolie fiche en html/css, mais elle ne s'affiche pas sur les forums quand on la poste. Pourtant en l'ouvrant sur un navigateur il n'y a pas de problème. Voilà le code (Je suis sûre qu'il n'est pas du tout optimisé, et qu'il doit y avoir des fautes ou une meilleure façon de le "construire", mais peut importe xD) - Code:
-
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" />
<title></title> <style type="text/css"> #numero1 { background-color: #B6FEF5; position:absolute; height: 450px; width: 450px; -moz-border-radius: 35px; border-radius: 230px; z-index:1; line-height: 100px; text-align: center; overflow: auto; } #numero4 { background-color: #B6FEF5; position:absolute; height: 50px; width: 50px; -moz-border-radius: 35px; border-radius: 230px; line-height: 500px; z-index:6; top: 400px; left:10px; } #numero5 { background-color: #B6FEF5; position:absolute; height: 50px; width: 50px; -moz-border-radius: 35px; border-radius: 230px; line-height: 500px; z-index:5; top: 460px; left: 100px; }
#numero6 { background-color: #B6FEF5; position:absolute; height: 50px; width: 50px; -moz-border-radius: 35px; border-radius: 180px; top: 20px; left: 10px; z-index:4; top: 480px; left: 220px; }
#numero7 { background-color: #B6FEF5; position:absolute; height: 50px; width: 50px; -moz-border-radius: 35px; border-radius: 230px; line-height: 500px; z-index:7; top: 450px; left: 340px; } #numero8 { background-color: #B6FEF5; position:absolute; height: 50px; width: 50px; -moz-border-radius: 35px; border-radius: 230px; line-height: 500px; z-index:7; top: 375px; left: 435px; } #numero9 { background-color: #B6FEF5; position:absolute; height: 50px; width: 50px; -moz-border-radius: 35px; border-radius: 230px; line-height: 500px; z-index:7; top: 277px; left: 481px; } #numero10 { background-color: #B6FEF5; position:absolute; height: 50px; width: 50px; -moz-border-radius: 35px; border-radius: 230px; line-height: 500px; z-index:7; top: 167px; left: 483px; } #numero11 { background-color: #B6FEF5; position:absolute; height: 50px; width: 50px; -moz-border-radius: 35px; border-radius: 230px; line-height: 500px; z-index:7; top: 65px; left: 450px; } #numero12 { background-color: #B6FEF5; position:absolute; height: 50px; width: 50px; -moz-border-radius: 35px; border-radius: 230px; line-height: 500px; z-index:1; top: -15px; left: 370px; }
#numero2 { position:absolute; top:23px; left:120px; width: 300px; height: 200px; border-radius: 150px / 100px; transform: rotate(-7deg); background-color: #CBB6FE; z-index:2; text-align: center; }
#numero3 { position:absolute; top:25px; left:23px; height: 130px; width: 130px; -moz-border-radius: 35px; border-radius: 230px; background-color: #95FE95; z-index:3; text-align: center; }
#texte{ position: absolute; z-index:25; overflow: auto; margin-top: 215px; margin-left: 55px; }
</style> </head>
<body>
<div id="numero1"></div> <div id="texte"><p style="color: black; height: 120px; width: 350px;"> Coucou j'écris du texte, beaucoup de texte. Et encore, afin de voir jusqu'où il va, et si j'ai reussi mon code ! Ça c'est l'instant chiant, mais c'est pour le bien du code. Je suis sûre qu'il est pleins de fautes, et qu'il est mal écrit. Mais il fonctionne pour le moment, et le rendu est trop beau ! Je vais le mettre en LS, comme ça vous pourrez tous l'utiliser si vous le souhaitez ! Je me demande à combien de lignes je suis... Zut c'est pas assez pour faire apparaitre la scrollbarre, qui, en passant, n'est pas très jolie mais va quand même bien avec le design général de la fiche !<br> Ça y est les enfant j'ai suffisament écrit ! Je vous laisse donc, bonne journée :D</p></div> <div id="numero2"><p style="color: black; height: 50px; width: 200px; margin-top: 35px; margin-left: 45px;transform: rotate(-3deg);">J'aime grapher et coder même si je n'ai pas encore un niveau de pro =D><br> J'aime aussi manger des pommes et chasser les bisounours !</div>
<div id="numero3"><p style="color: black; height: 50px; width:80px; margin-top: 35px; margin-left: 25px;">Bonjour je suis un membre !</div>
<div id="numero4"></div> <div id="numero5"></div> <div id="numero6"></div> <div id="numero7"></div> <div id="numero8"></div> <div id="numero9"></div> <div id="numero10"></div> <div id="numero11"></div> <div id="numero12"></div> <div id="numero13"></div>
</body> </html>] Et voilà ce que c'est censé donner : Merci à ceux qui se pencheront (sans tomber hein...) sur le problème |
| Nin'gyou Korosu Codeur UltrActif |
|
Re: "Fiche" qui ne s'affiche pas posté le : Lun 19 Sep - 23:24 | Hey ! Perso j'ai eu le même problème enfaite c'est tout bête : As tu activer le HTML dans ton profil ? Dans ton message et dans ton Panneau d'administration ? |
| Praecursator Animateur |
|
Re: "Fiche" qui ne s'affiche pas posté le : Mar 20 Sep - 6:11 | Je l'ai essayé ici donc oui tout est activé, et avec l'autre fiche que je traite dans les commandes je n'ai pas de soucis, elle s'affiche dans les messages J'ai du faire une grosse erreur dans mon code Merci quand même de ta réponse ! |
| Nin'gyou Korosu Codeur UltrActif |
|
Re: "Fiche" qui ne s'affiche pas posté le : Mar 20 Sep - 12:16 | Je pense avoir un peu réussi à modifier la fiche pour que ça s'affiche. Bien qu'il reste des zones que je n'ai pas compris '^' Et si on optimisait le code dans un futur proche ? J'aime décortiquer le code des autres codeurs je trouve ça cool ! J'aime aussi manger des pommes et observer la pluie ! * Souffle sur sa veste pour faire virevolter de longue trainée de particules poussiéreuses *Salut ! J'ai une petite question, quand tu poste ta fiche sur ton forum tu l'as poste telle quelle ? Sans modification du genre enlever les retours à la ligne et en gardant le doctype et tout ? Dans tous les cas j'ai un peu bidouiller le code et j'en suis arrivé à ça. Cela te convient-il ? Si c'est le cas je te ferais un topo sur ce que j'ai modifier (bien que je ne me souvienne pas de tout T^T j'aurais du noter) Et si ça te branche, ça te dirais qu'on 'optimise/factorise' ton code ultérieurement. Ça te permettra de mettre ton code à jours efficacement tout en le simplifiant - Spoiler:
- Code:
-
<style type=text/css>#wrap{position: relative;margin:0 auto;height:450px;width:600px;padding:10px}#numero1{top:0;left:0;background-color:#b6fef5;position:absolute;height:450px;width:450px;-moz-border-radius:35px;border-radius:230px;z-index:1;line-height:100px;text-align:center;overflow:auto}#numero4{background-color:#b6fef5;position:absolute;height:50px;width:50px;-moz-border-radius:35px;border-radius:230px;line-height:500px;z-index:6;top:400px;left:10px}#numero5{background-color:#b6fef5;position:absolute;height:50px;width:50px;-moz-border-radius:35px;border-radius:230px;line-height:500px;z-index:5;top:460px;left:100px}#numero6{background-color:#b6fef5;position:absolute;height:50px;width:50px;-moz-border-radius:35px;border-radius:180px;top:20px;left:10px;z-index:4;top:480px;left:220px}#numero7{background-color:#b6fef5;position:absolute;height:50px;width:50px;-moz-border-radius:35px;border-radius:230px;line-height:500px;z-index:7;top:450px;left:340px}#numero8{background-color:#b6fef5;position:absolute;height:50px;width:50px;-moz-border-radius:35px;border-radius:230px;line-height:500px;z-index:7;top:375px;left:435px}#numero9{background-color:#b6fef5;position:absolute;height:50px;width:50px;-moz-border-radius:35px;border-radius:230px;line-height:500px;z-index:7;top:277px;left:481px}#numero10{background-color:#b6fef5;position:absolute;height:50px;width:50px;-moz-border-radius:35px;border-radius:230px;line-height:500px;z-index:7;top:167px;left:483px}#numero11{background-color:#b6fef5;position:absolute;height:50px;width:50px;-moz-border-radius:35px;border-radius:230px;line-height:500px;z-index:7;top:65px;left:450px}#numero12{background-color:#b6fef5;position:absolute;height:50px;width:50px;-moz-border-radius:35px;border-radius:230px;line-height:500px;z-index:1;top:-15px;left:370px}#numero2{position:absolute;top:23px;left:120px;width:300px;height:200px;border-radius:150px / 100px;transform:rotate(-7deg);background-color:#cbb6fe;z-index:2;text-align:center}#numero3{position:absolute;top:25px;left:23px;height:130px;width:130px;-moz-border-radius:35px;border-radius:230px;background-color:#95fe95;z-index:3;text-align:center}#texte{width:370px;position:relative;z-index:25;overflow:auto;margin-top:205px;margin-left:45px}</style></head><body> <div id="wrap"><div id="numero1"></div><div id="texte"><p style="color: black; height: 120px; width: 350px;"> Je pense avoir un peu réussi à modifier la fiche pour que ça s'affiche. Bien qu'il reste des zones que je n'ai pas compris '^'<br> Et si on optimisait le code dans un futur proche ?</p></div><div id="numero2"><p style="color: black; height: 50px; width: 200px; margin-top: 35px; margin-left: 45px;transform: rotate(-3deg);">J'aime décortiquer le code des autres codeurs je trouve ça cool !<br> J'aime aussi manger des pommes et observer la pluie !</div><div id="numero3"><p style="color: black; height: 50px; width:80px; margin-top: 35px; margin-left: 25px;">Bonjour je suis un [ ] !</div><div id="numero4"></div><div id="numero5"></div><div id="numero6"></div><div id="numero7"></div><div id="numero8"></div><div id="numero9"></div><div id="numero10"></div><div id="numero11"></div><div id="numero12"></div><div id="numero13"></div></div>
|
| Hisakki Codeur UltrActif |
|
Re: "Fiche" qui ne s'affiche pas posté le : Mar 20 Sep - 16:13 | Oh mon dieu comment as-tu fais ? (Je suis pas sur pc, j'ai la flemme de comprendre x) ) Le résultat est super ! Tu as même enlevé le scroll ! Pour le poster j'ai essayé avec et sans le "squelette" (le blabla de début, le head, body...) Mais ça ne voulait pas. J'ai laissé les espaces entre les lignes de code. C'est ça qui faisait bugguer ? - Citation :
- Et si ça te branche, ça te dirais qu'on 'optimise/factorise' ton code ultérieurement. Ça te permettra de mettre ton code à jours efficacement tout en le simplifiant
Avec plaisir, et après on le vend ! Et on devient riches ! (Toi peut-être pas vu que je te laisserai que 10%, mais c'est un détail ) EDIT: l'ovale n'est plus incliné, je reduirais ton salaire à 5% ! |
| Nin'gyou Korosu Codeur UltrActif |
|
Re: "Fiche" qui ne s'affiche pas posté le : Mar 20 Sep - 16:35 | é^è Bah enfaite tu vois j'ai fait appel au pouvoir du cosmocode. C'était la galère d'ailleurs parce que ça m'a pris un certain temps pour rassembler tous les matériaux et faire l'incantation :/ 'w' Pour le scroll ça ne me dis rien par contre, mais si tu le dis ~ Et pour ce qui est de mon experience, les retours à la ligne font buguer le code (sur FA) donc ouaip faut les enlever Pour ce qui est du blabla + head, je conseille de l'enlever. Il n'y en a pas besoin et ça fait doublon Donc oui c'était en grande partie à cause de ça si ça ne marchait pas. D: Attend attend attend la ! 5% de combien exactement ? Et puis ici mon ovale est incliné '^' non mais ! (tu parle bien du violet hein '-') |
| Hisakki Codeur UltrActif |
|
Re: "Fiche" qui ne s'affiche pas posté le : Mar 20 Sep - 16:44 | Pour le scroll c'est juste que tu as moins écrit en fait xD C'est bon à savoir, merci pour les info ! 5% du dixième de ce que ça rapportera de lettre en vente la fiche ! Et non ton ovale n'est plus incliné comme le mien u.u !
|
| Nin'gyou Korosu Codeur UltrActif |
|
Re: "Fiche" qui ne s'affiche pas posté le : Mar 20 Sep - 18:24 | Ah oui je me disais aussi T^T mais mais mais ... moi il est tout pareil. Screen je veux la preuve de tes dires °^° (histoire que je sache ce qui peut poser problème, surtout que j'ai pas du tout touché à l'inclinaison :/) |
| Hisakki Codeur UltrActif |
|
Re: "Fiche" qui ne s'affiche pas posté le : Mar 20 Sep - 18:27 | Coucou Hisakki tu gères cette demande d'aide du coup ? |
| Eluknow Administrateur |
|
Re: "Fiche" qui ne s'affiche pas posté le : Mar 20 Sep - 19:07 | Yop l'admin ! Baaah '^' ouaip si Nin'gyou Korosu veut bien ~ eheh |
| Hisakki Codeur UltrActif |
|
Re: "Fiche" qui ne s'affiche pas posté le : Mar 20 Sep - 19:40 | Ah ouais tu veux des preuves ? AH OUAIS ?! Bah tiiieeeennnnnnss ! Ma version Ta version Alors ? Alors ? Alors ? Tu dis plus rien hein ! (Y'a pas de soucis pour que tu t'occupe de mon cas ) |
| Nin'gyou Korosu Codeur UltrActif |
|
Re: "Fiche" qui ne s'affiche pas posté le : Mar 20 Sep - 20:01 | En effet :/ ... ! Mais ! Ahah ! Le screen que tu as pris de ta version incliner viens de ton PC ? Le problème viens peut etre du fait que tu regarde ma version avec ton smartphone ! Quel navigateur ? Les propriété CSS3 ne sont peut etre pas prises en compte sur ton phone.
Test sur ton PC et redis moi ça '^' (ouais je me trouve toujours des excuses huhuhu)
(éwè je vais m'occuper de ton cas tu vas voir ~) |
| Hisakki Codeur UltrActif |
|
Re: "Fiche" qui ne s'affiche pas posté le : Mar 20 Sep - 20:26 | Zut, t'as raison xD Sur mon pc c'est incliné ^^. Bon bah finalemennt problème réglé ! Maintenant j'aimerais des explications sur : C'est quoi "Wrap" ? Et aussi savoir ce qu'il resterait à améliorer selon toi ^^ ? (Sauf les couleurs x) ) (Au passage il est trop beau ton vava ! Il vient de quel manga ?) |
| Nin'gyou Korosu Codeur UltrActif |
|
Re: "Fiche" qui ne s'affiche pas posté le : Mar 20 Sep - 22:37 | Mouwahahah j'ai toujours réponse à tout *^* Okay, ça te dérange si je t'explique tout ça par MP ? Je vais commencer à décortiquer le code pour essayer de tout bien expliquer '^' (Mwah '^' ! Merci ! Il vient de Darker Than Black A lire et a voir absolument ! l'anime et le manga sont bien différents) |
| Hisakki Codeur UltrActif |
|
Re: "Fiche" qui ne s'affiche pas posté le : Mer 21 Sep - 21:18 | Voilà donc les conseils d'Hisakki : - Conseils de ouf !:
Epurage 1 - Enlever les balises DOCTYPE, html, head, meta, title, body. Le forum a déjà toutes ces balises. 2 - On definit 1 class par defaut pour éviter de réécrire plusieurs fois les mêmes règles. Bonus : Mettre des class/id avec des noms significatifs permet de se retrouver rapidement dans le code. - Code:
-
.petitebulle { position: absolute; width: 50px; height: 50px; border-radius: 50%; // 50% permet de faire un rond // si la largeur = la hauteur background-color: #B6FEF5; } 3 - On applique cette class en html sur toutes les balises - Code:
-
<div id="numeroN" class="petitebulle"> . Puis on supprime dans le CSS toutes les lignes qu'on a déjà écrit dans - Code:
-
.petitebulle{} . 4 - On enleve les - Code:
-
[b]line-height: 500px; et les z-index: ---[/b] , ils ne servent pas j'ai l'impression. 5 - On créer une balise qui va englober tout notre code. - Code:
-
<div id="fiche_presentation"> // Mon Code // </div> 6 - Cela va nous permettre de bien placer nos éléments qui sont en 'position: absolute'. Et ça nous permettra aussi de centrer la fiche facilement. Bonus : Il y a une autre raison pour laquelle j'aime a mettre par defaut une balise qui englobe tout mon code, rappel moi de te dire pourquoi ulterieurement 7 - Pour que nos éléments en 'position: absolute' soient bien à leur place on rajoute une regle CSS à notre élément #fiche_presentation.
Voici le code tout fini et propre (normalement) : - Code de ouf !:
- Code:
-
#fiche_presentation { position: relative; }
<style type="text/css"> #fiche_presentation { position: relative; } .petitebulle { position: absolute; width: 50px; height: 50px; border-radius: 50%; background-color: #B6FEF5; } #numero1 { position: absolute; height: 450px; width: 450px; border-radius: 50%; background-color: #B6FEF5; text-align: center; overflow: auto; } #numero4 { top: 400px; left:10px; } #numero5 { top: 460px; left: 100px; }
#numero6 { top: 480px; left: 220px; }
#numero7 { top: 450px; left: 340px; } #numero8 { top: 375px; left: 435px; } #numero9 { top: 277px; left: 481px; } #numero10 { top: 167px; left: 483px; } #numero11 { top: 65px; left: 450px; } #numero12 { top: -15px; left: 370px; }
#numero2 { position:absolute; top:23px; left:120px; width: 300px; height: 200px; border-radius: 150px / 100px; transform: rotate(-7deg); background-color: #CBB6FE; text-align: center; }
#numero3 { position:absolute; top:25px; left:23px; height: 130px; width: 130px; -moz-border-radius: 35px; border-radius: 230px; background-color: #95FE95; text-align: center; }
#texte{ position: absolute; overflow: auto; margin-top: 215px; margin-left: 55px; }
</style> <div id="fiche_presentation"> <div id="numero1"></div> <div id="texte"><p style="color: black; height: 120px; width: 350px;"> Coucou j'écris du texte, beaucoup de texte. Et encore, afin de voir jusqu'où il va, et si j'ai reussi mon code ! Ça c'est l'instant chiant, mais c'est pour le bien du code. Je suis sûre qu'il est pleins de fautes, et qu'il est mal écrit. Mais il fonctionne pour le moment, et le rendu est trop beau ! Je vais le mettre en LS, comme ça vous pourrez tous l'utiliser si vous le souhaitez ! Je me demande à combien de lignes je suis... Zut c'est pas assez pour faire apparaitre la scrollbarre, qui, en passant, n'est pas très jolie mais va quand même bien avec le design général de la fiche !<br> Ça y est les enfant j'ai suffisament écrit ! Je vous laisse donc, bonne journée :D</p></div> <div id="numero2"><p style="color: black; height: 50px; width: 200px; margin-top: 35px; margin-left: 45px;transform: rotate(-3deg);">J'aime grapher et coder même si je n'ai pas encore un niveau de pro =D><br> J'aime aussi manger des pommes et chasser les bisounours !</p></div>
<div id="numero3"><p style="color: black; height: 50px; width:80px; margin-top: 35px; margin-left: 25px;">Bonjour je suis un membre !</p></div>
<div class="petitebulle" id="numero4"></div> <div class="petitebulle" id="numero5"></div> <div class="petitebulle" id="numero6"></div> <div class="petitebulle" id="numero7"></div> <div class="petitebulle" id="numero8"></div> <div class="petitebulle" id="numero9"></div> <div class="petitebulle" id="numero10"></div> <div class="petitebulle" id="numero11"></div> <div class="petitebulle" id="numero12"></div> </div>
Et voici l'aperçu final ! Coucou j'écris du texte, beaucoup de texte. Et encore, afin de voir jusqu'où il va, et si j'ai reussi mon code ! Ça c'est l'instant chiant, mais c'est pour le bien du code. Je suis sûre qu'il est pleins de fautes, et qu'il est mal écrit. Mais il fonctionne pour le moment, et le rendu est trop beau ! Je vais le mettre en LS, comme ça vous pourrez tous l'utiliser si vous le souhaitez ! Je me demande à combien de lignes je suis... Zut c'est pas assez pour faire apparaitre la scrollbarre, qui, en passant, n'est pas très jolie mais va quand même bien avec le design général de la fiche ! Ça y est les enfant j'ai suffisament écrit ! Je vous laisse donc, bonne journée J'aime grapher et coder même si je n'ai pas encore un niveau de pro =D> J'aime aussi manger des pommes et chasser les bisounours ! Bonjour je suis un membre ! Et donc normalement si plus personne n'a d'objection, on peut fermer le sujet. Merci pour ton aide précieuse Hisakki ! |
| Nin'gyou Korosu Codeur UltrActif |
|
Re: "Fiche" qui ne s'affiche pas posté le : Jeu 22 Sep - 19:59 | Merci Hisakki ! Je te mets 50 Coda'Points On archive du coup ! |
| Eluknow Administrateur |
|
Re: "Fiche" qui ne s'affiche pas posté le : | |
| |
|