Mettre une barre de défilement à un bloc trop grand

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

Résolu Mettre une barre de défilement à un bloc trop grand

Message par Lag le Sam 30 Juil 2011 - 0:44

Bonjour, Bonsoir,

Je viens à vous car je rencontre un petit problème avec un code pour mon Forum. Le soucis semble assez simple à régler mais étant une vraie bille en HTML et CSS, je pense que j'ai fais une bêtise: j'ai essayé d'associer plusieurs codes à l'aveuglette en espérant que ça marche tout simplement ... Pas très malin Rolling Eyes

Le problème se trouve ici: http://assassins-history.forumsactifs.com/

Vous pouvez voir une partie "News", celle-ci devrait apparaitre en principe de façon à ce que le texte défilant (de façon manuelle) entre dans la "bulle" prévue à cet effet mais bien sûr ça marche pas comme prévu (bah oui ça serait pas drôle sinon Rolling Eyes ).


Je vous donne le code, en espérant que vous pourrez régler le soucis. Je tiens à préciser que le code de ce message d'accueil étant en construction, je vais continuer un peu mais bêtises sur d'autres parties du code ... Donc si la personne m'aidant avait la patience de m'aider complètement en privé, ça serait super cool What a Face

Le code:

Code:
<div style="text-align: center;"><div style="text-align: center;"><span style="text-decoration: underline;"></span><font size="4"><span style="text-decoration: underline;">BIENVENUE SUR ASSASSIN'S HISTORY RÔLE PLAY</span><br></font></div><br><br><a href="http://assassins-history.forumsactifs.com/f1-reglement-general?tid=c31095efc3b742394e6e417294ebeed9" class="postlink"><img src="http://img71.xooimage.com/files/2/4/2/reglement-2b4e0f7.png" alt="" border="0"></a>     <a href="http://assassins-history.forumsactifs.com/f3-presentation?tid=c31095efc3b742394e6e417294ebeed9" class="postlink"><img src="http://img71.xooimage.com/files/5/9/8/inscription-2b4e11f.png" alt="" border="0"></a>     <a href="http://assassins-history.forumsactifs.com/t29-le-staff-du-forum?tid=c31095efc3b742394e6e417294ebeed9" class="postlink"><img src="http://img66.xooimage.com/files/4/f/0/staff-2b4e1a2.png" alt="" border="0"></a>      <a href="http://assassins-history.forumsactifs.com/f54-partenariats?tid=c31095efc3b742394e6e417294ebeed9" class="postlink"><img src="http://img72.xooimage.com/files/5/4/4/partenaires-2b4e1cf.png" alt="" border="0"></a><br></div>

<br>
    <table width="100%"><tr><td class="titrepa" width="70%">Histoire</td><td class="titrepa">News</td></tr>
    <tr><td class="contenupa"><div style="float:left; margin:3px;"><img src="http://nsa28.casimages.com/img/2011/07/29/110729082838810136.png" /></div>Nous sommes en 1500 après Jésus-Christ et une guerre fait rage en Italie. Rome, Venise, Florence, toutes les villes sont touchés et même le Monde entier. Depuis des années, une guerre sanglante fait rage entre les Templiers et les Assassins. Les Borgia, Templiers sanguinaires de cette époque on prit le contrôle des villes mais quelques Assassins décidèrent de mettre un terme à tout cela.


La question c'est "Qui seras-tu ? Un Assassin, ou un Templier ?



    Alors, n'attends plus et inscris-toi vite sur Assassin's History RP !

   
</td><tr><td colspan="2" rowspan="1"><table style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td style="width: 65%; text-align: left; vertical-align: top;"><span class="boxtoproundtitle">les News</span><div class="box"><div style="overflow: auto; width: 50%; height: 90px;"><font color="white"><b><ul><li>Blabla bientôt !

  </ul> </b><br/>
Très très très bientôt ...
<br/>
</font>

</div><br/></td></tr>
    <tr><td class="titrepa">Effectif du Forum</td><td class="titrepa"> Staff</td></tr>
    <tr><td class="contenupa"><center> Admin: 2
 Modérateur: 1
 PNJ: 1
 Assassins: 2
 Templiers: 1
</center></td><td class="contenupa"><ul>
    <li>Fondateur: Lag.</li>
    <li>Administrateurs: Lag & dragonnier</li>
    <li>Modérateur: TodRitter</li>
    <li>PNJ: Maitre du Jeu (MJ)</li>

    </td></tr></table>


> Et là le soucis c'est que y a plus le bouton pour défiler Laughing


Merci d'avance batman


Dernière édition par Lag le Lun 1 Aoû 2011 - 17:48, édité 1 fois

Lag
**

Masculin
Messages : 78
Inscrit(e) le : 02/07/2010

http://assassins-history.forumsactifs.com/
Lag a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Lag le Sam 30 Juil 2011 - 4:14

Un petit UP avant d'aller dormir.

Lag
**

Masculin
Messages : 78
Inscrit(e) le : 02/07/2010

http://assassins-history.forumsactifs.com/
Lag a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Alex Fowl le Sam 30 Juil 2011 - 9:42

Bonjour,

Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné.

Je vous invite à lire :

A bientôt sur ForumActif Smile

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Lag le Dim 31 Juil 2011 - 3:44

Excuses-moi pour le dernier UP, petite règle un peu oublié.


Cette fois, je UP avec 24h x')

Lag
**

Masculin
Messages : 78
Inscrit(e) le : 02/07/2010

http://assassins-history.forumsactifs.com/
Lag a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Ea le Dim 31 Juil 2011 - 4:24

Bonjour,


Je n'ai pas compris quel texte défilait, et en mettant le bouton au dessus de quoi =)

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Lag le Dim 31 Juil 2011 - 13:29

Sur un Forum où je suis, l'effet est le même. Je te montre:

http://tales-of-naruto.forumactif.com/

Tu vois que pour les News, il y a une roulette Smile
J'aimerai mettre ma News dans son cadre, comme les autres, mais avec une roulette pour les jours où je serai super bavard xD

Lag
**

Masculin
Messages : 78
Inscrit(e) le : 02/07/2010

http://assassins-history.forumsactifs.com/
Lag a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Ea le Dim 31 Juil 2011 - 23:44

Ah, une barre de défilement x)


Donc si vous avez l'endroit où vous voulez la mettre il suffit d'un code de ce genre :

Code:
<div style="max-height:200px; overflow: auto;">contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu </div>
Le max-height permet de spécifier la taille maximum du bloc et le overflow son comportement en cas de dépassement ( auto ça ne met pas de barre de défilement si il n'y a pas de dépassement, et ça en met si il y a un dépassement ).

Sinon de votre demande en fait j'avais compris un truc de ce style :

test

test

test

Mais qui ne bouge que si on a le curseur au dessus d'un bouton ( enfin ce n'est pas cela ^^ ).

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Lag le Lun 1 Aoû 2011 - 0:17

Je ne sais si je vais abuser mais pourrais-tu le placer dans le code global ?
Je ne comprends pas grand chose au codage et donc placer ça dans le truc géant va m'emmener à d'autres bêtises je le sens Embarassed

Lag
**

Masculin
Messages : 78
Inscrit(e) le : 02/07/2010

http://assassins-history.forumsactifs.com/
Lag a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Ea le Lun 1 Aoû 2011 - 0:41

Vous avez moyen de sauver votre code dans un fichier .txt, faire vos test et si ça foire juste reprendre ce que vous avez enregistré ^^

Mais il y a aussi des services qui rendent les tests plus facile, par exemple : http://jsfiddle.net/EsSBB/ est pas mal ^^

Il suffit de modifier le code et puis d'appuyer sur Run.

Donc pour où le mettre, si on regarde la fin de la 2ème ligne :

Code:
Alors, n'attends plus et inscris-toi vite sur Assassin's History RP !
       
       
        </td><tr>
Il faudrait mettre une case en plus ( pour qu'on soit dans la troisième de la ligne ) et mettre le bloc de texte dedans :

Code:
Alors, n'attends plus et inscris-toi vite sur Assassin's History RP !
       
       
        </td>
        <td>
            <div style="max-height:200px; overflow: auto;">contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu </div>
        </td>
    </tr>
    <tr>

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Lag le Lun 1 Aoû 2011 - 0:42

Bonne idée !


Merci beaucoup :)Je double-post pour attirer ton attention au cas ou tu aurais déjà vu la réponse précédente:

J'ai testé avec ce que tu me dis et cela ne veut toujours pas aller dans la petite boite rectangulaire prévu à cet effet. Tu me dis qu'il faut une troisième ligne pour avoir la chose ? Le soucis c'est que je m'y connais pas et j'avais une idée. J'ai demandé sur un forum de codage mais je me passerai de commentaires sur le Forum en question. A présent je suis seul à la dérive et je dérive pas mal.

Lag
**

Masculin
Messages : 78
Inscrit(e) le : 02/07/2010

http://assassins-history.forumsactifs.com/
Lag a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Ea le Lun 1 Aoû 2011 - 1:06

J'ai donné la solution en fait, remplacer le premier code par le second, ce qui donne : http://jsfiddle.net/EsSBB/1/

En fait un <table>...</table> c'est un tableau.

Dans un tableau il y a des lignes ( <tr>...</tr> ).

Dans des lignes il y a des cases ( <td>...</td> ).

Si on prenait la ligne avec "Nous sommes en 1500 après Jésus-Christ et une guerre fait rage en Italie. Rome, Venise, Florenc", c'est :

Code:
<tr><td class="contenupa"><div style="float:left; margin:3px;"><img src="http://nsa28.casimages.com/img/2011/07/29/110729082838810136.png" /></div>Nous sommes en 1500 après Jésus-Christ et une guerre fait rage en Italie. Rome, Venise, Florence, toutes les villes sont touchés et même le Monde entier. Depuis des années, une guerre sanglante fait rage entre les Templiers et les Assassins. Les Borgia, Templiers sanguinaires de cette époque on prit le contrôle des villes mais quelques Assassins décidèrent de mettre un terme à tout cela.
       
       
        La question c'est "Qui seras-tu ? Un Assassin, ou un Templier ?
       
       
       
        Alors, n'attends plus et inscris-toi vite sur Assassin's History RP !
       
       
        </td></tr>
Donc là on veut ajouter dans la case après le contenu, il suffit de remplacer la ligne par :

Code:
<tr><td class="contenupa"><div style="float:left; margin:3px;"><img src="http://nsa28.casimages.com/img/2011/07/29/110729082838810136.png" /></div>Nous sommes en 1500 après Jésus-Christ et une guerre fait rage en Italie. Rome, Venise, Florence, toutes les villes sont touchés et même le Monde entier. Depuis des années, une guerre sanglante fait rage entre les Templiers et les Assassins. Les Borgia, Templiers sanguinaires de cette époque on prit le contrôle des villes mais quelques Assassins décidèrent de mettre un terme à tout cela.
       
       
        La question c'est "Qui seras-tu ? Un Assassin, ou un Templier ?
       
       
       
        Alors, n'attends plus et inscris-toi vite sur Assassin's History RP !
       
       
        </td><td>CONTENU</td></tr>
Pour ajouter une case avec CONTENU.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Lag le Lun 1 Aoû 2011 - 15:13

Sincèrement j'ai beau essayé, je n'y arrive pas. Y a pas à dire, les codes et moi ça fait 70 >.<

Lag
**

Masculin
Messages : 78
Inscrit(e) le : 02/07/2010

http://assassins-history.forumsactifs.com/
Lag a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Ea le Lun 1 Aoû 2011 - 15:45

Tout le code est là : http://jsfiddle.net/EsSBB/1/

Code:
<div style="text-align: center;">
    <div style="text-align: center;">
        <span style="text-decoration: underline;"></span><font size="4"><span style="text-decoration: underline;">BIENVENUE SUR ASSASSIN'S HISTORY RÔLE PLAY</span><br>
        </font>
    </div>
    <br>
    <br>
    <a href="http://assassins-history.forumsactifs.com/f1-reglement-general?tid=c31095efc3b742394e6e417294ebeed9" class="postlink"><img src="http://img71.xooimage.com/files/2/4/2/reglement-2b4e0f7.png" alt="" border="0"></a><a href="http://assassins-history.forumsactifs.com/f3-presentation?tid=c31095efc3b742394e6e417294ebeed9" class="postlink"><img src="http://img71.xooimage.com/files/5/9/8/inscription-2b4e11f.png" alt="" border="0"></a><a href="http://assassins-history.forumsactifs.com/t29-le-staff-du-forum?tid=c31095efc3b742394e6e417294ebeed9" class="postlink"><img src="http://img66.xooimage.com/files/4/f/0/staff-2b4e1a2.png" alt="" border="0"></a><a href="http://assassins-history.forumsactifs.com/f54-partenariats?tid=c31095efc3b742394e6e417294ebeed9" class="postlink"><img src="http://img72.xooimage.com/files/5/4/4/partenaires-2b4e1cf.png" alt="" border="0"></a><br>
</div>
<br>
<table width="100%">
    <tr>
        <td class="titrepa" width="70%">
            Histoire
        </td>
        <td class="titrepa">
            News
        </td>
    </tr>
    <tr>
        <td class="contenupa">
            <div style="float:left; margin:3px;">
                <img src="http://nsa28.casimages.com/img/2011/07/29/110729082838810136.png"/>
            </div>
            Nous sommes en 1500 après Jésus-Christ et une guerre fait rage en Italie. Rome, Venise, Florence, toutes les villes sont touchés et même le Monde entier. Depuis des années, une guerre sanglante fait rage entre les Templiers et les Assassins. Les Borgia, Templiers sanguinaires de cette époque on prit le contrôle des villes mais quelques Assassins décidèrent de mettre un terme à tout cela. La question c'est "Qui seras-tu ? Un Assassin, ou un Templier ? Alors, n'attends plus et inscris-toi vite sur Assassin's History RP !
        </td>
        <td>
            <div style="max-height:200px; overflow: auto;">
                contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="2" rowspan="1">
            <table style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
                <tbody>
                    <tr>
                        <td style="width: 65%; text-align: left; vertical-align: top;">
                            <span class="boxtoproundtitle">les News</span>
                            <div class="box">
                                <div style="overflow: auto; width: 50%; height: 90px;">
                                    <font color="white"><b>
                                        <ul>
                                            <li>Blabla bientôt !
                                            </ul>
                                            </b><br/>
                                                Très très très bientôt ... <br/>
                                            </font>
                                            </div>
                                                <br/>
                                            </td>
                                            </tr>
                                                <tr>
                                                    <td class="titrepa">
                                                        Effectif du Forum
                                                    </td>
                                                    <td class="titrepa">
                                                        Staff
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="contenupa">
                                                        <center> Admin: 2 Modérateur: 1 PNJ: 1 Assassins: 2 Templiers: 1 </center>
                                                    </td>
                                                    <td class="contenupa">
                                                        <ul>
                                                            <li>Fondateur: Lag.</li>
                                                            <li>Administrateurs: Lag & dragonnier</li>
                                                                <li>Modérateur: TodRitter</li>
                                                               
                                                                <li>PNJ: Maitre du Jeu (MJ)</li>
                                                            </td>
                                                            </tr>
                                                            </table>

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Lag le Lun 1 Aoû 2011 - 15:50

Le soucis c'est qu'il n'est pas dans la "box" délimité par le contour noir au coin arrondi comme tout les autres. Si tu regardes le Forum, tu remarques cela ne pas pas spécialement et j'ai deux "News" Smile

Le problème c'est que je ne vois pas comment mettre le contour ^^"

Lag
**

Masculin
Messages : 78
Inscrit(e) le : 02/07/2010

http://assassins-history.forumsactifs.com/
Lag a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Ea le Lun 1 Aoû 2011 - 15:56

Si on prend la case précédente, le contenu est :

Code:
<td class="contenupa">
    <div style="float:left; margin:3px;">
        <img src="http://nsa28.casimages.com/img/2011/07/29/110729082838810136.png"/>
    </div>
    Nous sommes en 1500 après Jésus-Christ et une guerre fait rage en Italie. Rome, Venise, Florence, toutes les villes sont touchés et même le Monde entier. Depuis des années, une guerre sanglante fait rage entre les Templiers et les Assassins. Les Borgia, Templiers sanguinaires de cette époque on prit le contrôle des villes mais quelques Assassins décidèrent de mettre un terme à tout cela. La question c'est "Qui seras-tu ? Un Assassin, ou un Templier ? Alors, n'attends plus et inscris-toi vite sur Assassin's History RP !
</td>
Notre case ajoutée elle est :

Code:
<td>
    <div style="max-height:200px; overflow: auto;">
        contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
    </div>
</td>
La différence entre les 2 <td>...</td> c'est que la première case a <td class="contenupa"> alors que la deuxième a juste <td>, enfin il suffit de remplacer le <td> de la deuxième par <td class="contenupa"> et ça devrait être le même type de case.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Résolu Re: Mettre une barre de défilement à un bloc trop grand

Message par Lag le Lun 1 Aoû 2011 - 17:48

Ah ah !!!!!!!!! Ça marche !!!!


Merci beaucoup, notamment de ta patience face à mon ignorance Smile
Je mets en résolu Very Happy

Lag
**

Masculin
Messages : 78
Inscrit(e) le : 02/07/2010

http://assassins-history.forumsactifs.com/
Lag 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