Code, CSS et cie.

Invité

A Propos du codage

Tout le monde a, au moins un jour entendu parler de codage. Certains s'y intéresseront très rapidement, d'autre n'y porteront jamais un intérêt quelconque. Et pourtant. Ce n'est que grâce à eux que vous parviendrez, notamment sur les forums, à jouer sur la mise en page de vos post. C'est pour cela que j'ai crée ce sujet. Pour permettre au codeur expérimenté si, ils le désirent de venir en aide aux novices.

Les novices?
J'en fais partie (encore elle ! Mais sait-elle faire quelque chose de ses dix doigts?) et je dois même vous avouer, que je serais toujours partante pour apprendre quelques bases. Des trucs tout simple. Comme par exemple, insérer une barre coulissante en face d'un icone quelconque, ou encore, encadrer, entourer, mettre en page. Les basiques. Juste histoire de savoir me débrouille pour faire des fiches de relations RPG notamment qui sorte de l'ordinaire!

Quelques exemple répondant à mes attentes

ici
là
ou par ici

Voici pour le premier, je cherche pour le second et le troisième.

Aperçut:

Code:: <center><div style="background:url(http://i27.tinypic.com/2rcms6t.jpg) repeat; text-shadow: #D9CCC0 1px 1px 1px; width: 450px; -moz-border-radius: 10px 10px 10px 10px; border:solid 6px DimGray;"><br /><table border=0><div style="margin:auto;text-align:center;width:100%"><img src="http://i67.servimg.com/u/f67/15/17/77/91/essai10.jpg" border="0" alt="" /> <img src="http://i67.servimg.com/u/f67/15/17/77/91/essai10.jpg" border="0" alt="" /> <img src="http://i67.servimg.com/u/f67/15/17/77/91/essai10.jpg" border="0" alt="" /></div><td align="left"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 9px; line-height: normal"><div align="justify"><div style="text-shadow: #808080 1px 1px 1px; font-weight:bold; color:#f0f0f0; border-bottom: DimGray dotted 3px; padding-left:250px;"><div style="position:relative;top:8px;"><span style="font-size: 25px; line-height: normal"><font face="Times New Roman">Carte d'identité ;</font></span></div></div><br /><ul>◖Texte <br />◖Texte <br />◖texte <br />◖Texte.<br />◖Texte.<br />◖Texte<br />◖Texte</ul></div></span></div><div style="text-shadow: #808080 1px 1px 1px; font-weight:bold; color:#f0f0f0; color:#f0f0f0; border-bottom: DimGray dotted 3px; padding-left:250px;"><div style="position:relative;top:8px;"><span style="font-size: 25px; line-height: normal"><font face="Times New Roman">Un petit plus ;</font></span></div></div><br /><div style="width:430px;height:100px;overflow:auto;">◖Texte<br /><br /><div style="margin:auto;text-align:center;width:100%">Texte</div><br />◖Texte<br /><br /><div style="margin:auto;text-align:center;width:100%">Texte.</div><br />◖Texte ◖Texte. ◖Passe mon temps libre à jouer aux jeux vidéos. ◖Texte. ◖Texte. ◖Texte.</div><br /><br /><div style="text-shadow: #808080 1px 1px 1px; font-weight:bold; color:#f0f0f0; border-bottom: DimGray dotted 3px; padding-left:250px;"><div style="position:relative;top:8px;"><span style="font-size: 25px; line-height: normal"><font face="Times New Roman">Je vous veux ;</font></span></div></div><br /><span style="font-size: 9px; line-height: normal"><div align="left">|<font color="black"><span style="font-size: 14px; line-height: normal"><strong>♂</strong></span></font>| TEXTE<br /><br />|<span style="font-size: 14px; line-height: normal"><font color="black">♂</font></span>et<span style="font-size: 14px; line-height: normal"><font color="black"><span><strike>♀</strike></span></font></span>| TEXTE<br /><br />|<span style="font-size: 14px; line-height: normal"><font color="black">♂</font></span>et/ou<span style="font-size: 14px; line-height: normal"><font color="black">♀</font></span>| TEXTE<br /><br /><span style="font-size: 14px; line-height: normal"><font color="black">♂</font></span> TEXTE <br /><br /><span style="font-size: 14px; line-height: normal"><font color="black">♀</font></span> TEXTE<br /><br />|<span style="font-size: 14px; line-height: normal"><font color="black">♂</font></span>et<span style="font-size: 14px; line-height: normal"><font color="black">♀</font></span>| TEXTE<br /><br /><br />|<span style="font-size: 14px; line-height: normal"><font color="black">♂</font></span>et<span style="font-size: 14px; line-height: normal"><font color="black">♀</font></span>| TEXTE</div><br /><br /><div style="margin:auto;text-align:center;width:100%"><font color="black">D'autres idées ?</font></div></span><br /></td></table></div>

Invité

O____O

Tu es toujours aussi rapide et efficace dans tes réponses? Merci infiniment Hiro! C'est juste super!! J'adore!!

J'essaie de faire au mieux. Voici le deuxième, je te fais le dernier quand tu auras vu celui-ci.

Aperçut:

Code:: <center><table><tr><td><div style="background: #FFFFFF ;height:370px; width: 130px; -moz-border-radius: 0px 0px 0px 0px;"><br /><div style="margin:auto;text-align:center;width:100%"><img src="http://i67.servimg.com/u/f67/15/17/77/91/essai10.jpg" border="0" alt="" /><br /><br /><img src="http://i67.servimg.com/u/f67/15/17/77/91/essai10.jpg" border="0" alt="" /><br /><br /><img src="http://i67.servimg.com/u/f67/15/17/77/91/essai10.jpg" border="0" alt="" /></div></div></div></td><td><div style="font-family: Arial; background-color: #FFFFFF; text-align: center; height:370px; width: 370px; -moz-border-radius:0px 10px 10px 0px" align="justify"><div style="color:#000000; border-bottom: #a2d39c dotted 2px;"><div style="position:relative;top:4px;"><span style="font-size: 25px; line-height: normal"><font face="Georgia"><i>TON TEXTE</i></font></span></div></div></center><br /><div style="margin:auto;text-align:center;width:100%"><font face="georgia"><i><span style="font-size: 15px; line-height: normal"><font color="black">informations</font></span></i></font></div><br /><div style="overflow: auto; text-align: justify; width: 360px; height: 280px; margin-left: 5px;"><div align="justify"><span style="font-size: 10px; line-height: normal"><font color="#a2d39c"><font color="black">Texte :</font> <br /><font color="black">Texte :</font> <br /><font color="black">Texte :</font> <br /><font color="black">Texte :</font><br /><font color="black">Texte :</font><br /><br /><font color="black">Texte :</font> 1. Texte <br />2.Texte<br />3.Texte<br />4.Texte<br />5.Texte<br />6.Texte<br />7.Texte <br />8.Texte<br /></font></span></div><br /><br /><div style="margin:auto;text-align:center;width:100%"><font face="georgia"><i><span style="font-size: 15px; line-height: normal"><font color="black">Texte</font></span></i></font></div><br /><div align="justify"><span style="font-size: 10px; line-height: normal"><font color="#a2d39c">Texte</div></span></font></table></div></center>

Invité

Merci beaucoup! C'est impeccable!

Tu pourras, à l'occasion, "me" préparer juste les zones avec icones pour les relations? Juste une seule des 3 trucs que j'ai proposé. Ça suffira amplement! ^^

Arigatô Gosaimasu !!

Aperçut:

Code:: <div style="border:#7ab981double; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; padding-left: 5px; padding-right: 5px;color: #aaa197; background-color:#ffffff;"><img src="http://i67.servimg.com/u/f67/15/17/77/91/tonima10.jpg" border="0" alt="" /><div style="text-align: center; padding-right: 5px; font-family: Georgia; font-size:15px; background-color:#e47676;color:#e47676; ">. </div><br /><table><tr><td align="left" style="border-right: 1px dashed #e47676; padding-right: 5px;" width="120px"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 18px; line-height: normal">TEXTE</span></div><div style="background: url('http://i68.servimg.com/u/f68/11/48/90/30/fondic11.png'); width:120px; height:120px; padding-top: 15px;"><div style="margin:auto;text-align:center;width:100%"><img src="http://i67.servimg.com/u/f67/15/17/77/91/essai10.jpg" border="0" alt="" /></div></div></td><td align="left" valign="top" style="text-align: justify; width: 250px; font-size: 10px;"><div align="right"><span style="font-size: 12px; line-height: normal"><font color="#7d6d5f">TEXTE</font></span></div><div style="height:140px;overflow:auto; padding-left: 5px; padding-right: 5px; padding-top: 5px; ">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE</div></td></tr></table><br /><table><tr><td align="left" style="border-right: 1px dashed #e47676; padding-right: 5px;" width="120px"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 18px; line-height: normal">TEXTE</span></div><div style="background: url('http://i68.servimg.com/u/f68/11/48/90/30/fondic11.png'); width:120px; height:120px; padding-top: 15px;"><div style="margin:auto;text-align:center;width:100%"><img src="http://i67.servimg.com/u/f67/15/17/77/91/essai10.jpg" border="0" alt="" /></div></div></td><td align="left" valign="top" style="text-align: justify; width: 250px; font-size: 10px;"><div align="right"><span style="font-size: 12px; line-height: normal"><font color="#7d6d5f">TEXTE</font></span></div><div style="height:140px;overflow:auto; padding-left: 5px; padding-right: 5px; padding-top: 5px; ">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE</div></td></tr></table><br /><table><tr><td align="left" style="border-right: 1px dashed #e47676; padding-right: 5px;" width="120px"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 18px; line-height: normal">TEXTE</span></div><div style="background: url('http://i68.servimg.com/u/f68/11/48/90/30/fondic11.png'); width:120px; height:120px; padding-top: 15px;"><div style="margin:auto;text-align:center;width:100%"><img src="http://i67.servimg.com/u/f67/15/17/77/91/essai10.jpg" border="0" alt="" /></div></div></td><td align="left" valign="top" style="text-align: justify; width: 250px; font-size: 10px;"><div align="right"><span style="font-size: 12px; line-height: normal"><font color="#7d6d5f">TEXTE</font></span></div><div style="height:140px;overflow:auto; padding-left: 5px; padding-right: 5px; padding-top: 5px; ">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE</div></td></tr></table><br /><br /></div>

Invité

Pas exactement, juste que tu fasses comme tu viens de le faire au dessus. Que tu me donnes le code, et que je puisse m'en servir en changeant moi même les zones "textes" et les "icônes" nécessaires.

Donc, pour le moment, c'est juste parfait ce que tu me ponds là!

Mais surtout, je ne voudrais pas que cela te prenne tout ton temps libre tu sais. Si vraiment tu as d'autres choses à faire, mes "pseudo-commandes" passent après. Je ne suis pas du tout pressée.

Mais merci! Tu me soulages vraiment d'un gros poids. Je vais pouvoir faire, une fiche de relation pour ton forum ici dans la partie prévue à cette effet.

D'ailleurs, à ce propos, y-a-t-il un nombre limite de caractères dans un post de messages sur le forum. Parce que je voudrais concentrer tout sur un même message que j'éditerais au fur et à mesure de ma progression dans le RP, et si les caractères sont limités, faut que je prévois des "messages" supplémentaire que je pourrais éditer.

Est ce que tu me suis ou pas du tout... X_X
J'ai pas l'impression d'être claire...

Ah... Oui d'accord je vois à peu près ce que tu veux dire. Et ne t'en fais pas, ça ne me prends pas beaucoup de temps. Pour tout t'avouer, j'ai mis cinq minutes à faire les deux codes précédents. Peut-être dix au maximum parce que ma connexion internet est assez lente.

Pour les limites de caractère, je n'en sais rien mais dans le doute, j'ai crée des sous forums dans chaque section rôle play destiné à la présentation des personnages. Ainsi, le joueur crée son topic consacré à son personnage et peut y poster autant de message qu'il veut au besoin.

Invité

Excellente idée...!

Il va donc falloir que je décale la présentation de ma fifille ^^'

Je croyais qu'il fallait tout mettre à la suite du sujet que tu avais suggéré.. Gomen, pour le "boulot" que je te donne en plus.

N'hésite pas à hurler à l'excés, si j'abuse trop hein!

A la base oui, il fallait répondre mais finalement ce système n'est pas pratique. J'ai déplacé ton sujet, ça ne m'a pas pris trop de temps ne t'en fais pas (surtout que c'est moi qui ait changé le système qui était déjà mis en place donc bon).

Ah. Et je ne hurle jamais. Ma patience est sans faille.

Invité

T'en que j'y suis. Est ce qu'il serait possible que tu me fasses un code "relation" qui aille avec le code "présentation" que j'ai déjà utilisé pour Fuzuki? Genre ça (partie relation) mais dans les tons Verts anis et noir?

Merci en tout cas! Et crois-moi, avec moi, il faudra que tu t'armes de patience! ^^

C'est ça que tu voulais ?

Aperçut:

Code:: <blockquote><div style="background-color: #dcf6b7; text-align: center;" align="center"><font color="black" face="georgia" size="4"> Famille</font><br></div><br /><center><font color=black face=georgia size=1><span style="font-size: 11px; line-height: normal">Maybe not behind my eyes.. But forever in my heart.</span> </font></blockquote><br /><br /><ul><table><tr><td align="left"><img src="http://i67.servimg.com/u/f67/15/17/77/91/essai10.jpg" border="0" alt="" /></td><td align="left"><ul><span style="font-size: 11px; line-height: normal"><div style="overflow: auto; text-align: center; width: 400px; height: 100px;"><span style="border-bottom: 1px dotted;"></span><font color="black"><strong><font face="georgia">TEXTE</font> <font color="#66FF66">••</strong></font></span> <font color="black"><i><span style="font-size: 9px; line-height: normal">TEXTE</i></span></font><br /><br />TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE. </font></td></tr></table></ul></ul>

Invité

Parfait ! Mais le vert, est ce que tu pourrais le rendre plus pâle. Plus anis?

Sorry! Merci d'avance!!!

(si tu en as une meilleure montre moi afin que je l'utilise)

COULEUR 1

COULEUR 4

COULEUR 2

COULEUR 3

Invité

La 1 ou la 3 ^^ A ta guise!

Mais tu ne peux pas tout simplement reprendre celle que tu as utilisée pour le code d'avant?

Voilà, j'ai édité mon message, mais je n'ai pas utilisé de vert dans mes autres codes.

Invité

Kyââ !!

San-Kyû !!

Quand tu auras le temps, est ce que tu pourras juste me donner les bases du codage CSS. Genre, comment faire un cadre, mettre une barre défilante, ou d'autre petit trucs comme ça. Ainsi je pourrais essayer ici, et tu pourras me dire ce qui ne va pas!

Merci pour tout!

Hm... Pour les explications, ça sera long... Il y a tellement de choses à expliquer avant de passer directement aux choses sérieuses (car avant de faire du CSS il faut comprendre le CSS). Je ne pourrais faire des tutoriels que vers mi-juin (date de fin de mes examens environ). En attendant je te conseille d'aller voir sur Le site du zéro pour une entrée en matière.

Invité

Merci! Je vais aller voir cela. J'attendrais après si j'ai de nouveau besoin de ton aide.

Merci encore pour tout!