Les partenaires publicitaires:

Comment faire un div Scrollable

Les développeurs Web peuvent utiliser du HTML et CSS (Cascading Style Sheets) code pour déterminer le contenu et l'apparence des pages Web. Les deux types de code peuvent également dicter aspects de l'interaction de l'utilisateur avec une page. Pour faire un élément div défilement dans une page, vous pouvez utiliser la propriété overflow CSS. Fabrication d'éléments de défilement est généralement pas difficile, ne nécessitant que quelques simples lignes de code. Vous pouvez faire un élément HTML défilement à la fois horizontalement et verticalement.

Instructions

  1. 1

    Créez votre page HTML. En utilisant le code échantillon de balisage suivant, définir les contours d'une page Web:

    Ouvrez un nouveau fichier dans un éditeur de texte et copier ce code en elle, l'enregistrer avec l'extension de fichier .html. Si vous avez déjà une page Web avec un div en elle, vous pouvez utiliser ce lieu de créer un nouveau.

  2. 2

    Créer une section au sein de votre page pour code CSS. Vous pouvez utiliser un lien vers le code CSS à partir d'un fichier CSS distinct au sein de votre page de article, ou peut inclure le code dans le section directement. Pour ce faire, ajoutez la section suivante entre l'ouverture et la fermeture balises dans votre page HTML:

    /Code CSS/




    Placez votre code CSS entre ces balises de style.

  3. 3

    Ajouter un élément div à votre page. Insérez le code exemple de balisage suivant entre l'ouverture et la fermeture tags:

    Voici une partie du contenu à l'intérieur d'un paragraphe, qui est à l'intérieur d'un élément.

    Ce simple élément a un attribut id de sorte que le code CSS peut identifier au sein de la page dans son ensemble. Vous pouvez inclure tout contenu que vous souhaitez au sein de votre élément div, y compris le texte, les images et les autres médias.

  4. 4

    Ajouter des règles CSS pour votre élément. Dans la section de style de votre page, insérez le code suivant identifier l'élément div et l'application de certaines règles de style à elle:

    contenu{

    hauteur: 100px-

    largeur: 100px-

    overflow: scroll-

    }

    Ce code définit une largeur et une hauteur fixe pour l'élément, ainsi que des instructions du navigateur pour faire défiler tout contenu déborder cette zone. Pour que vous puissiez utiliser la propriété de défilement, vos éléments doivent avoir des dimensions spécifiques, comme la propriété de défilement indique au navigateur quoi faire avec le contenu si elle ne rentre pas dans l'espace alloué pour un élément.

  5. 5

    Enregistrez votre fichier HTML et l'ouvrir dans un navigateur Web. Vous devriez voir une ou deux barres de défilement autour de l'élément div. Expérimenter avec votre code en changeant les dimensions, tout en laissant la propriété overflow mis à défiler. Les barres de défilement se comportent différemment en fonction des dimensions de l'élément et la quantité de contenu est à l'intérieur.

Conseils & Avertissements

  • Essayez d'utiliser d'autres valeurs pour la propriété de défilement, comme caché, pour voir les différentes possibilités.
  • Certains navigateurs ne peuvent pas mettre en œuvre la propriété scroll correctement, en particulier les navigateurs fonctionnant sur les appareils mobiles.
» » » » Comment faire un div Scrollable