IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Apparition et disparition d'une scrollbar, Overflow


Sujet :

CSS

  1. #1
    Membre actif
    Inscrit en
    Février 2013
    Messages
    23
    Détails du profil
    Informations forums :
    Inscription : Février 2013
    Messages : 23
    Par défaut Apparition et disparition d'une scrollbar, Overflow
    Bonjour,
    J'aimerais faire en sorte que mon texte apparaisse dans un encadré, et lorsque que je met mon curseur dans cet encadré, une scrollingbar apparaisse pour pouvoir lire la suite du texte.

    Donc en gros j'ai fais ça

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    madiv{overflow:hidden}
    madiv:hover{overflow:auto}
    donc en théorie ça marche, ça fait bien ce que je veux.

    Le problème c'est lorsque la scrollbar apparait, elle "pousse" le contenus de mon texte.

    je vais vous illustrer la chose avec deux screens

    http://www.casimages.com/i/130322031918664073.jpg

    http://www.casimages.com/i/130322031919571415.jpg

    bon j'ai l'air d'un peu chipoté, mais mine de rien ça fait moche lorsque ça bouge comme ça, et lorsque le texte est plus long ça fait vraiment moche.

    En espérant recevoir de l'aide de votre part bonne journée.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,
    décale le problème un cran en dessus en encadrant la DIV dans une DIV qui elle masquera la scrollbar et qui sur le hover la laissera apparaître.

  3. #3
    Membre actif
    Inscrit en
    Février 2013
    Messages
    23
    Détails du profil
    Informations forums :
    Inscription : Février 2013
    Messages : 23
    Par défaut
    Si j'ai bien compris je dois faire ça?


    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div id="madiv">
    <div>MONTEXTEBLABLABLABLABLABLA</div>
    </div>
    (Je demande car ça ne fonctionne pas, le texte déborde de la page, mais si c'est bien ce que tu voulais dire je vais approfondir et voir si je n'ai pas oublié un détail.)

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Pour le principe, on possède une structure du type
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div id="conteneur">
      <div id="contenu">
      </div>
    </div>
    c'est le conteneur qui permettra de cacher la scrollbar via un overflow:hidden par exemple.

    Maintenant fixons des largeur/hauteur cohérentes
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #conteneur{
      width:19em;
      height:20em;
      overflow:hidden;
    }
    #contenu{
      width:20em;
      height:20em;
      overflow-y:scroll;
    }
    dans ce cas j'utilise l'unité em plus simple à ajuster que les px. Le conteneur fait 1em de moins que le contenu, on ne voit donc pas la scrollbar.

    Sur le :hover du conteneur il suffit de supprimer le overflow:hidden.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #conteneur:hover{
      overflow:visible;/* on affiche ce qui ne l'est pas */
    }
    Une autre alternative serait d'ajuster la largeur du conteneur à celle du contenu.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #conteneur:hover{
      width:20em;
    }
    cette méthode me semble préférable si le contenu possède une bordure ou une ombre par exemple.

    Voilà un petit exemple complet
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>Affichage ScrollBar sur :hover</title>
    <meta name="Author" content="NoSmoking">
    <style>
    html,body {
      margin:1em 2em;
      padding:0;
      font-size:100%;
      font-family:Verdana,Arial;
      background: #F2F2F2;
    }
    h1{
      color: #60606f;
      text-shadow:1px 1px 0px #FFF;
    }
    #conteneur{
      width:19em;
      height:20em;
      border:1px solid #CCF;
      overflow:hidden;
      opacity:0.5;
      box-shadow: 0 2px 4px 2px #CCC;
    }
    #conteneur:hover{
    /*  overflow:visible;/* on affiche ce qui ne l'est pas */
      width:20em;
      opacity:1;
    }
    #contenu{
      width:20em;
      height:20em;
      background:#EEF;
      overflow-y:scroll;
    }
    #marge{
      margin:.5em;
    }
    </style>
    </head>
    <body>
      <h1>Affichage<br>ScrollBar sur :hover</h1>
      <div id="conteneur">
        <div id="contenu">
          <div id="marge">
            <p>Cibos vehementer vehementer solitarum quod propinquantis Isauri per solitarum quae.</p>
            <p>Filius quae clades lapide exilium ab quarto pater quae cruribus vicensimo acti Crateras ad filius per fortunas igitur cum Apollinares suam acti actitata constaret Apollinares locum clades quaedam cum Apollinares.</p>
            <p>Sibi quaesitoresque accusatores militum subditivos accitus quae subsidia imperiale tumor Vrsicinus Caesaris forensibus a subditivos abnuens certamina isdem litteris quorum cerneret agitabantur sibi militum accusatores consociatos sui exhalaret iunxerat iunxerat.</p>
            <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.
          </div>
        </div>
      </div>
    </body>
    </html>
    Voilà à toi d'adapter à ton besoin.

  5. #5
    Membre actif
    Inscrit en
    Février 2013
    Messages
    23
    Détails du profil
    Informations forums :
    Inscription : Février 2013
    Messages : 23
    Par défaut
    Merci pour toutes ces explications

    Mais ça ne réponds pas exactement à mon problème.

    http://www.casimages.com/i/130326094742520783.jpg

    http://www.casimages.com/i/130326094743858294.jpg

    On le vois plus clairement ici, le texte se fait compresser par la scrollbar.

    Lorsque le visiteur va poser son curseur sur le contenu, et bien la scrollbar va apparaitre de manière totalement brute, et mais plus important il déforme le contenus, graphiquement ça le fait pas, le fait que le texte se décale comme ça c'est vraiment trop laid pour que je puisse laisser passer.

    EDIT:
    Ah bah enfaite en regardant le morceaux de script que tu ma envoyé ça réponds à mes critères.
    Merci ;D

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    EDIT:
    Ah bah enfaite en regardant le morceaux de script que tu ma envoyé ça réponds à mes critères.
    Merci ;D
    Ouf! j'ai eu peur d'avoir bossé pour rien

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 04/04/2008, 12h14
  2. Taille du curseur d'une scrollbar
    Par stof dans le forum MFC
    Réponses: 3
    Dernier message: 28/06/2005, 14h43
  3. Position d'une ScrollBar dans un TRichEdit (ou TMemo)
    Par Troll dans le forum C++Builder
    Réponses: 9
    Dernier message: 24/02/2005, 15h18
  4. [JTree] Ajouter une scrollbar
    Par Farias dans le forum Composants
    Réponses: 2
    Dernier message: 29/10/2004, 00h21
  5. [JScrollPane]Comment savoir quand une scrollbar apparait ?
    Par FrigoAcide dans le forum Composants
    Réponses: 4
    Dernier message: 29/04/2004, 10h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo