Décalage texte en dehors bloc

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

Résolu Décalage texte en dehors bloc

Message par Melodiam le Mer 2 Sep 2015 - 21:08

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://louloutest.forumactif.org/

Description du problème

Bonjourr ! Encore moi... :-)

Voilà, j'ai un petit souci avec le code de fiche de présentation de mon forum...

Voyez-vous quand je tiens à écrire plus que ce qui est prévu, le texte déborde au lieu de me faire un scrollbar ou je ne sais plus comment on appelle ça ... Hum.

La personne ayant codé cette fiche est injoignable, je l'ai récupéré sur un forum où il n'y a plus personne..

Sauriez vous quel code, ou petite astuce, il faut que je fasse pour que le texte ne déborde pas mais glisse, avec une barre discrète sur le côté là ? Vous voyez ? xD

PS : voilà le code en question ->

Code:
<style> .text1{font-family: tahoma; font-size: 11px; color: #898989} .text1:hover{font-family: tahoma; font-size: 11px; color: #b47760} .text2{font-family: georgia; font-size: 28px; font-style: italic; letter-spacing: -2px; color: #FE203E} .text2:hover{font-family: georgia; font-size: 28px; font-style: italic; letter-spacing: -2px; color: #d6a1bf}</style>

<center><div style="width: 600px; border: 20px double white;height: auto; background-image: url(http://oi56.tinypic.com/120p5wk.jpg);">

<div class="text2">let's play a little drinking game ;</div>
<div style="width: 400px; height: 100px; background-color: #FEFEFE; border: 5px solid #FEFEFE; background-image: url(http://i62.tinypic.com/2cdk84i.jpg); box-shadow: 0px 0px 1px #C8C8C8;"></div>
<div style="font-size: 24px; color: #fcab85;">▲▼</div>
<table><tr><td><div style="width: 200px; height: 260px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; text-align: justify; overflow: auto; line-height: 9px; padding: 5px"><div class="text1">[color=#FE203E]NOM DU DON Ϟ[/color] Écrire ici.</div><br><div class="text1">[color=#FE203E]EXPLICATIONS Ϟ[/color] Expliquez-nous votre don en quelques lignes, ses effets, la manière dont il fonctionne, sa durée mais aussi le contre-coup négatif qu'il a sur vous ! Pas de pouvoir de surhomme hein... soyez originaux !
</div></div></td><td><table><tr><td><div style="width: 200px; height: 260px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; line-height: 9px; padding: 5px"><div class="text1">[color=#FE203E]NOM Ϟ[/color] écrire ici.</div><div class="text1">[color=#FE203E]PRÉNOM(S) Ϟ[/color] écrire ici.</div><br><div class="text1">[color=#FE203E]ÂGE Ϟ[/color] écrire ici.</div><div class="text1">[b][color=#FE203E]INSPIRATION Ϟ[/color] Pour les personnages provenant de l'univers ghibli :  quel film ?</div><div class="text1">[color=#FE203E]ORIENTATION Ϟ[/color] écrire ici.</div><br><div class="text1">[color=#FE203E]CLASSE Ϟ[/color] sorcier/mage ?</div><div class="text1">[color=#FE203E]ANNEE Ϟ[/color] écrire ici.</div></div></td></tr></table></td></tr></table>

<div class="text2">[color=#97534b]it's one drink for everytime ;[/color]</div>

<table><tr><td><div style="width: 200px; height: 200px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; line-height: 9px; padding: 5px; text-align: justify"><div class="text1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</div></div></td><td><div style="width: 200px; height: 200px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; line-height: 9px; padding: 5px; text-align: justify"><div class="text1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></div></td></tr></table></br>
<div style="font-size: 24px; color: #cd4892;">▲▼</div>
<div style="width: 415px; height: 350px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; line-height: 9px; padding: 10px;"><div class="text1"><br>
[/b]
[justify]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/justify]
[b]
</div></div>

<div style="width: 400px; height: 100px; background-color: #FEFEFE; border: 5px solid #FEFEFE; background-image: url(http://i59.tinypic.com/zv31uv.jpg); box-shadow: 0px 0px 1px #C8C8C8;"></div>

<div class="text2">[color=#ff8640]you've made me go insane.[/color]</div>
<table><tr><td><div style="width: 200px; height: 100px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; line-height: 9px; padding: 5px"><div class="text1">[b]PSEUDO Ϟ[/b] écrire ici.</div><div class="text1">[b]AGE Ϟ[/b] écrire ici.</div><br><div class="text1">[b]J'AI CONNU LE FORUM Ϟ[/b] grâce à écrire ici.</div><br><div class="text1">[b]AVATAR Ϟ[/b] écrire ici.</div></div></td><td><div style="width: 200px; height: 100px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; line-height: 9px; padding: 5px"><div class="text1">[b]LE MOT DE LA FIN Ϟ[/b] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><br><div class="text1">[b]CODE Ϟ[/b]<br>écrire ici.</div></div></td></tr></table>
<br><br><div class="text1">[size=9](c) MEI SUR [url=http://www.apple-spring.com]APPLE SPRING[/url][/size][url=http://www.apple-spring.com][/url]</div></div></center>[/b]


Merci !!!! Very Happy


Dernière édition par Melodiam le Mer 2 Sep 2015 - 21:47, édité 1 fois

Melodiam
****

Messages : 206
Inscrit(e) le : 16/04/2012

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

Résolu Re: Décalage texte en dehors bloc

Message par Teurancher le Mer 2 Sep 2015 - 21:16

Yosh,
Remplacer l'intégralité du code par celui-ci:

Code:
<style> .text1{font-family: tahoma; font-size: 11px; color: #898989} .text1:hover{font-family: tahoma; font-size: 11px; color: #b47760} .text2{font-family: georgia; font-size: 28px; font-style: italic; letter-spacing: -2px; color: #FE203E} .text2:hover{font-family: georgia; font-size: 28px; font-style: italic; letter-spacing: -2px; color: #d6a1bf}</style>

<center><div style="width: 600px; border: 20px double white;height: auto; background-image: url(http://oi56.tinypic.com/120p5wk.jpg);">

<div class="text2">let's play a little drinking game ;</div>
<div style="width: 400px; height: 100px; background-color: #FEFEFE; border: 5px solid #FEFEFE; background-image: url(http://i62.tinypic.com/2cdk84i.jpg); box-shadow: 0px 0px 1px #C8C8C8;"></div>
<div style="font-size: 24px; color: #fcab85;">▲▼</div>
<table><tr><td><div style="width: 200px; height: 260px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; text-align: justify; overflow: auto; line-height: 9px; padding: 5px"><div class="text1">[color=#FE203E]NOM DU DON Ϟ[/color] Écrire ici.</div><br><div class="text1">[color=#FE203E]EXPLICATIONS Ϟ[/color] Expliquez-nous votre don en quelques lignes, ses effets, la manière dont il fonctionne, sa durée mais aussi le contre-coup négatif qu'il a sur vous ! Pas de pouvoir de surhomme hein... soyez originaux !
</div></div></td><td><table><tr><td><div style="width: 200px; height: 260px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; line-height: 9px; padding: 5px"><div class="text1">[color=#FE203E]NOM Ϟ[/color] écrire ici.</div><div class="text1">[color=#FE203E]PRÉNOM(S) Ϟ[/color] écrire ici.</div><br><div class="text1">[color=#FE203E]ÂGE Ϟ[/color] écrire ici.</div><div class="text1">[b][color=#FE203E]INSPIRATION Ϟ[/color] Pour les personnages provenant de l'univers ghibli :  quel film ?</div><div class="text1">[color=#FE203E]ORIENTATION Ϟ[/color] écrire ici.</div><br><div class="text1">[color=#FE203E]CLASSE Ϟ[/color] sorcier/mage ?</div><div class="text1">[color=#FE203E]ANNEE Ϟ[/color] écrire ici.</div></div></td></tr></table></td></tr></table>

<div class="text2">[color=#97534b]it's one drink for everytime ;[/color]</div>

<table><tr><td><div style="width: 200px; height: 200px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; line-height: 9px; padding: 5px; text-align: justify; overflow: auto;"><div class="text1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</div></div></td><td><div style="width: 200px; height: 200px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; line-height: 9px; padding: 5px; text-align: justify"><div class="text1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></div></td></tr></table></br>
<div style="font-size: 24px; color: #cd4892;">▲▼</div>
<div style="width: 415px; height: 350px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; line-height: 9px; padding: 10px;"><div class="text1"><br>
[/b]
[justify]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/justify]
[b]
</div></div>

<div style="width: 400px; height: 100px; background-color: #FEFEFE; border: 5px solid #FEFEFE; background-image: url(http://i59.tinypic.com/zv31uv.jpg); box-shadow: 0px 0px 1px #C8C8C8;"></div>

<div class="text2">[color=#ff8640]you've made me go insane.[/color]</div>
<table><tr><td><div style="width: 200px; height: 100px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; line-height: 9px; padding: 5px"><div class="text1">[b]PSEUDO Ϟ[/b] écrire ici.</div><div class="text1">[b]AGE Ϟ[/b] écrire ici.</div><br><div class="text1">[b]J'AI CONNU LE FORUM Ϟ[/b] grâce à écrire ici.</div><br><div class="text1">[b]AVATAR Ϟ[/b] écrire ici.</div></div></td><td><div style="width: 200px; height: 100px; background-color: #FEFEFE; border: 5px solid #FEFEFE; box-shadow: 0px 0px 1px #C8C8C8; line-height: 9px; padding: 5px"><div class="text1">[b]LE MOT DE LA FIN Ϟ[/b] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><br><div class="text1">[b]CODE Ϟ[/b]<br>écrire ici.</div></div></td></tr></table>
<br><br><div class="text1">[size=9](c) MEI SUR [url=http://www.apple-spring.com]APPLE SPRING[/url][/size][url=http://www.apple-spring.com][/url]</div></div></center>[/b]

J'ai rajouté la partie suivante qui sert à faire apparaître une scrollbar et d'éviter que le texte ne dépasse le cadre:
Code:
overflow: auto;

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage texte en dehors bloc

Message par Melodiam le Mer 2 Sep 2015 - 21:48

Merci de m'avoir aidé une nouvelles fois ! Very Happy

C'est nickel, ça marche parfaitement hehehe

Melodiam
****

Messages : 206
Inscrit(e) le : 16/04/2012

Melodiam 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