1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies. En savoir plus.

[CSS] Scroll

Discussion dans 'Développement web' créé par fissunix, 30 Novembre 2004.

Modérateurs: Nephou
  1. fissunix

    fissunix Membre confirmé

    Messages:
    290
    J'aime reçus:
    17
    Score des trophées:
    0
    Meilleures réponses:
    0
    Salut à tous,

    Avertissement: ça risque d'être incompréhensible ! :)

    Je cherche un moyen en CSS de scroller un div. Je l'ai vu sur un site, impossible de le retrouver. Celui-ci utilisait la scroll bar du navigateur pour scroller un div contenu au milieu du site ? Est-ce possible ?

    Merci !

    A+
     
  2. molgow

    molgow Modérateur Modérateur

    Messages:
    5 493
    J'aime reçus:
    612
    Score des trophées:
    0
    Meilleures réponses:
    0
    Ce que tu demandes n'est pas possible à mon sens. Par contre, ce qui doit peut-être possible, c'est de construire ta page de telle sorte qu'il y ait des <div> "collés" en haut, en bas, à gauche et à droite et qui ne bouge pas (même avec le scroll). Ensuite de quoi, le contenu au milieu défile normalement avec l'ascenceur du navigateur.

    Je sais pas si je suis compréhensible moi aussi ? :D
     
    fissunix aime ça.
  3. mfay

    mfay Membre d'élite Club MacG

    Messages:
    1 119
    J'aime reçus:
    517
    Score des trophées:
    255
    Meilleures réponses:
    0
    C'est pas à ça que sert l'option :

    overflow: scroll
    :)
     
  4. fissunix

    fissunix Membre confirmé

    Messages:
    290
    J'aime reçus:
    17
    Score des trophées:
    0
    Meilleures réponses:
    0
    Merci pour vos réponses, je vais essayé ta méthode Molgow. Donc si je t'ai bien compris, 3 div, 2 qui serviront de "masque" pour le div (le 3ème) qui contiendra le texte ? Je devrai joué avec les marges alors (sur le div du texte) ? mfay, overflow: sroll, oui il va scroller le div en mettant une scrollbar sur le div en question, ce que je n'aimerais pas...

    A+
     
  5. fissunix

    fissunix Membre confirmé

    Messages:
    290
    J'aime reçus:
    17
    Score des trophées:
    0
    Meilleures réponses:
    0
    La journée commence assez mal...

    J'ai monté une page de test et j'étais heureux jusqu'à il y a 10 minutes. J'ai eu la mauvaise idée d'allumée mon PC pour tester sous IE6 et là, c'est la cata ! Les "position: fixed" allucinent complètement. J'ai lu qu'on pouvait ajouter les propriétés suivantes pour la balise body:

    Code:
    overflow-y: auto;
    height: 100%;
    Mais cela ne résoud pas mon problème.

    Any suggestion ?

    Merci ;)
     
  6. Nephou

    Nephou au début de la fin Modérateur Club MacG

    Messages:
    8 123
    J'aime reçus:
    1 532
    Score des trophées:
    255
    Meilleures réponses:
    0
    mets en place 3 div avec le paramètre 'position' règlé sur 'fixed' : une en haut, une en bas et une à gauche (par exemple) ; tu joues avec le z-index pour les positionner au dessus du fond ou de ta div défilante.

    "et voilà"

    c'est clair :confused:


    [des baffes]pour ne pas avoir de problème avec ie je crois que le type de positionnement du contenant des trois div masquantes doit être spécifié[/des baffes]

    [toujours des baffes]en fait essaie position:absolute ;)[/ toujours des baffes]

    edit3
    ---------------------------------------------
    pour être précis:

    les trois div sont positionnées de manière absolue avec des marges nulles (sinon bonjour l'angoisse pour les réglages sous ie)

    niveau z-index, il est préférable que les div "haut" et "bas" soient au dessus. Il reste alors à régler le padding de la div de gauche pour que son contenu ne soit pas masqué.

    exemple:
    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Nouvelle page 1</title>
    </head>
    <body style="margin:0;padding:0;">
    <div style="height:100%;margin:0;position:absolute;top:0;width:150px;background-color:#ccc;">autre test
    </div>
    
    <div style="margin:0;position:fixed;absolute:0;left:0;width:100%;background-color:#ccc;">test</div>
    
    <div style="margin:0;position:absolute;bottom:0;left:0;width:100%;background-color:#ccc;">troisième
    </div>
    
    </body>
    
    </html>
    
    j'ai pas règlé les z-index car ça dépend du résultat souhaité ;)
     
    fissunix aime ça.
  7. fissunix

    fissunix Membre confirmé

    Messages:
    290
    J'aime reçus:
    17
    Score des trophées:
    0
    Meilleures réponses:
    0
    Merci pour ta réponse Nephou, j'ai testé ton exemple, je suppose qu'il doit y avoir une petite faute parce que c'est un peu du n'importe quoi à l'affichage :p . Le problème, c'est que je peux pas me permettre d'utiliser une position absolue avec "bottom: 0" parce que la zone visible devrait rester de taille fixe à 300px :siffle:. Je suis pénible... j'ai finalement opté pour une solution sans scrollbar, j'ai mis des <!--PAGEBREAK--> dans la source html et j'affiche le tout en plusieur page grace à une bidouille PHP :rateau: !

    Merci quand même !
     
    Nephou aime ça.
  8. Nephou

    Nephou au début de la fin Modérateur Club MacG

    Messages:
    8 123
    J'aime reçus:
    1 532
    Score des trophées:
    255
    Meilleures réponses:
    0
    ben je comprends pas : chez moi ça s'affiche bien avec firefox et explorer :confused: pb de copier-coller peut être :rateau:

    sinon toi t'es du genre à empêcher le visiteur de redimensionner tout comme il veut non :p ;)
     
  9. fissunix

    fissunix Membre confirmé

    Messages:
    290
    J'aime reçus:
    17
    Score des trophées:
    0
    Meilleures réponses:
    0
    J'ai réessayé, c'est vraiment bizarre, je te crois mais regarde les captures,... même le code à l'air correct ? Je te filerai l'url dès que j'aurai terminé. L'ami qui m'a fait le design qui voulait que la page ait des dimensions fixes, et c'est un peu le caca pour mettre les long textes dedans :rateau:
     
  10. Nephou

    Nephou au début de la fin Modérateur Club MacG

    Messages:
    8 123
    J'aime reçus:
    1 532
    Score des trophées:
    255
    Meilleures réponses:
    0
  11. fissunix

    fissunix Membre confirmé

    Messages:
    290
    J'aime reçus:
    17
    Score des trophées:
    0
    Meilleures réponses:
    0
    ok, je vois... je ne suis pas sûr qu'on pensait la même chose ! Peux-tu aller voir http://www.contesse.ch/test/ (avec Safari ou Firefox, étant donné que sur IE6 c'est le merdier ;)) Peut-être qu'il ne s'agit que d'attribut à rajouter pour IE...

    Merci pour ton aide !
     
  12. Nephou

    Nephou au début de la fin Modérateur Club MacG

    Messages:
    8 123
    J'aime reçus:
    1 532
    Score des trophées:
    255
    Meilleures réponses:
    0
    ben il suffit d'enlever ma div de gauche ;)
     
Modérateurs: Nephou

Partager cette page

Chargement...

iOccasion - Achetez un produit Apple d'occasion

Les derniers deals sur Ebay

Les derniers dossiers: