Sujets similaires

Bonjour, Bonsoir

Voilà j'ai un petit soucis avec les codes et spoiler, bien évidemment j'ai déjà fait des recherches etc. Mais je n'ai rien trouvé de concluant.
Je commencerai donc par le premier problème qui me semble le plus simple, celui des spoiler.
Donc j'ai modifié mon spoiler, mais au lieu de modifier les traits noirs, ca a fait un cadre autour :

code élargit - petit problème avec Code et spoiler Image%203

code élargit - petit problème avec Code et spoiler Image%203

Donc voilà j'aimerai que le cadre arrondi soit au niveau des traits noirs et non autour.

Mon CSS :

Code:: .spoiler{
font-style: oblique;
background-color: #d9d9d9;
border: 2px solid #631322;
-moz-border-radius : 10px 10px 10px 10px;
text-align:justify;
padding:10px;}

Ensuite problème un peu plus complexe, je pense.
Lorsque j'attribue une préentation spécifique dans un post (fiche de présentation etc), le code dépasse de la présentation, et ca manque cruellement d'esthétisme.

code élargit - petit problème avec Code et spoiler Image%202

code élargit - petit problème avec Code et spoiler Image%202

Donc on m'a donné un code pour réduire la longueur du code (ce qui marche d'ailleurs) mais le problème c'est qu'ensuite dans un post normal, l'écriture dépasse du cadre. Donc ma question est y a t'il un moyen pour appliquer la redimension que dans certains messages ? J'ai pensé a créer une nouvelle class dans le CSS et à l'insérer ensuite dans le sujet, mais ou et comment ?
Si je ne suis pas assez clair n'hésitez pas à me demander.

CSS que l'on m'a donné pour réduire la longueur :

Code:: .code {
width: Xpx;
padding:10px;
display : block }

Je vous remercie de m'aider et de perdre un peu de votre temps pour moi Smile

Bonne Journée.

Bonjour,

Pour les spoilers, remplaces ton code actuel par celui-ci :

Code:: .spoiler_content,
.spoiler_closed {
font-style: oblique;
background-color: #d9d9d9;
border: 2px solid #631322;
-moz-border-radius : 10px 10px 10px 10px;
text-align:justify;
padding:10px;
}

Pour ton problème avec le code qui dépasse, je peux avoir le HTML de la fiche et le CSS pour faire des tests ?

Merci.

Tout d'abord merci pour les Spoiler c'est parfait !

Ensuite je te passe tout ca :

Code HTML de la fiche :

Code:: <center><div class="fond"><div class="entete">[center]
<div style="line-height: 10px;"><span style="font-size: 28px; font-family: Tahoma; color: #000000; ">[b]D[/b]emande</span>
<span style="font-size: 10px; font-family: Time New Roman; letter-spacing: 2px; text-transform: uppercase; color: #FFFFFF; margin-left: 120px;">de [size=18]Partenariat[/size]</span></div>[/center]</div>
<blockquote> [color=white]Titre du forum/site/blog :[/color]
[color=white]Type de forum :[size=9][i] rpg, graphique, autre (préciser avec détails pour chaque type) etc.[/i][/size][/color]
[color=white]Adresse de votre forum/site/blog :[/color]
[color=white]Bouton codé : [/color]
[code][url=lien de votre forum][img]bouton de votre forum[/img][/url]
[/code]
</blockquote></div></center>

le CSS qui s'en rattache en espérant ne pas en oublier :

Code:: div.entete {
width:500px;
font-family: georgia;
text-align: center;
font-size: 20px;
border-bottom: 5px solid #631322;
color: #868078;
letter-spacing: 1px;
display: block;
-moz-border-radius:10px;
}

div.fond {
background-color: #414445;
width:500px;
font-family: georgia;
text-align: justify;
font-size: 12px;
-moz-border-radius: 20px 20px 0px 0px;
border-right: solid 1px #696969; /* entête couleur cadre droite */
border-left: solid 1px #696969; /* entête couleur cadre gauche */
border-bottom: solid 1px #696969; /* entête couleur cadre bas */
border-top: solid 1px #696969; /* entête couleur cadre haut */
}

Voila merci beaucoup, j'espère que tout y sera. Encore une fois merci de t'intéresser à mon problème.

Coucou

Alors, essaye comme ceci :

Code:: <center><div class="fond"><div class="entete">[center]
<div style="line-height: 10px;"><span style="font-size: 28px; font-family: Tahoma; color: #000000; ">[b]D[/b]emande</span>
<span style="font-size: 10px; font-family: Time New Roman; letter-spacing: 2px; text-transform: uppercase; color: #FFFFFF; margin-left: 120px;">de [size=18]Partenariat[/size]</span></div>[/center]</div>
<blockquote> [color=white]Titre du forum/site/blog :[/color]
[color=white]Type de forum :[size=9][i] rpg, graphique, autre (préciser avec détails pour chaque type) etc.[/i][/size][/color]
[color=white]Adresse de votre forum/site/blog :[/color]
[color=white]Bouton codé : [/color]
<div class="codelogo">[url=lien de votre forum][img]bouton de votre forum[/img][/url]
</div>
</blockquote></div></center>

Et tu rajoute ceci dans le CSS :

Code:: div.codelogo {
font-family: Courier,'CourierNew',sans-serif; font-size: 11px; color: #ffffff;background-color: #a0444a; border: #efe4d4; border-style: solid;border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px}

Bien sûr, il faut que tu personnalises le div.codelogo Wink

Désolée de l'attente je n'étais pas chez moi aujourd'hui. Et merci de ta réponse !

Ca marche bon il n'y a pas le mot code inscrit au dessus mais le principale y est, merci beaucoup de ton aide !

Encore une fois merci Very Happy

Pour changer la couleur du texte à l'intérieur, il te suffit de changer le :

Code:: color: #D4D4D4;

Par exemple, essaye de remplacer le div.codelogo par :

Code:: div.codelogo {
font-family: Courier,'CourierNew',sans-serif; font-size: 11px; color: #631322; background-color: #d9d9d9; border: #631322; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; padding: 10px;
text-align:justify;
-moz-border-radius : 10px 10px 10px 10px; }

Et j'ai la preuve que ça marche :

code élargit - petit problème avec Code et spoiler Preuved

Alors justement, j'ai vu ma bourde par la suite et j'ai édité mon message par la suite mais pas assez vite cependant.

Et malheureusement y a encore des trucs qui bug -_-. regarde dans ton exemple dans la partie compris dans le code, il en manque un bout, l'image.

Et dans un autre post j'ai essayé de l'appliquer, le code et ca n'as pas donné les codes mais ca l'a appliqué sur le texte :

code élargit - petit problème avec Code et spoiler Image%205

code élargit - petit problème avec Code et spoiler Image%205

Encore une fois merci Smile

Essaye de mettre ceci dans ton CSS :

Code:: .code {
width : auto;
}

Et essaye ce code HTML :

Code:: <center><div class="fond"><div class="entete">[center]
<div style="line-height: 10px;"><span style="font-size: 28px; font-family: Tahoma; color: #000000; ">[b]D[/b]emande</span>
<span style="font-size: 10px; font-family: Time New Roman; letter-spacing: 2px; text-transform: uppercase; color: #FFFFFF; margin-left: 120px;">de [size=18]Partenariat[/size]</span></div>[/center]</div>
<blockquote> [color=white]Titre du forum/site/blog :[/color]
[color=white]Type de forum :[size=9][i] rpg, graphique, autre (préciser avec détails pour chaque type) etc.[/i][/size][/color]
[color=white]Adresse de votre forum/site/blog :[/color]
[color=white]Bouton codé : [/color]
<div class="codelogo">[url=lien de votre forum][img]bouton de votre forum[/img][/url]
</div>
</blockquote></div></center>

Nan malheureusement ca ne change rien :S

Par contre ce qui est bizarre, c'est que je n'ai pas le même problème avec les spoiler eux ils s'adaptent à la mise en page

Je vais essayer avec les citation aussi voir ce que ca donne. En tout cas merci de chercher pour moi Smile

EDIT : De même les citations ne dépasse pas de la mise en page.

Dans ce cas-là, on pourrait ajuster les codes à la taille de ta fiche mais ça affecterai tout le forum et si tu dis que tu n'as pas accès au CSS du forum en question, ça risque d'être chaud.

Sinon, pour faire plus simple, tu met la balise [code][/code] entre [spoiler] et [/spoiler].

Mhhh... On va attendre Tech. Peut-être que la solution m'est passée sous le nez .

Récap

Si j'ai bien compris, la balise code dépasse toujours de la case mais pas les autres ?

Je peux avoir le lien où se trouve la présentation ?

Tout d'abord merci tu temps que vous m'accorder.

Sinon pour récapituler :

En gros j'aimerai que le code "s'adaptent" à la mise en page du topic sinon ils dépassent du fond que l'on met comme ici :

Spoiler:

Ensuite un premier test à été effectué de réduire la longueur du champs code grâce à ce CSS

Code:: .code {
width: Xpx;
padding:10px;
display : block }

Ce code marche, le champs code ne dépasse plus de la mise en page mais, le problème c'est que par la suite dans un post normal sans mise en page particulière que tout membre pourrait poster, on a ceci :

Spoiler:

D'où la nécessité de "l'adaptation" du code aux mise en page et l'idée de créer une nouvelle class pour l'insérer dans les mises en pages, ce qu'a fait Haricoow d'ailleurs et je l'en remercie avec Ceci :

Code:: div.codelogo {
font-family: Courier,'CourierNew',sans-serif; font-size: 11px; color: #631322; background-color: #d9d9d9; border: #631322; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; padding: 10px;
text-align:justify;
-moz-border-radius : 10px 10px 10px 10px; }

et en retirant ceci du CSS afin que les codes des messages retrouvent leurs allures normales :

Code:: .code {
width: Xpx;
padding:10px;
display : block }

Le problème c'est que le code donné plus haut par Haricoow, marche à moitié ; dans un post, il entoure convenable le texte mais sauf qu'il applique le style au lieu de montrer les codes.

Spoiler:

Et sinon je faisais la remarque que en n'ayant rien changer aux codes des spoilers, ils s'adaptent à la mise en page et donc en gros j'aimerai que les codes fassent de même :

Spoiler:

En ce qui concernent le lien : http://sanctumbellum.forumactif.com/partenariats-f31/demande-de-partenariat-uc-t31.htm#174

Avec le code HTML du topic :

Code:: <center><div class="fond"><div class="entete">[center]
<div style="line-height: 10px;"><span style="font-size: 28px; font-family: Tahoma; color: #000000; ">[b]D[/b]emande</span>
<span style="font-size: 10px; font-family: Time New Roman; letter-spacing: 2px; text-transform: uppercase; color: #FFFFFF; margin-left: 120px;">de [size=18]Partenariat[/size]</span></div>[/center]</div>
<blockquote> [color=white]Titre du forum/site/blog :[/color]
[color=white]Type de forum :[size=9][i] rpg, graphique, autre (préciser avec détails pour chaque type) etc.[/i][/size][/color]
[color=white]Adresse de votre forum/site/blog :[/color]
[color=white]Bouton codé : [/color]
<div class="codelogo">[url=lien de votre forum][img]bouton de votre forum[/img][/url]
[b][i]Test Test[/i][/b]
</div>
</blockquote>
</div></center>

Et le CSS actuel :

Code:: .code {
background-color: #d9d9d9;
-moz-border-radius : 10px 10px 10px 10px;
border: 2px solid #631322;
text-align:justify;
padding:10px;

}

div.codelogo {
font-family: Courier,'CourierNew',sans-serif; font-size: 11px; color: #000000;background-color: #d9d9d9; border: #631322; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; padding: 10px;
text-align:justify;
-moz-border-radius : 10px 10px 10px 10px;
}

J'espère que ce sera plus clair cette fois-ci et que vous pourrez m'aider Smile

. Je vous remercie de perdre du temps pour moi. Et je tien à préciser que si je peux toucher au CSS, je suis admin et fondatrice x), je ne sais pas pourquoi tu as pensé le contraire Haricoow Wink

Bonne Journée.

Bonjour,

Code HTML :

Code:: <center><div class="fond"><div class="entete">[center]
<div style="line-height: 10px;"><span style="font-size: 28px; font-family: Tahoma; color: #000000; ">[b]D[/b]emande</span>
<span style="font-size: 10px; font-family: Time New Roman; letter-spacing: 2px; text-transform: uppercase; color: #FFFFFF; margin-left: 120px;">de [size=18]Partenariat[/size]</span></div>[/center]</div>
<blockquote> [color=white]Titre du forum/site/blog :[/color]
[color=white]Type de forum :[size=9][i] rpg, graphique, autre (préciser avec détails pour chaque type) etc.[/i][/size][/color]
[color=white]Adresse de votre forum/site/blog :[/color]
[color=white]Bouton codé : [/color]
[code][url=lien de votre forum][img]bouton de votre forum[/img][/url]
[b][i]Test Test[/i][/b]
[/code]
</blockquote>
</div></center>

Code CSS : (Supprime celui de Haricoow)

Code:: .fond .code {
font-family: Courier,'CourierNew',sans-serif; font-size: 11px; color: #000000;background-color: #d9d9d9; border: #631322; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; padding: 10px;
text-align:justify;
-moz-border-radius : 10px 10px 10px 10px;
}

Cela devrait être bon il me semble Smile

pour être sur de ne pas faire une boulette, je mets ce code à la place du

Code:: .code

En tout cas, merci je vais tester tout de suite.

Normalement pas besoin.

Tant que tu retires celui de Haricoow c'est bon.

Mais tu peux retirer aussi l'autre si tu préfères.

J'ai essayé avec et sans l'autre code :/ Et rien a faire ça dépasse encore :/
Biensur j'ai supprimé le code de haricoow et remplacer le code HTML. Normalement j'ai tout fait en règle.

Navré de t'importuner encore :/

Je sais pourquoi ^^

J'ai bêtement repris le CSS de Haricoow en changeant juste les class ^^

Il faut rajouter une ligne au CSS.
Rajoute à mon CSS la ligne suivante : widht: Xpx;
Le X étant bien sûr à choisir, il faut faire des test Wink

merci encore a toi Smile

mais malheureusement ca n'a rien changé >.<

mon CSS :

Code:: .code {
background-color: #d9d9d9;
-moz-border-radius : 10px 10px 10px 10px;
border: 2px solid #631322;
text-align:justify;
padding:10px;

}

.fond .code {
font-family: Courier,'CourierNew',sans-serif; font-size: 11px; color: #000000; background-color: #d9d9d9; border: #631322; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; padding: 10px;
text-align:justify;
-moz-border-radius : 10px 10px 10px 10px;
width: 150px;
}

J'ai mis 150 px justement pour voir la différence mais ça n'a pas bougé d'un pouce :/
et j'ai aussi essayé en enlevant la partie .code, mais rien a faire çà dépasse encore. Si tu réussis à régler ce problème, je t'édifie un temple x)