CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Un problème de texte qui déborde | |
| Phantasmagoria
{ Membre hyper-actif }
Messages : 1636
| Hello ^^
Oui j'ai réellement besoin de votre aide pour un petit problème dont je ne suis pas capable de régler toute seule, étant donné que mes connaissances en html sont pas vraiment grandes ><
Voila, j'ai ajouté un texte dans l'un des onglets de ma page d'accueil sauf que ça déborde, j'ai essayé d'installer un scrollbar mais ça n'a pas marché et quand j'ai voulu remettre tout comme au début, bah ... le texte est sortit du cadre et là un bout s'entête à ne plus rentrer dedans xD
Voici le forum en question http://wackenroll.forumotion.com/
Je vous l'accorde c'est très très moche. Je voudrais si c'est possible remettre mon texte dans le cadre et surtout installé une scrollbar pour ne plus avoir une limite dans mon texte. En passant, ma PA était une commande faite par Ikø la reine des pelles (que je remercie again d'ailleurs)
Le code de ma PA : - Code:
-
<table border="0" width="60%" cellspacing="3" style="background-image: url('');"> <tr> <td width="60%" style="vertical-align: top;"> <div class="systeme_onglets"> <div class="onglets"> <span class="onglet_0 onglet" id="onglet_ongl1" onclick="javascript:change_onglet('ongl1');">Le Forum</span> <span class="onglet_0 onglet" id="onglet_ongl2" onclick="javascript:change_onglet('ongl2');">Staff</span> <span class="onglet_0 onglet" id="onglet_ongl3" onclick="javascript:change_onglet('ongl3');">Posts Vacants</span> </div> <div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_ongl1"> <table border="0" width="90%" height="300px"> <tr> <td align="center" width="30%" style="vertical-align: middle;"> </div> <a href="http://wackenroll.forumotion.com/reglement-f1/le-reglement-t48.htm">Règlements</a>
<a href="http://wackenroll.forumotion.com/l-histoire-de-wacken-roll-f3/">Le contexte</a>
<a href="http://wackenroll.forumotion.com/demande-de-rang-f14/les-rangs-disponibles-t6.htm">Rangs disponibles</a>
<a href="http://wackenroll.forumotion.com/questions-et-suggestions-f109/">Des questions?</a>
<a href="http://wackenroll.forumotion.com/partenariat-f70/">Partenariat</a>
</td> <td width="100%" style="vertical-align: center;"><center> Wacken'Roll est un forum RPG Yaoi/Hentai et Yuri. Si vous êtes homophobes ou âgé de moins de 17 ans je vous prie de cliquer sur la petite croix de la page merci. En cas contraire, je vous souhaite une bonne navigation dans notre ville. Après plusieurs mois d'inactivité prolongée, j'ai décidé de re-ouvrir le forum. Plusieurs membres ont préféré déserté le forum et je ne peux que les comprendre cependant, je compte sur vous, invités, pour peupler le forum et lui donner une vie rock'n'roll. J'espère vous voir nombreux et si vous avez des suggestions surtout n'hésitez pas à m'en faire part. Toute remarque constructive sera la bienvenue \o/</center> </td> </tr> </table> </div></div> <div class="contenu_onglet" id="contenu_onglet_ongl2"> <table align="center" border="0" height="240px"> <tr> <td style="vertical-align: middle;"> <div class="imginfo"> <img src="http://i24.servimg.com/u/f24/13/34/36/27/staff210.png"/> <span> <table width="125" cellspacing="1" cellpadding="1" border="0"><tbody> <tr> <td style="text-align: center;"> <div class="imginfo"> <img src="http://i24.servimg.com/u/f24/13/34/36/27/staff_10.png"/> </div> </td> </tr> <tr> <td style="text-align: center;"> <font size="1">Shayan Sisyphus
Fondateur - Chef des entreprises Empyrian<br/></font> </td> </tr></tbody> </table> </span> </div> </td> <td> <div class="imginfo"> <img src="http://i24.servimg.com/u/f24/13/34/36/27/staff111.png"/> <span> <table width="125" cellspacing="1" cellpadding="1" border="0"><tbody> <tr> <td style="text-align: center;"> <div class="imginfo"> <img src="http://i24.servimg.com/u/f24/13/34/36/27/staff_11.png"/> </div> </td> </tr> <tr> <td style="text-align: center;"> <font size="1">Nordhal Sgärdt
Administrateur - Étudiant Underground<br/></font> </td> </tr></tbody> </table> </span> </div> </td> </tr> </table> </div> <div class="contenu_onglet" id="contenu_onglet_ongl3">
<marquee behavior="scroll" align="center" direction="leaf" scrollamount="2" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'> <img src="http://img10.hostingpics.net/pics/885165alex.png" style="border: 1px solid #000000;" /> <img src="http://img10.hostingpics.net/pics/899170liam.png" style="border: 1px solid #000000;" /> <img src="http://img10.hostingpics.net/pics/696122eichi.png" style="border: 1px solid #000000;" /> <img src="http://img10.hostingpics.net/pics/383689lilian.png" style="border: 1px solid #000000;" /> <img src="http://img10.hostingpics.net/pics/676527shawn.png" style="border: 1px solid #000000;" /> <img src="http://img10.hostingpics.net/pics/802395vader.png" style="border: 1px solid #000000;" />
<img src="http://img10.hostingpics.net/pics/664367april.png" style="border: 1px solid #000000;" /> <img src="http://img10.hostingpics.net/pics/599731aya.png" style="border: 1px solid #000000;" /> <img src="http://img10.hostingpics.net/pics/176967bella.png" style="border: 1px solid #000000;" /> <img src="http://img10.hostingpics.net/pics/895964liliana.png" style="border: 1px solid #000000;" /> <img src="http://img10.hostingpics.net/pics/299951morgane.png" style="border: 1px solid #000000;" /> <img src="http://img10.hostingpics.net/pics/242406sarah.png" style="border: 1px solid #000000;" /> </marquee> <center><a href="http://wackenroll.forumotion.com/f4-les-posts-vacants">Liste des Posts Vacants</a></center> </div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'ongl1'; change_onglet(anc_onglet); //--> </script> <br><br><img style="border: 5px solid #c48b8b; -moz-border-radius: 10px 0px 10px 0px; -webkit-border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px;" src="http://i24.servimg.com/u/f24/13/34/36/27/gif_wa10.gif" /> </br></br></td> <td width="20%" style="vertical-align: top;"> <span style="font-size: 24px;"> <center>Bienvenue {USERNAME}!</center> </span>
<div style="background-image: url('http://img10.hostingpics.net/pics/312694wackenroll.png'); width: 300px; height: 300px;"> <MARQUEE style="padding-left: 60px; padding-top: 40px;" behavior="scroll" align="center" direction="up" height="235px" width="200px" scrollamount="2" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'> Actuellement Shayan recrute des employés dans son bâtiment mais aussi des artistes qui seront survivre dans un monde où le sexe, la drogue ainsi que la trahison règnent en puissance. Les Underground ne cessent de combattre Thy Empyrian histoire de ne pas laisser Shayan prendre le dessus sur la musique à Wacken En dehors des artistes, il y a les simples habitants de la ville connus sous le nom de « neutres » des simples citoyens qui participent à l’évolution de la ville sans pour autant s’intéresser du sort des musiciens. La ville évolue sous le commandement de Shayan, cet homme aux allures raffinés et que personne ne connait vraiment. Des artistes apparaissent de plus en plus nombreux. Et vous simple visiteur ou un errant qui cherche son chemin, voulez vous faire partie de ce monde de déjantés ? Ou préfériez vous être un simple spectateur ? Le choix vous appartient … ou pas. <center><a href="http://wackenroll.forumotion.com/l-histoire-de-wacken-roll-f3/">La suite du contexte</a></center>
</MARQUEE> </div> </td> <td width="50%" style="vertical-align: top;"> <div class="systeme_onglets"> <div class="staffs"> <span class="staff_0 staff" id="staff_ongl4" onclick="javascript:change_staff('ongl4');">référencement</span> <span class="staff_0 staff" id="staff_ongl5" onclick="javascript:change_staff('ongl5');">Nouveautés</span> <span class="staff_0 staff" id="staff_ongl6" onclick="javascript:change_staff('ongl6');">Crédits</span> </div> <div class="contenu_staffs"> <div class="contenu_staff" id="contenu_staff_ongl4"> <center><img src="http://img10.hostingpics.net/pics/706266top_site.png" /></center>
<marquee behavior="scroll" align="center" direction="right" scrollamount="2" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'> <a href="LIENTOPSITE"><img src="TOPSITE" /></a> <a href="LIENTOPSITE"><img src="TOPSITE" /></a> <a href="LIENTOPSITE"><img src="TOPSITE" /></a> <a href="LIENTOPSITE"><img src="TOPSITE" /></a> </marquee>
<center><img src="http://img10.hostingpics.net/pics/375106ref.png" /></center>
<marquee behavior="scroll" align="center" direction="right" scrollamount="2" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'> <a href="LIENREFERENCEMENT"><img src="REFERENCEMENT" /></a> <a href="LIENREFERENCEMENT"><img src="REFERENCEMENT" /></a> <a href="LIENREFERENCEMENT"><img src="REFERENCEMENT" /></a> <a href="LIENREFERENCEMENT"><img src="REFERENCEMENT" /></a> </marquee> </div> <div class="contenu_staff" id="contenu_staff_ongl5"> <center><a href="http://wackenroll.forumotion.com/nouveautes-et-evenements-f108/">Nouveautés</a></center>
Après une petite fermeture j'ai décidé d'ouvrir de nouveau le forum en changeant le design et modifiant le contexte. Je ne suis pas très exigent en ce qui concerne les règlements du forum, je demande juste un minimum de respect sur le forum ainsi que beaucoup d'amusement! Le nombre de ligne imposée est de 15 lignes. Je vous prie de choisir des avatars réels. Si vous avez des questions, adressez-vous directement à Shayan ou Nordhal. Sinon il y a la section Questions et suggestions. N'hésitez pas à venir faire un coucou sur la cb ^^
<center><a href="http://wackenroll.forumotion.com/nouveautes-et-evenements-f108/">Evènements</a></center>
</div> <div class="contenu_staff" id="contenu_staff_ongl6"> Partie Crédit. </div> </div> </div> <script type="text/javascript"> //<!-- var anc_staff = 'ongl4'; change_staff(anc_staff); //--> </script> <br><br><img align="right" style="border: 5px solid #c48b8b; -moz-border-radius: 10px 0px 10px 0px; -webkit-border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px;" src="http://i24.servimg.com/u/f24/13/34/36/27/gif_wa10.gif" /></br></br> </td> </tr> <tr> <td colspan="3"> <marquee behavior="scroll" align="center" direction="right" scrollamount="2" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'> <a href="http://oishiistudio.forumactif.com/htm" target="_blank"><img src="http://i83.servimg.com/u/f83/13/23/25/16/bouton13.png" border="0" alt="" /></a> <a href="http://oracleyaoi.forumactif.org/htm" target="_blank"><img src="http://i63.servimg.com/u/f63/13/63/85/18/miniba10.jpg" border="0" alt="" /></a> <a href="http://playboyrpg.forumactif.com/htm" target="_blank"><img src="http://nsa11.casimages.com/img/2010/01/30//100130100711912801.png" border="0" alt="" /></a> <a href="http://avescity-yaoi.my-rpg.com/htm" target="_blank"><img src="http://i80.servimg.com/u/f80/14/00/23/57/logo310.jpg" border="0" alt="" /></a> <a href="http://kameo-school.xooit.fr/index.php" target="_blank"><img src="http://nsa11.casimages.com/img/2010/01/13/mini_100113102730157660.jpg" border="0" alt="" /></a> <a href="http://himitsu-rpg.forumactif.com/htm" target="_blank"><img src="http://i14.servimg.com/u/f14/13/94/00/18/5852_114.jpg" border="0" alt="" /></a> <a href="http://satisfaction.purforum.com/forum.htm" target="_blank"><img src="http://i82.servimg.com/u/f82/14/22/73/08/100x3412.png" border="0" alt="" /></a> <a href="http://miriraseth.forumactif.org/htm" target="_blank"><img src="http://moe.mabul.org/up/moe/2010/02/10/img-164400ax5bv.png" border="0" alt="" /></a> <a href="http://organizatsiya.purforum.com/index.htm" target="_blank"><img src="http://www.noelshack.com/uploads/16062009/logo100x34072412.png" border="0" alt="" /></a> <a href="http://castaliesway.forumactif.com.htm" target="_blank"><img src="http://i85.servimg.com/u/f85/14/45/24/94/bouton10.jpg" border="0" alt="" /></a> <a href="http://artistika.forumactif.org/htm" target="_blank"><img src="http://i84.servimg.com/u/f84/13/74/54/85/bouton20.jpg" border="0" alt="" /></a> <a href="http://kyouraku.forumactif.com/htm" target="_blank"><img src="http://nsa11.casimages.com/img/2009/12/14/mini_091214015550584559.png" border="0" alt="" /></a> <a href="http://bloodycall.forumactif.com/forum.htm" target="_blank"><img src="http://moe.mabul.org/up/moe/2010/02/27/img-150525jze63.png" border="0" alt="" /></a> <a href="http://aedenia.forumactif.org/portal.htm" target="_blank"><img src="http://i47.tinypic.com/2r5qjy8.png" border="0" alt="" /></a> <a href="http://thedoomedisland.forumotion.com.htm" target="_blank"><img src="http://i63.servimg.com/u/f63/14/93/56/19/1003210.jpg" border="0" alt="" /></a> </marquee> </td> </tr> </table>
Voila. Merci à celui ou celle qui m'aidera >< |
Dernière édition par Massive8despair le Jeu 10 Fév 2011, 17:10, édité 1 fois | |
| | | Invité Invité
| Voilà, Salut ma zolie M8D 8D, je me demande si ça ne serait pas dans ton Css, ou il y aurait une limite de la taille, sinon tu peux toujours faire défiler le texte en question comme ceci : - Code:
-
<td width="100%" style="vertical-align: center;"><marquee scrollamount="3"><center> Wacken'Roll est un forum RPG Yaoi/Hentai et Yuri. Si vous êtes homophobes ou âgé de moins de 17 ans je vous prie de cliquer sur la petite croix de la page merci. En cas contraire, je vous souhaite une bonne navigation dans notre ville. Après plusieurs mois d'inactivité prolongée, j'ai décidé de re-ouvrir le forum. Plusieurs membres ont préféré déserté le forum et je ne peux que les comprendre cependant, je compte sur vous, invités, pour peupler le forum et lui donner une vie rock'n'roll. J'espère vous voir nombreux et si vous avez des suggestions surtout n'hésitez pas à m'en faire part. Toute remarque constructive sera la bienvenue \o/</center></marquee> </td> Tu peux toujours changer la valeur du "scrollamount" dans le marquee. | | |
| | | Phantasmagoria
{ Membre hyper-actif }
Messages : 1636
| Hello Mizu <3
Tout d'abord merciiii de te pencher sur mon problème ! Mais au même temps, je ne cherche pas à faire défiler les informations dans le cadre mais plutôt d'installer un scrollbar histoire de ne plus m'imposer de limite. Et je viens de vérifier mon code CSS, il n'y a pas de limite dans le texte é.è J'imagine que ça passe par le html dans ce cas nan? >< | | |
| | | Invité Invité
| Dans ce cas ça vient du html et des tailles que tu impose au html, j'ai vu qu'il y a des tailles en pourcentage, c'est une bonne initiative, après je ne saurais dire exactement quelle taille changer ou supprimer pour que ton cadre n'ai pas de limite. - Code:
-
<div class="contenu_onglet" id="contenu_onglet_ongl1"> <table border="0" width="90%" height="300px"> <tr> <td align="center" width="30%" style="vertical-align: middle;"> </div> j'aurais tendance à parier sur ce Height la, mais bon je n'ai pas trop le moyen de vérifier en faite avec juste le html >.<' [les cadres s'affichent pas sans Css] Ce que je te conseille, c'est de tester sur Notepad en utilisant ton html + ton css et de changer les diverses valeurs des "width" et des "height" normalement tu finiras par tomber sur celle qui pose problème =) | | |
| | | Phantasmagoria
{ Membre hyper-actif }
Messages : 1636
| A vrai dire j'ai déjà essayé cette solution et c'est là où le texte sort complètement du cadre
Regarde ça xD - Spoiler:
J'ai une petite question, est ce que la scrollbar s'installe toute seule quand il y a un texte long ou bien on doit l'installer manuellement? Je te montre mon code CSS pour voir si ça vient de là, même si j'ai vérifié ><
- Code:
-
div.imginfo { /* INFOBULLES */ position: relative; text-decoration: none; border: 5px solid grey; -moz-border-radius: 10px 0px 10px 0px; -webkit-border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px; }
div.imginfo span { display: none; /* on masque l'infobulle */ border: 5px solid #4d0202; -moz-border-radius: 10px 0px 10px 0px; -webkit-border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px; }
div.imginfo:hover {
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */ cursor: help; /* on change le curseur par défaut en curseur d'aide */ border: 5px solid #4d0202; -moz-border-radius: 10px 0px 10px 0px; -webkit-border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px; }
div.imginfo:hover span { display: inline; /* on affiche l'infobulle */ position: absolute; white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */ top: 100px; /* on positionne notre infobulle */ left: 20px; background-color: #000; color: #7d7d7d; padding: 3px; border: 5px solid grey; -moz-border-radius: 10px 0px 10px 0px; -webkit-border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px; }
.onglet {
color : #ffffff; display:inline-block; margin-right:6px; padding:6px; border:3px solid #968d8d; cursor:pointer; -moz-border-radius: 10px 0px 10px 0px; -webkit-border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px;
} .onglet_0 { background:#4a0404; border-bottom:1px solid black; } .onglet_1 { background:#4a0404; border-bottom:0px solid black; padding-bottom:6px; } .contenu_onglet { background-image: url("http://i24.servimg.com/u/f24/13/34/36/27/fond_w10.png"); border:3px solid #968d8d; margin-top:-1px; padding:6px; display:none; width: 300px; height: 200px; -moz-border-radius: 10px 0px 10px 0px; -webkit-border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px; }
.staff { background-color:#4a0404; color : #ffffff; display:inline-block; margin-right:6px; padding:6px; border:3px solid #968d8d; cursor:pointer; -moz-border-radius: 10px 0px 10px 0px; -webkit-border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px; } .staff_0 { background-color:#4a0404; border-bottom:5px solid black; } .staff_1 { background:#4a0404; border-bottom:0px solid black; padding-bottom:6px; } .contenu_staff { background-image: url("http://i24.servimg.com/u/f24/13/34/36/27/fond_w10.png"); border:3px solid #fff; margin-top:-1px; padding:6px; display:none; width: 300px; height: 200px; -moz-border-radius: 10px 0px 10px 0px; -webkit-border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px; } Mercii beaucoup à toi Mizu <3
EDIT : Haaan j'ai trouvééé il a suffit que j'ajoute "overflow: auto" et hop, ça a marché xD
Mon problème est donc résolu, je te remercie Mizu <3 |
Dernière édition par Massive8despair le Jeu 10 Fév 2011, 17:06, édité 1 fois | |
| | | Invité Invité
| overflow-y: auto; overflow-x: visible;
A rajouter dans le Css =D | | |
| | | Phantasmagoria
{ Membre hyper-actif }
Messages : 1636
| Oups xD J'ai édité mon message au même temps que ton post xD
Merci Mizu <3 | | |
| | | Invité Invité
| Derien =D je te laisse mettre résolu et classer ça x) | | |
| | | Contenu sponsorisé
| | | | | Un problème de texte qui déborde | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|