Besoin d'aide pour un code HTML ><

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Besoin d'aide pour un code HTML ><

Message par LunaBallade le Mer 5 Jan 2011 - 16:18

Bonjour !

Alors voilà j'ai un petit problème avec un code HTML que je suis en train de faire pour mon forum de RP.
Spoiler:

Ce n'est peut-être pas très visible sur la capture (enfin si mais c'est pas flagrant), mais pour les "morceaux" (désolée j'ai aucun vocabulaire en html) fiche d'identité, description physique etc, il y a une sorte de marge sur les côtés que je trouve assez désagréable, étant donné la quantité de texte que je demande. En gros, les rectangles blancs ne remplissent pas toute la largeur de la page alors que je voudrais que si.

Cette marge n'était pas là au début, elle est arrivée quand j'ai commencé à faire la partie "description physique". Mais bizarrement, j'ai du faire une bêtise, toute la partie débordait sur la signature, comme cela :
Spoiler:

Pour enlever ce bug, j'ai essayé de mettre des balises <blockquote></blockquote> mais je crois que j'ai fait une connerie encore plus moche parce que ça a entraîné la marge bizarre... J'ai bien essayé de la déplacer mais rien n'y faisait : Soit la marge restait, soit elle partait mais ça recommençait à déborder. Alors que quand les balises <blockquote> ne sont pas là, sur le second screen, on peut bien voir qu'il n'y a pas de marge. C'est comme cela que j'aimerais que le code soit... Sans déborder. J'ai bien essayé de changer la largeur des "div" (je crois que c'est ça) mais cela laissait la marge, et déformait carrément la largeur du forum !

Voici mon code (avec les balises blockquote) :
Code:
<center>[center]<div style="height: 80px; background-color: #76746a; -moz-border-radius: 10px 10px 0px 0px;">[color=#FFFFFF][size=28]<SPAN style="display: block; text-shadow: 1px 1px 1px rgb(0, 0, 0); margin-left: -5px; margin-right: -5px; text-align: center;"><FONT face=times new roman size=7>PRENOM + NOM</font></span>[/size][/color][color=black][font=Times New Roman][size=14]« Phrase d'introduction du personnage. »[/size][/font][/color]</div>[color=#000000] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -[/color]
[/center]

<blockquote><div style="height: 385px; background-color: #FFFFFF; -moz-border-radius: 10px 10px 0px 0px;">
[table border="0" align="center" width="485px"][tr][td] [center]<img src="http://i56.tinypic.com/nb2pm1.png" style="border: solid 6px #a3a197;-moz-border-radius: 5px;-moz-box-shadow: 0px 0px 10px #a3a197;" />
[font=Times New Roman]Featuring {PERSO ILLUSTRATEUR}[/center][/font][/td][td] <center><div style="margin-left: 0px;margin-top: 0px; margin-bottom: 0px;text-align: center; color: #ffffff;font-size: 22px;background-color: #a3a197;-moz-border-radius: 10px;height: 20px; padding-top: 6px;">[font=Times New Roman]Fiche d'identité[/font]</div>
[center][img]http://i48.tinypic.com/2vlnnso.png[/img]
[/center]<div class="Staff" style="overflow:auto; height: 180px"><div style="margin:auto;text-align:justify;width:100%">
[size=13][justify]○ [b]Nom[/b] : [size=9](Nom complet : Prénom + Nom)[/size]
○ [b]Âge[/b] : [size=9](Âge + Date de naissance)[/size]
○ [b]Sexe[/b] : [size=9](Homme, Femme ou Inconnu)[/size]
○ [b]Orientation Sexuelle[/b] : [size=9](Hétéro, Bi, Homo ou Inconnu)[/size]
○ [b]Statut[/b] : [size=9](Groupe dans lequel va figurer votre personnage)[/size]
○ [b]Classe[/b] : [size=9](Classe de votre personnage)[/size]
○ [b]Nationalité[/b] : [size=9](Nationalité de votre personnage)[/size][/justify][/size]
</div>[/td][/tr][/table]</blockquote>
<blockquote><div style="height: 300px; background-color: #FFFFFF; -moz-border-radius: 10px 10px 0px 0px;"><div style="margin-left: 0px;margin-top: 0px; margin-bottom: 0px;text-align: center; color: #ffffff;font-size: 22px;background-color: #a3a197;-moz-border-radius: 10px;height: 20px; padding-top: 6px;">[font=Times New Roman]Description Physique[/font]
[size=9][color=white]----[/color][/size]
<div class="Staff" style="overflow:auto; height: 275px"><div style="margin:auto;text-align:justify;width:100%">[size=12][color=black][justify]Veuillez écrire votre texte ici.
[i](Description physique, statique ou en action, de votre personnage. Un minimum de 16 lignes complètes est requis pour la validation de la fiche.)[/i]
[/justify][/color][/size]</div></blockquote><blockquote><div style="height: 300px; background-color: #FFFFFF; -moz-border-radius: 10px 10px 0px 0px;"><div style="margin-left: 0px;margin-top: 0px; margin-bottom: 0px;text-align: center; color: #ffffff;font-size: 22px;background-color: #a3a197;-moz-border-radius: 10px;height: 20px; padding-top: 6px;">[font=Times New Roman]Description Morale[/font]
[size=9][color=white]----[/color][/size]
<div class="Staff" style="overflow:auto; height: 275px"><div style="margin:auto;text-align:justify;width:100%">[size=12][color=black][justify]Veuillez écrire votre texte ici.
[i](Description du caractère de votre personnage, qui devra faire un minimum de 16 lignes complètes et justifiées. Doit contenir le caractère, mais aussi les goûts du personnage et ses attitudes face à la communauté.)[/i]
[/justify][/color][/size]</div></blockquote>
<blockquote><div style="height: 300px; background-color: #FFFFFF; -moz-border-radius: 10px 10px 0px 0px;"><div style="margin-left: 0px;margin-top: 0px; margin-bottom: 0px;text-align: center; color: #ffffff;font-size: 28px;background-color: #a3a197;-moz-border-radius: 10px;height: 25px; padding-top: 6px;">[font=Times New Roman]Histoire[/font]
[size=9][color=white]----[/color][/size]
<div class="Staff" style="overflow:auto; height: 275px"><div style="margin:auto;text-align:justify;width:100%">[size=12][color=black][justify]Veuillez écrire votre texte ici.
[i](Récit de l'histoire de votre personnage, un minimum de 30 lignes complètes . Doit commencer par la naissance de votre personnage avec une brève description de sa famille, contenir l'obtention ou le développement du pouvoir, et doit finir par l'arrivée sur l'île.)[/i]
[/justify][/color][/size]</div></blockquote>

</div></div>
</div></center>

Il y a sûrement de nombreuses erreurs dedans, je suis vraiment une novice en la matière.

Mais si vous pouvez trouver la solution à mon problème et dans le meilleur cas me le corriger, je vous en serais vraiment reconnaissante Smile

Merci d'avance !


Dernière édition par LunaBallade le Jeu 6 Jan 2011 - 19:15, édité 1 fois

LunaBallade
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 31/07/2010

http://mahora-no-shima.forumactif.org/
LunaBallade a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour un code HTML ><

Message par ge80 le Mer 5 Jan 2011 - 16:20

Bonjour

Je regarde votre codage.


Edit : une question

Les blockquotes sont-ils à garder ?

cordialement
ge

ge80
+ Hyperactif +

Masculin
Messages : 16159
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour un code HTML ><

Message par LunaBallade le Mer 5 Jan 2011 - 18:49

Merci.

Pour répondre à votre question, justement, j'en sais rien, et c'est bien mon problème... Car j'ai l'impression que sans blockquotes tout déborde vers le bas.

LunaBallade
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 31/07/2010

http://mahora-no-shima.forumactif.org/
LunaBallade a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour un code HTML ><

Message par ge80 le Mer 5 Jan 2011 - 18:51

Bien : je vais essayer de garder ces balises mais je préfère le positionnement par margin ou padding.

Je vois aussi quatre zones bien distinctes.
Je vous propose, pour clarifier le code, de les dissocier.
Qu'en pensez-vous ?

Il doit rester d'autres erreurs mais, SVP, tester-le pour me dire ce qui ne va pas.

Code:
<center>[center]
<div style="height: 80px; background-color: rgb(118, 116, 106); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px;">[color=#FFFFFF][size=28]<span style="display: block; text-shadow: rgb(0, 0, 0) 1px 1px 1px; margin-left: -5px; margin-right: -5px; text-align: center;"><font new="" roman="" face="times" size="7">PRENOM
+ NOM</font></span>[/size][/color][color=black][font=TimesNew Roman][size=14]« Phrase d'introduction du personnage.
»[/size][/font][/color]</div>
[color=#000000] - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - -[/color]
[/center]
  <div style="height: 385px; background-color: rgb(255, 255, 255); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px;">[table border="0" align="center" width="485px" cellspacing="1"]
[tr][td] [center]<img src="http://i56.tinypic.com/nb2pm1.png" style="border: 6px solid rgb(163, 161, 151); -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;">
[font=Times New Roman]Featuring {PERSO
ILLUSTRATEUR}[/center][/font][/td][td]
  <center>
  <div style="margin-left: 0px; margin-top: 0px; margin-bottom: 0px; text-align: center; color: rgb(255, 255, 255); font-size: 22px; background-color: rgb(163, 161, 151); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; height: 20px; padding-top: 6px;">[font=TimesNew Roman]Fiche d'identité[/font]</div>
[center][img]http://i48.tinypic.com/2vlnnso.png[/img]
[/center]
  <div class="Staff" style="overflow: auto; height: 180px;">
  <div style="margin: auto; text-align: justify; width: 100%;">[size=13][justify]○
[b]Nom[/b] : [size=9](Nom complet : Prénom + Nom)[/size]
○ [b]Âge[/b] : [size=9](Âge + Date de naissance)[/size]
○ [b]Sexe[/b] : [size=9](Homme, Femme ou Inconnu)[/size]
○ [b]Orientation Sexuelle[/b] : [size=9](Hétéro, Bi, Homo ou
Inconnu)[/size]
○ [b]Statut[/b] : [size=9](Groupe dans lequel va figurer votre
personnage)[/size]
○ [b]Classe[/b] : [size=9](Classe de votre personnage)[/size]
○ [b]Nationalité[/b] : [size=9](Nationalité de votre
personnage)[/size][/justify][/size]
  </div>
[/td][/tr]
[/table]</div>
  </center>
  </div>

  <div style="height: 300px; background-color: rgb(255, 255, 255); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px;">
  <div style="margin-left: 0px; margin-top: 0px; margin-bottom: 0px; text-align: center; color: rgb(255, 255, 255); font-size: 22px; background-color: rgb(163, 161, 151); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; height: 20px; padding-top: 6px;">[font=TimesNew Roman]Description Physique[/font]
[size=9][color=white]----[/color][/size]
  <div class="Staff" style="overflow: auto; height: 275px;">
  <div style="margin: auto; text-align: justify; width: 100%;">[size=12][color=black][justify]Veuillez
écrire votre texte ici.
[i](Description physique, statique ou en action, de votre personnage.
Un minimum de 16 lignes complètes est requis pour la validation de la
fiche.)[/i]
[/justify][/color][/size]</div>
  </div>
  </div>
  </div>



  <div style="height: 300px; background-color: rgb(255, 255, 255); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px;">
  <div style="margin-left: 0px; margin-top: 0px; margin-bottom: 0px; text-align: center; color: rgb(255, 255, 255); font-size: 22px; background-color: rgb(163, 161, 151); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; height: 20px; padding-top: 6px;">[font=TimesNew Roman]Description Morale[/font]
[size=9][color=white]----[/color][/size]
  <div class="Staff" style="overflow: auto; height: 275px;">
  <div style="margin: auto; text-align: justify; width: 100%;">[size=12][color=black][justify]Veuillez
écrire votre texte ici.
[i](Description du caractère de votre personnage, qui devra faire un
minimum de 16 lignes complètes et justifiées. Doit contenir le
caractère, mais aussi les goûts du personnage et ses attitudes face à
la communauté.)[/i]
[/justify][/color][/size]</div>
  </div>
  </div>
  </div>



  <div style="height: 300px; background-color: rgb(255, 255, 255); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px;">
  <div style="margin-left: 0px; margin-top: 0px; margin-bottom: 0px; text-align: center; color: rgb(255, 255, 255); font-size: 28px; background-color: rgb(163, 161, 151); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; height: 25px; padding-top: 6px;">[font=TimesNew Roman]Histoire[/font]
[size=9][color=white]----[/color][/size]
  <div class="Staff" style="overflow: auto; height: 275px;">
  <div style="margin: auto; text-align: justify; width: 100%;">[size=12][color=black][justify]Veuillez
écrire votre texte ici.
[i](Récit de l'histoire de votre personnage, un minimum de 30 lignes
complètes . Doit commencer par la naissance de votre personnage avec
une brève description de sa famille, contenir l'obtention ou le
développement du pouvoir, et doit finir par l'arrivée sur l'île.)[/i]
[/justify][/color][/size]</div>
  </div>
  </div>
  </div>
</center>

Avec vos blockquotes Wink

Code:
 <blockquote>
 <center><center>
<div style="height: 80px; background-color: rgb(118, 116, 106); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px;">[color=#FFFFFF][size=28]<span style="display: block; text-shadow: rgb(0, 0, 0) 1px 1px 1px; margin-left: -5px; margin-right: -5px; text-align: center;"><font new="" roman="" face="times" size="7">PRENOM+ NOM</font></span>[/size][/color][color=black][font=TimesNew Roman][size=14]« Phrase d'introduction du personnage.
»[/size][/font][/color]</div>
[color=#000000] - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - -[/color]</center>
  <div style="height: 385px; background-color: rgb(255, 255, 255); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px;">[table border="0" align="center" width="485px" cellspacing="1"]
<tr><td> <center><img src="http://i56.tinypic.com/nb2pm1.png" style="border: 6px solid rgb(163, 161, 151); -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;">
[font=Times New Roman]Featuring {PERSO
ILLUSTRATEUR}</center>[/font]</td><td>
  <center>
  <div style="margin-left: 0px; margin-top: 0px; margin-bottom: 0px; text-align: center; color: rgb(255, 255, 255); font-size: 22px; background-color: rgb(163, 161, 151); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; height: 20px; padding-top: 6px;">[font=TimesNew Roman]Fiche d'identité[/font]</div>
<center>[img]http://i48.tinypic.com/2vlnnso.png[/img]
</center>
  <div class="Staff" style="overflow: auto; height: 180px;">
  <div style="margin: auto; text-align: justify; width: 100%;">[size=13][justify]?
[b]Nom[/b] : [size=9](Nom complet : Prénom + Nom)[/size]
? [b]Âge[/b] : [size=9](Âge + Date de naissance)[/size]
? [b]Sexe[/b] : [size=9](Homme, Femme ou Inconnu)[/size]
? [b]Orientation Sexuelle[/b] : [size=9](Hétéro, Bi, Homo ou
Inconnu)[/size]
? [b]Statut[/b] : [size=9](Groupe dans lequel va figurer votre
personnage)[/size]
? [b]Classe[/b] : [size=9](Classe de votre personnage)[/size]
? [b]Nationalité[/b] : [size=9](Nationalité de votre
personnage)[/size][/justify][/size]
  </div>
</td></tr>
[/table]</div>
  </center>
  </div>
 </blockquote>
 
 <blockquote>
  <div style="height: 300px; background-color: rgb(255, 255, 255); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px;">
  <div style="margin-left: 0px; margin-top: 0px; margin-bottom: 0px; text-align: center; color: rgb(255, 255, 255); font-size: 22px; background-color: rgb(163, 161, 151); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; height: 20px; padding-top: 6px;">[font=TimesNew Roman]Description Physique[/font]
[size=9][color=white]----[/color][/size]
  <div class="Staff" style="overflow: auto; height: 275px;">
  <div style="margin: auto; text-align: justify; width: 100%;">[size=12][color=black][justify]Veuillez
écrire votre texte ici.
[i](Description physique, statique ou en action, de votre personnage.
Un minimum de 16 lignes complètes est requis pour la validation de la
fiche.)[/i]
[/justify][/color][/size]</div>
  </div>
  </div>
  </div>
 </blockquote>

 <blockquote>
  <div style="height: 300px; background-color: rgb(255, 255, 255); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px;">
  <div style="margin-left: 0px; margin-top: 0px; margin-bottom: 0px; text-align: center; color: rgb(255, 255, 255); font-size: 22px; background-color: rgb(163, 161, 151); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; height: 20px; padding-top: 6px;">[font=TimesNew Roman]Description Morale[/font]
[size=9][color=white]----[/color][/size]
  <div class="Staff" style="overflow: auto; height: 275px;">
  <div style="margin: auto; text-align: justify; width: 100%;">[size=12][color=black][justify]Veuillez
écrire votre texte ici.
[i](Description du caractère de votre personnage, qui devra faire un
minimum de 16 lignes complètes et justifiées. Doit contenir le
caractère, mais aussi les goûts du personnage et ses attitudes face à
la communauté.)[/i]
[/justify][/color][/size]</div>
  </div>
  </div>
  </div>
 </blockquote>


 <blockquote>
  <div style="height: 300px; background-color: rgb(255, 255, 255); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px;">
  <div style="margin-left: 0px; margin-top: 0px; margin-bottom: 0px; text-align: center; color: rgb(255, 255, 255); font-size: 28px; background-color: rgb(163, 161, 151); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; height: 25px; padding-top: 6px;">[font=TimesNew Roman]Histoire[/font]
[size=9][color=white]----[/color][/size]
  <div class="Staff" style="overflow: auto; height: 275px;">
  <div style="margin: auto; text-align: justify; width: 100%;">[size=12][color=black][justify]Veuillez
écrire votre texte ici.
[i](Récit de l'histoire de votre personnage, un minimum de 30 lignes
complètes . Doit commencer par la naissance de votre personnage avec
une brève description de sa famille, contenir l'obtention ou le
développement du pouvoir, et doit finir par l'arrivée sur l'île.)[/i]
[/justify][/color][/size]</div>
  </div>
  </div>
  </div>
  </blockquote>
 
</center>

ge80
+ Hyperactif +

Masculin
Messages : 16159
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Besoin d'aide pour un code HTML ><

Message par LunaBallade le Jeu 6 Jan 2011 - 19:15

Ah ben je n'ai rien à ajouter, merci beaucoup, grâce à votre aide j'ai pu finir mon code !

Encore merci Smile

LunaBallade
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 31/07/2010

http://mahora-no-shima.forumactif.org/
LunaBallade a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour un code HTML ><

Message par ge80 le Jeu 6 Jan 2011 - 19:28

Chouette

bonne soirée
victoire

ge80
+ Hyperactif +

Masculin
Messages : 16159
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum