Les partenaires publicitaires:

Comment faire pour créer les onglets verticaux de fichiers au format HTML

Le système de fichiers verticale est couramment utilisé pour stocker de nombreux documents papier de manière compacte. Les documents sont conservés verticalement et face-à-dos empilés, chacun avec un onglet exposée qui peut être tiré pour déplacer les autres fichiers sur la façon d'y accéder. Imiter ce mécanisme de dépôt sur votre page Web en HTML en exploitant la "flotter" pseudo-classe dans un interne Cascading Style Sheet (CSS) pour révéler les fichiers lorsque les mouvements de la souris de l'utilisateur sur l'onglet correspondant.

Instructions

  1. 1

    Insérez le code CSS suivant entre le "tête" Tags de votre document HTML:

    body {

    margin: 0px-

    padding: 0px-

    background-color: khaki-

    }

    .tabwrapper {

    background-color: blancs

    border-bottom: 1px solide-gris

    hauteur: 30px-

    padding-top: 5px-

    padding-right: 5px-

    }

    .onglet {

    display: inline-bloquants

    hauteur: 19px-

    font-size: 16px-

    padding: 10px 5px 5px 10px-

    margin-left: 5px-

    border: 1px solide-gris

    background-color: khaki-

    }




    .onglet: hover {

    border-bottom: 1px kaki solide-

    }

    .fichier{

    affichage: none-

    }

    .onglet: hover {.file

    display: inline-bloquants

    Position: absolute-

    padding-left: 5px-

    padding-top: 5px-

    gauche: 0px-

    top: 34px-

    }

  2. 2

    Ajoutez le code suivant pour le corps de votre document HTML:

    Fichier 1
    Fichier 1 Sommaire

    Fichier 2
    Fichier 2 Sommaire

    Fichier 3
    Fichier 3 Sommaire

    Fichier 4
    Fichier 4 Table des matières

    Placez le titre de chaque fichier dans le "languette" éléments div, et le contenu de chaque fichier à l'intérieur du imbriquée "fichier" divs.

  3. 3

    Enregistrez la page et de le charger dans un navigateur Web. Déplacez votre souris sur les onglets en haut de révéler leur contenu. Vous pouvez ajouter des onglets en copiant et collant la cinquième ligne du code de l'étape 2, mais devez éviter d'ajouter un si grand nombre qu'ils dépassent la largeur d'une fenêtre de navigateur typique.

Conseils & Avertissements

  • Ajoutez la ligne suivante au début de votre document HTML pour assurer un comportement correct de la page dans Internet Explorer:
» » » » Comment faire pour créer les onglets verticaux de fichiers au format HTML