Sujets similaires

Bonjour tout le monde!

J'aurais une petite question afin de savoir si le forum peut le faire
s'il vous plais:

Pensez-vous que cela est possible de faire en
sorte que les membres d'un forum écrivent sur une image. C'est à dire,
qu'on met une image et que (peut-être grâce à des codes) on peut marquer
ce qu'on veut quand on veut dessus?
Je veux dire, une sorte de formulaire sur une image que n'importe quel membre pourrait reprendre et remplir?

merci d'avance de votre
réponse! Bonne soirée!

Bonsoir,

Pour pouvoir écrire sur une image, on inscrit dans la class pour laquelle on souhaite voir s'afficher une image de fond, le code background-image:url("URL_DE_TON_IMAGE");

Après, je ne comprends pas tellement ton idée de formulaire, si tu pouvais l'expliquer davantage et plus clairement ça aiderait. Mais si tu veux par exemple que le fond des messages ait une image c'est dans la class textarea qu'il faut placer le code que je t'ai donné plus haut. Sinon pour créer ton propre formulaire je pense que tu devras créer une class ou id personnalisée.

mais le truc c'est que je suis nul en ce qui concerne tout ça. C'est pour ça que je voulais savoir si c'était possible...

Je tente de mieux expliquer:lol (désolé si je suis pas très clair)

mais en fait, je voudrais créer un formulaire par exemple de présentation, mais qu'il soit intégrer dans une image, par exemple: ICI
mais que tout les membres peuvent écrire dessus en fait!

D'accord je comprends mieux.
Alors, donc déjà c'est tout à fait possible. Pour cela comme je l'avais déjà suggéré dans mon précédant message, tu devra créer un id ou une class pour mettre en forme ce formulaire. Je vais te montrer comment faire en illustrant avec un exemple.

capture d'écran du résultat:

Spoiler:

Pour le réaliser, j'ai été dans mon CSS et j'ai créé un nouvel id et plusieurs class :

Cette première partie est un id et il joue sur le plus important : la bordure, l'image de fond et la définition de la hauteur/largeur du formulaire.

#formubody{
background-image:url("https://nsa14.casimages.com/img/2010/05/17/100517115525257747.jpg"); /*Ceci est le code qui permet de glisser une image derrière ton texte. /!\ Mon image étant ici un pattern, je veux évidement qu'il se répète pour qu'il recouvre toute la superficie de la zone de texte mais si tu souhaite user une image qui a une taille bien définie et que tu ne veux pas qu'elle se répète, tu devra alors taper (à côté ou en-dessous) le code, repeat:no-repeat; */
padding:5px; /*le padding ici, permet que le texte ne vienne pas toucher et déborder dans la bordure du formulaire. Tu peux supprimer ce code si tu ne veux pas de marge ou change la valeur pour rétrécir ou agrandir la marge. */
width:450px; /* Ce code permet de jouer sur la largeur que tu veux donner à ton formulaire. Si tu souhaite que ce dernier prenne toute la page, il te suffit d'enlever ce code. */
height:450px; /* Pareil que pour avant sauf que ce code définit la hauteur de ton formulaire. */
-moz-border-radius:11px; /*C'est ce code qui a permit l'arrondissement des angles de la bordure. Si tu ne souhaite pas avoir des bordure arrondie, il faut enlever ce code. */
border:solid 5px #999988; /*C'est ce qui a permit de définir la bordure en elle-même : "solid" a défini la nature de la bordure, soit une ligne continue. "5px" a défini l'épaisseur de la ligne et "#999988" la couleur. */
}

Pour que cette mise en forme s'applique dans un message, j'ai tapé ceci dans le dit message:

Code:: <div id="formubody">
</div>

Cette seconde partie est une class et elle permet la mise en forme du titre principal du formulaire

.formutitle {
font-family:Georgia; /*Ce code permet de modifier la police d'écriture. */
color:#666655;
font-size:20px; /*Celui-ci, de modifier la taille de la police. */
text-shadow:1px 1px 1px #ffffff; /* Ce code permet d'ajouter un effet d'ombrage sur le texte. Avec les valeurs que j'ai mises ici, l'ombrage est brut et donne presque l'impression d'un contour en décallé. */
text-transform:lowercase; /*ce code permet de transformer toutes les lettres en minuscules automatiquement. */
letter-spacing:3px; /* Ce code créé un espacement entre les lettres */
font-weight:lighter; /* Ce code permet que le texte soit fin (slim, pas gras quoi x3) */
border-bottom:solid 2px #666655; /* Le "-bottom" rajouté au "border" permet que seule la bordure inférieure soit touchée par la mise en forme. */
margin-top:10px; /*Comme tu as pu le constater, il y a un espace entre le titre et la bordure supérieure du formulaire. Et bien, c'est ce margin qui en est responsable. Comme précédemment, le "-top" indique que seul le haut aura cette marge. */
}

Pour que cette mise en forme s'applique dans un message, j'ai tapé ceci entre la balise "div id":

Code:: <div class="formutitle">Titre du formulaire</div>

Cette troisième partie est une class et elle permet la mise en forme du/des titre(s) secondaire(s) du formulaire

.formusecondarytitle {
font-family:Georgia;
color:#666655;
font-size:16px;
text-align:right; /*Cela permet d'aligner le texte à droite */
text-transform:lowercase;
letter-spacing:2px;
font-weight:lighter;
border-top:dashed 1px #666655; /*Le "dashed" permet d'avoir une bordure en pointillés. */
margin-top:10px;
text-shadow:0px 0px 5px #000000; /* Ici, les valeurs ont changé et nous n'avons plus une ombre brut, mais une ombre étalée et floutée. */
}

Pour que cette mise en forme s'applique dans un message, j'ai tapé ceci à la suite, toujours entre la balise "div id":

Code:: <div class="formusecondarytitle">Titre secondaire</div>

Cette quatrième partie est une class et elle permet la mise en forme des champs.

.formuchamps {
font-family:Verdana;
color:#666655;
font-size:12px;
text-align:left; /*Ici le texte est aligné à gauche */
font-variant:small-caps; /* Le texte sera automatiquement transformé en de petites majuscules. */
font-weight:bolder; [siee=9]/* Contrairement à avant avec la notion "lighter", on rend ici le texte plus gras. */[/size]
margin-top:10px;
}

Pour que cette mise en forme s'applique dans un message, j'ai tapé ceci à la suite, toujours entre la balise "div id":

Code:: <div class="formuchamps">Champs 1 :</div>

Cette cinquième et dernière partie est une class et elle permet la mise en forme du texte

.formutext {
font-family:georgia;
color:#666655;
font-size:12px;
text-align:justify; /* Le texte sera automatiquement justifié... */
font-style:italic; /* ... et mis en italique */
}

Pour que cette mise en forme s'applique dans un message, j'ai tapé ceci à la suite, toujours entre la balise "div id":

Code:: <div class="formutext">Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</div>

Et finalement, quand on assemble le tout ça donne...

Ca pour le CSS:

Code:

#formubody{
background-image:url("http://nsa14.casimages.com/img/2010/05/17/100517115525257747.jpg");
padding:5px;
width:450Rpx;
height:450px;
-moz-border-radius:11px;
border:solid 5px #999988;
}

.formutitle {
font-family:Georgia;
color:#666655;
font-size:20px;
text-shadow:1px 1px 1px #ffffff;
text-transform:lowercase;
letter-spacing:3px;
font-weight:lighter;
border-bottom:solid 2px #666655;
margin-top:10px;
}

.formusecondarytitle {
font-family:Georgia;
color:#666655;
font-size:16px;
text-align:right;
text-transform:lowercase;
letter-spacing:2px;
font-weight:lighter;
border-top:dashed 1px #666655;
margin-top:10px;
text-shadow:0px 0px 5px #000000;
}

.formuchamps {
font-family:Verdana;
color:#666655;
font-size:12px;
text-align:left;
font-variant:small-caps;
font-weight:bolder;
margin-top:10px;
}

.formutext {
font-family:georgia;
color:#666655;
font-size:12px;
text-align:justify;
font-style:italic;
}
Et ça pour le corps du message :

Code:

<div id="formubody"><div class="formutitle">Titre du formulaire</div>
Blabla blabla blabla blabla blabla (<--- note : texte normal qui n'a pas de mise en forme)
<div class="formusecondarytitle">Titre secondaire</div>
<div class="formuchamps">Champs 1 :</div><div class="formutext">Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</div></div>

Après il faudra juste que tu communique le code pour le corps du message pour que tes membres puisse l'utiliser Wink

.

En espérant avoir pu t'aider,
Symel

Tu m'as aidé c'est sûr, et je t'en remercie! ^^
par contre il faut que je comprenne le code que tu viens de me donner lol
Merci beaucoup en tout cas! ^^

EDIT: Je crois que ça marche pas XD lol ICI
j'ai mis le même code CSS que t'as mis, afin de voir ce que ça donne, mais rien! lol

salut
le code CSS n'est pas dans ton CSS perso.
Il faut que tu colle le css dans le PA/ affichage/ couleurs/ onglets "feuille de style CSS"

Code:: #formubody{
background-image:url("http://nsa14.casimages.com/img/2010/05/17/100517115525257747.jpg");
padding:5px;
width:450Rpx;
height:450px;
-moz-border-radius:11px;
border:solid 5px #999988;
}

.formutitle {
font-family:Georgia;
color:#666655;
font-size:20px;
text-shadow:1px 1px 1px #ffffff;
text-transform:lowercase;
letter-spacing:3px;
font-weight:lighter;
border-bottom:solid 2px #666655;
margin-top:10px;
}

.formusecondarytitle {
font-family:Georgia;
color:#666655;
font-size:16px;
text-align:right;
text-transform:lowercase;
letter-spacing:2px;
font-weight:lighter;
border-top:dashed 1px #666655;
margin-top:10px;
text-shadow:0px 0px 5px #000000;
}

.formuchamps {
font-family:Verdana;
color:#666655;
font-size:12px;
text-align:left;
font-variant:small-caps;
font-weight:bolder;
margin-top:10px;
}

.formutext {
font-family:georgia;
color:#666655;
font-size:12px;
text-align:justify;
font-style:italic;
}

A+

bin c'est ce que j'ai fait XD lol

Peux tu me montrer le code que tu as mis dans ton CSS et dans ton message pour voir si tu n'aurais pas fait une erreur par hasard ?

Edit: Je viens de remarquer que j'ai fait une faute de frappe dans le code de la largeur : width:450Rpx; <--- Enlève ce "R" qui n'as rien à faire là x3. Ça ira déjà mieux.

j'enlève le R dans le CSS et je te dis, si c'est mieux ^^' lol

EDIT: voila pour la css:

Spoiler:

et dans le sujet, j'ai mis:

Spoiler:

ça marche toujours pas ans le "R" lol

Alors, y a plus rien qui cloche au niveau du CSS.
Par contre pour le contenu de ton message c'est pas entre "spoiler" que tu devrais le mettre, mais entre la balise "code" pour que les codes restent et que je puisse voir.
Ensuite, par précaution, regarde que (soit dans ton profil, soit dans les options du messages) le html et le bbcode soit bien activé.
Dans le message, il faut s'assurer que les cases : "Désactiver le HTML dans ce message" et "Désactiver le BBCode dans ce message" soit décochées.

c'est fait justement XD lol
l'image que j'ai mis ne s'affiche pas et comme t'as vu avec le lien le texte reste pareil ^^'

Re-coucou !

Alors, je viens de comprendre où se situe le "problème". Il faut remplacer les guillemets par l'apostrophe (des fois ça prend pas avec l'un ou l'autre ou ça supporte aucun des deux, va savoir pourquoi x3) :

Citation :: #formubody{
background-image:url('http://www.couleurgeek.com/img/ecrire-pere-noel.jpg');
padding:5px;
width:450Rpx;
height:450px;
-moz-border-radius:11px;
border:solid 5px #999988;
}

Et maintenant ça devrait marcher Smile

non ça fonctionne toujours pas regarde ^^' lol
désolé si je pose problème

Alors heu... déja tu à bien enlevé le "R" dans width ? (que j'ai encore oublié d'enlevé)

Si oui et que ça ne marche pas, alors je vais te demander de faire un test:

Dans ton message marque ceci à la place du div id="forumbody":

Code:: <div style="background-image:url('http://www.couleurgeek.com/img/ecrire-pere-noel.jpg');width:450Rpx;height:450px;-moz-border-radius:11px;border:solid 5px #999988;padding:5px;">

Ce qui te donnera :

Code:: <div style="background-image:url('http://www.couleurgeek.com/img/ecrire-pere-noel.jpg');width:450px;height:450px;-moz-border-radius:11px;border:solid 5px #999988;padding:5px;"><div class="formutitle">Titre du formulaire</div>
Blabla blabla blabla blabla blabla (<--- note : texte normal qui n'a pas de mise en forme)
<div class="formusecondarytitle">Titre secondaire</div>
<div class="formuchamps">Champs 1 :</div><div class="formutext">Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</div></div>

Si cela marche, remplace alors le #formubody dans ton CSS par :

Code:: .formubody{
background-image:url("http://nsa14.casimages.com/img/2010/05/17/100517115525257747.jpg");
padding:5px;
width:450px;
height:450px;
-moz-border-radius:11px;
border:solid 5px #999988;
}

Et ensuite de changer dans ton message le div id="formubody" par :

Code:: <div class="formubody">

Ce qui te donnera

Code:: <div class="formubody"><div class="formutitle">Titre du formulaire</div>
Blabla blabla blabla blabla blabla (<--- note : texte normal qui n'a pas de mise en forme)
<div class="formusecondarytitle">Titre secondaire</div>
<div class="formuchamps">Champs 1 :</div><div class="formutext">Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</div></div>

Et ça devrait marcher avec tout ça x3

Bonjour.

Avant de faire tout en tas de test, il faudrait peu être commencer par ne pas mettre n'importe quoi dans le CSS comme ce style de séparation ---------------------.

Tout ce qui n'est pas du code doit être /* commenté */

eh bin je viens d'enlever, ça ne change rien XD La preuve!
XD je suis peut-être maudit!

Coucou,

Je viens d'aller voir sur ton forum et le formulaire est en place correctement. As-tu réussi à régler ton problème ?

eh bin non puisque le formulaire n'apparait toujours pas XD on voit que les texte mais pas l'image ^^'

Quel navigateur utilise tu ?

Depuis la réponce à mon message il y à une image de fond (texture marbrée).
Peut être en remplaçant background-image: par background:.
Avec MSIE le background-image est pas toujours reconnu.