Problème code Fiches

[Luke13]

Bonjour/Bonsoir,

Alors voilà j'ai un problème assez conséquent sur mon forum. Nous avons fait les fiches de présentations pour les nouveaux membres. Ces fiches fonctionnent très bien sur Chrome. Cependant, elles ne fonctionnent pas sur Firefox. Lorsqu'on les postes sur le forum, la signature du membre qui l'a posté se met au-dessus de la fiche et cela déforme la page oO

On a cherché mais on trouve pas d'où vient le problème... Si vous pouvez nous aider, ça serait sympa =)

Voici l'un des codes :

Code:

<center><div style="border-radius: 20px;border-left: 5px solid darkgrey; border-right: 5px solid darkgrey; background-image:url('http://img15.hostingpics.net/pics/772414Akuryo.jpg'); width:650px;text-align:center;">
<span style="font-family:Matura MT Script Capitals;font-size:40px;color: blue;text-shadow: 2px 2px 6px grey; border-bottom: 2px dotted grey">[i]Clan Sakuma[/i]</span>
<br><br>

<center><div style="border-radius: 7px 7px 7px 7px;550px;height;220px;background:url('http://papillonvolant.p.a.pic.centerblog.net/o/vinta-parch-1.jpg');box-shadow: 2px 2px 6px grey;padding:10px;text-align: center; width: 90%">


<div style="font-variant: small-caps;font-family: papyrus;font-size: 20px;border-bottom: 3px solid darkblue;text-shadow: 2px 2px 6px white;color: darkblue;">
« Citation ou phrase » </div>


<img src="http://farm4.static.flickr.com/3595/3411509654_eb49c0d1e2_m.jpg" style="border:5px solid black"/>

<center><table><tr><td><center><div style="align: center;width:518px;background-color:#C0C0C0;height:130px; border-right: 4px solid black; border-left: 4px solid black; border-bottom: 12px solid black;"><div style="background:black;color:white;font-family:'lucida calligraphy';font-size:14px;text-transform:uppercase;text-align:center;">INFOS CAPITALES :</div><div style="margin-top:04px; overflow:auto;height:110px;">
[center]
[font=lucida calligraphy][b]Nom & Prénom :[/b][/font][i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Clan :[/b][/font][i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Titre :[/b][/font][i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Age :[/b][/font][i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Armes:[/b][/font][i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Plus grande peur:[/b][/font][i][font=Georgia]ICI[/font][/i]
[/center]</div></div></div></td></tr></table>
<br>

</div>

<center><div style="border-radius: 7px 7px 7px 7px;550px;height;220px;background:url('http://papillonvolant.p.a.pic.centerblog.net/o/vinta-parch-1.jpg');box-shadow: 2px 2px 6px grey;padding:10px;text-align: center; width: 90%">

<div style="font-variant: small-caps;font-family: papyrus;font-size: 20px;border-bottom: 3px solid darkblue;text-shadow: 2px 2px 6px white;color: darkblue;"> Mon Physique</div>


<center><div style="border-radius: 20px;text-align:center;height: 300px; overflow:auto;">

[i][font=Georgia]ECRIVEZ ICI (une dizaine de lignes sont suffisantes) [/font][/i]


</div></center>

</center>
<center><div style="border-radius: 7px 7px 7px 7px;550px;height;220px;background:url('http://papillonvolant.p.a.pic.centerblog.net/o/vinta-parch-1.jpg');box-shadow: 2px 2px 6px grey;padding:10px;text-align: center; width: 90%">

<div style="font-variant: small-caps;font-family: papyrus;font-size: 20px;border-bottom: 3px solid darkblue;text-shadow: 2px 2px 6px white;color: darkblue;"> Mon Caractère</div>


<center><div style="border-radius: 20px;text-align:center;height: 300px; overflow:auto;">

[i][font=Georgia]ECRIVEZ ICI (une vingtaine de lignes sont suffisantes) [/font][/i]


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


<center><div style="border-radius: 7px 7px 7px 7px;550px;height;220px;background:url('http://papillonvolant.p.a.pic.centerblog.net/o/vinta-parch-1.jpg');box-shadow: 2px 2px 6px grey;padding:10px;text-align: center; width: 90%">

<div style="font-variant: small-caps;font-family: papyrus;font-size: 20px;border-bottom: 3px solid darkblue;text-shadow: 2px 2px 6px white;color: darkblue;"> Mon Histoire</div>


<center><div style="border-radius: 20px;text-align:center;height: 300px; overflow:auto;">

[i][font=Georgia]ECRIVEZ ICI (une trentaine de lignes sont suffisantes) [/font][/i]

</div></center>
</div>
<table><tr><td>

<blockquote style="margin-left: 25px;width: 580px; height: 500px;border: 5px solid darkblue;border-radius: 0px 0px 20px 20px;padding:5px;background: url('http://papillonvolant.p.a.pic.centerblog.net/o/vinta-parch-1.jpg')"><blockquote style="margin-left:-5px;margin-top:-5px;font-size:20px; background-color:darkblue;text-align:center;align:center;color:white;width:590px;height:25px;">Eh, toi, derrière ton écran. </blockquote><center>


<table><tr><td><div style="margin-left: 5px;"></div></td></tr></table>
[b]
Prénom / Surnom :[/b][i][font=Georgia]ICI[/font][/i]
[b]
Age :[/b][i][font=Georgia]ICI[/font][/i]
[b]
Comment avez vous connu le forum:[/b][i][font=Georgia]ICI[/font][/i].
[b]
Qu'en pensez-vous :[/b][i][font=Georgia]ICI[/font][/i]
[b]
Coca ou Pepsi ? :[/b][i][font=Georgia]ICI[/font][/i]

[b]la fréquence de votre présence ? :D:[/b][i][font=Georgia]ICI[/font][/i]
</center></center></blockquote></td></tr></table>
</img></td></tr>


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


Est-ce le code est mal fait ? Faut-il le purger ?

Encore une fois merci d'avance, et j'attends de vos nouvelles =)

[Luke13]

Up =)

[Luke13]

Up

[MlleAlys]

bonjour,
oui, il y avait quelques erreurs dans le code, essayez comme cela pour voir si ça règle le problème (j'ai mis la mise en forme dans un code css à mettre dans votre feuille de style pour alléger celui du message, mais si vous préférez on peut le remettre dans le codage html ^^) :

html :

Code:

<div class="fond">

<span class="clan">Clan Sakuma</span>


   
<div class="cadre"><div class="titre">« Citation ou phrase »</div>
<img src="http://farm4.static.flickr.com/3595/3411509654_eb49c0d1e2_m.jpg" style="border:5px solid black;" />

<div style="width:518px; margin: auto;background-color:#C0C0C0; border-right: 4px solid black; border-left: 4px solid black; border-bottom: 12px solid black;"><div style="background:black; color:white; font-family:'lucida calligraphy'; font-size:14px; text-transform:uppercase; text-align:center;">INFOS CAPITALES :</div><div style="margin-top:4px; overflow:auto; height:110px; text-align: center;">
[font=lucida calligraphy][b]Nom & Prénom :[/b][/font] [i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Clan :[/b][/font] [i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Titre :[/b][/font] [i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Age :[/b][/font] [i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Armes:[/b][/font] [i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Plus grande peur:[/b][/font] [i][font=Georgia]ICI[/font][/i]
</div></div></div>
   
   
<div class="cadre"><div class="titre">Mon Physique</div>
<div style="border-radius:20px; height:300px; overflow:auto;">
[i][font=Georgia]ECRIVEZ ICI (une dizaine de lignes sont suffisantes) [/font][/i]
</div></div>
   
   
<div class="cadre"><div class="titre">Mon Caractère</div>
<div style="border-radius:20px; height:300px; overflow:auto;">
[i][font=Georgia]ECRIVEZ ICI (une vingtaine de lignes sont suffisantes) [/font][/i]
</div></div>
   
   
<div class="cadre"><div class="titre">Mon Histoire</div>
<div style="border-radius:20px; height:300px; overflow:auto;">
[i][font=Georgia]ECRIVEZ ICI (une trentaine de lignes sont suffisantes) [/font][/i]
</div></div>
   
   
<div class="cadre" style="border: 5px solid darkblue; padding:0;"><div style="font-size:20px; background-color:darkblue; color:white; width:100%; padding: 5px 0;">Eh, toi, derrière ton écran.</div>
[b]Prénom / Surnom :[/b][i][font=Georgia]ICI[/font][/i]
[b]Age :[/b][i][font=Georgia]ICI[/font][/i]
[b]Comment avez vous connu le forum:[/b][i][font=Georgia]ICI[/font][/i]
[b]Qu'en pensez-vous :[/b][i][font=Georgia]ICI[/font][/i]
[b]Coca ou Pepsi ? :[/b][i][font=Georgia]ICI[/font][/i]
[b]la fréquence de votre présence ? :D:[/b][i][font=Georgia]ICI[/font][/i]

</div>

</div>

css à mettre dans la feuille de style :

Code:

/*MISE EN FORME FICHE DE PRESENTATION*/

.fond {
    width: 650px;
    margin: auto;
    border-radius: 20px;
    border-left: 5px solid darkgrey;
    border-right: 5px solid darkgrey;
    background-image: url(http://img15.hostingpics.net/pics/772414Akuryo.jpg);
    text-align:center;
}
.clan {
    font-family: Matura MT Script Capitals;
    font-style: italic;
    font-size:40px;
    color: blue;
    text-shadow: 2px 2px 6px grey;
    border-bottom: 2px dotted grey;
}
.cadre {
    border-radius: 7px 7px 7px 7px;
    margin: auto;
    background: url(http://papillonvolant.p.a.pic.centerblog.net/o/vinta-parch-1.jpg);
    box-shadow: 2px 2px 6px grey;
    padding:10px;
    width: 90%;
}
.titre {
    font-variant: small-caps;
    font-family: papyrus;
    font-size: 20px;
    border-bottom: 3px solid darkblue;
    text-shadow: 2px 2px 6px white;
    color: darkblue;
}

/*FIN MISE EN FORME FICHE DE PRESENTATION*/

[Luke13]

Merciiiiiiiiiii !!!

Par contre, j'ai plusieurs fiches (Une fiche par clan dans mon forum RP) donc va falloir que je les change toutes. Toutefois, est-ce que le code CSS va marcher pour toutes les fiches ?

[MlleAlys]

ça dépend des changements à effectuer, quels sont-ils ? ^^

[Luke13]

Bah en fait on avait fait 10 fiches. Elles ont toutes le même code mais c'est juste le nom du clan et les images qui changent. La fiche que tu as réparé est l'une des 10 fiches.

Si je fais les mêmes changements que tu as fais sur cette fiche, sur toutes les autres fiches, ça va marcher pour toutes les fiches ?

[MlleAlys]

le nom du clan peut être modifié dans la fiche sans aucun problème, comme l'image de la première partie.
Par contre, si ce sont des images de fond à modifier, là il faudra sans doute modifier un peu les codes ^^

[Luke13]

Mais si les images de fond ont toutes la même taille que celle ci-dessus, c'est bon ?

[MlleAlys]

ce n'est pas une question de taille ^^ :

Code:

<div class="fond">
 
pouet pouet pouet fiche etc etc

</div>

voilà la première et la dernière ligne du code html donné : c'est un bloc ("div") qui contient le reste de la fiche. j'ai appelé ce bloc "fond" (class="fond")

puis dans le css il y a entre autres cela :

Code:

.fond {
    ...
    background-image: url(http://img15.hostingpics.net/pics/772414Akuryo.jpg);
    ...
}

Ce passage indique que les éléments appelés "fond", comme mon bloc principal contenant la fiche, doit avoir https://2img.net/r/hpimg15/pics/772414Akuryo.jpg en image de background ^^

Si tu veux pouvoir modifier les images de fond code par code, on peut remettre le codage de l'image fond de chaque élément dans le code html sans passer par le css, comme dans la première version du code ^^
Quels fonds veux tu pouvoir changer ?

[Luke13]

Je dois changer cette image dans chaque fiche :

background-image: url('https://2img.net/r/hpimg15/pics/772414Akuryo.jpg');

La deuxième qui est dans le code CSS (l'image du parchemin), elle sera dans tous les codes, donc on peut la laisser dans le code CSS.

J'ai bien compris ? Car je suis pas sur =p

[MlleAlys]

ok, oui c'est bien ça, donc vous pouvez retirer cette ligne de css, ce qui donne :

Code:

/*MISE EN FORME FICHE DE PRESENTATION*/
 
.fond {
    width: 650px;
    margin: auto;
    border-radius: 20px;
    border-left: 5px solid darkgrey;
    border-right: 5px solid darkgrey;
    text-align:center;
}
.clan {
    font-family: Matura MT Script Capitals;
    font-style: italic;
    font-size:40px;
    color: blue;
    text-shadow: 2px 2px 6px grey;
    border-bottom: 2px dotted grey;
}
.cadre {
    border-radius: 7px 7px 7px 7px;
    margin: auto;
    background: url(http://papillonvolant.p.a.pic.centerblog.net/o/vinta-parch-1.jpg);
    box-shadow: 2px 2px 6px grey;
    padding:10px;
    width: 90%;
}
.titre {
    font-variant: small-caps;
    font-family: papyrus;
    font-size: 20px;
    border-bottom: 3px solid darkblue;
    text-shadow: 2px 2px 6px white;
    color: darkblue;
}
 
/*FIN MISE EN FORME FICHE DE PRESENTATION*/

Et coder le l'image de fond qui va changer directement dans le codage html de la fiche, comme ça :

Code:

<div class="fond" style="background-image: url(URL DE L'IMAGE);">
 
<span class="clan">Clan Sakuma</span>
 
 
  
<div class="cadre"><div class="titre">« Citation ou phrase »</div>
<img src="http://farm4.static.flickr.com/3595/3411509654_eb49c0d1e2_m.jpg" style="border:5px solid black;" />
 
<div style="width:518px; margin: auto;background-color:#C0C0C0; border-right: 4px solid black; border-left: 4px solid black; border-bottom: 12px solid black;"><div style="background:black; color:white; font-family:'lucida calligraphy'; font-size:14px; text-transform:uppercase; text-align:center;">INFOS CAPITALES :</div><div style="margin-top:4px; overflow:auto; height:110px; text-align: center;">
[font=lucida calligraphy][b]Nom & Prénom :[/b][/font] [i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Clan :[/b][/font] [i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Titre :[/b][/font] [i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Age :[/b][/font] [i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Armes:[/b][/font] [i][font=Georgia]ICI[/font][/i]
[font=lucida calligraphy][b]Plus grande peur:[/b][/font] [i][font=Georgia]ICI[/font][/i]
</div></div></div>
  
  
<div class="cadre"><div class="titre">Mon Physique</div>
<div style="border-radius:20px; height:300px; overflow:auto;">
[i][font=Georgia]ECRIVEZ ICI (une dizaine de lignes sont suffisantes) [/font][/i]
</div></div>
  
  
<div class="cadre"><div class="titre">Mon Caractère</div>
<div style="border-radius:20px; height:300px; overflow:auto;">
[i][font=Georgia]ECRIVEZ ICI (une vingtaine de lignes sont suffisantes) [/font][/i]
</div></div>
  
  
<div class="cadre"><div class="titre">Mon Histoire</div>
<div style="border-radius:20px; height:300px; overflow:auto;">
[i][font=Georgia]ECRIVEZ ICI (une trentaine de lignes sont suffisantes) [/font][/i]
</div></div>
  
  
<div class="cadre" style="border: 5px solid darkblue; padding:0;"><div style="font-size:20px; background-color:darkblue; color:white; width:100%; padding: 5px 0;">Eh, toi, derrière ton écran.</div>
[b]Prénom / Surnom :[/b][i][font=Georgia]ICI[/font][/i]
[b]Age :[/b][i][font=Georgia]ICI[/font][/i]
[b]Comment avez vous connu le forum:[/b][i][font=Georgia]ICI[/font][/i]
[b]Qu'en pensez-vous :[/b][i][font=Georgia]ICI[/font][/i]
[b]Coca ou Pepsi ? :[/b][i][font=Georgia]ICI[/font][/i]
[b]la fréquence de votre présence ? :D:[/b][i][font=Georgia]ICI[/font][/i]
 
</div>
 
</div>

En remplaçant, tout au début, URL DE L'IMAGE par l'url de l'image que vous voulez mettre en fond ^^

[Luke13]

Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii !!!

Tu es invité d'honneur sur mon forum si tu veux =p