Problème code Fiches

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

Résolu Problème code Fiches

Message par Luke13 le Jeu 12 Déc 2013 - 19:05

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


Dernière édition par Luke13 le Mer 18 Déc 2013 - 15:30, édité 1 fois

Luke13
**

Messages : 50
Inscrit(e) le : 23/07/2013

http://shin-kabuki-rpg.forums-rpg.com/
Luke13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code Fiches

Message par Luke13 le Ven 13 Déc 2013 - 14:29

Up =)

Luke13
**

Messages : 50
Inscrit(e) le : 23/07/2013

http://shin-kabuki-rpg.forums-rpg.com/
Luke13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code Fiches

Message par Luke13 le Dim 15 Déc 2013 - 14:42

Up

Luke13
**

Messages : 50
Inscrit(e) le : 23/07/2013

http://shin-kabuki-rpg.forums-rpg.com/
Luke13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code Fiches

Message par MlleAlys le Lun 16 Déc 2013 - 14:02

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*/


Dernière édition par MlleAlys le Mer 18 Déc 2013 - 12:48, édité 1 fois

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code Fiches

Message par Luke13 le Lun 16 Déc 2013 - 23:58

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 ?

Luke13
**

Messages : 50
Inscrit(e) le : 23/07/2013

http://shin-kabuki-rpg.forums-rpg.com/
Luke13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code Fiches

Message par MlleAlys le Mar 17 Déc 2013 - 16:53

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

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code Fiches

Message par Luke13 le Mar 17 Déc 2013 - 17:44

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 ?

Luke13
**

Messages : 50
Inscrit(e) le : 23/07/2013

http://shin-kabuki-rpg.forums-rpg.com/
Luke13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code Fiches

Message par MlleAlys le Mar 17 Déc 2013 - 18:09

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

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code Fiches

Message par Luke13 le Mar 17 Déc 2013 - 18:24

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

Luke13
**

Messages : 50
Inscrit(e) le : 23/07/2013

http://shin-kabuki-rpg.forums-rpg.com/
Luke13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code Fiches

Message par MlleAlys le Mar 17 Déc 2013 - 19:23

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 http://img15.hostingpics.net/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 ?


Dernière édition par MlleAlys le Mer 18 Déc 2013 - 12:48, édité 1 fois

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code Fiches

Message par Luke13 le Mer 18 Déc 2013 - 11:17

Je dois changer cette image dans chaque fiche :

background-image: url('http://img15.hostingpics.net/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

Luke13
**

Messages : 50
Inscrit(e) le : 23/07/2013

http://shin-kabuki-rpg.forums-rpg.com/
Luke13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code Fiches

Message par MlleAlys le Mer 18 Déc 2013 - 12:53

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

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code Fiches

Message par Luke13 le Mer 18 Déc 2013 - 15:30

Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii !!!

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

Luke13
**

Messages : 50
Inscrit(e) le : 23/07/2013

http://shin-kabuki-rpg.forums-rpg.com/
Luke13 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