Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

CSS 2
La structure

  Bloc à tailles fixes

fonction  principe  la methode elle-meme  demonstration  telechargement de la methode  Compatibilite du script... a partir de : 

  Fonction
La mise en page peut parfois exiger des tailles pour les paragraphes ou les images, et ne pas supporter le moindre décallage.
Il peut donc être utile dans ces cas là de donner des tailles fixes à des blocs de texte ou à des zones d'image.
Internet Explorer et Netscape supportent tous les deux le 'verrouillage' d'un bloc, mais seul Internet Explorer permet, si le contenu du bloc l'exige, de créer des barres de défilement pour afficher la totalité du contenu d'un bloc.
  Principe
Lorsque vous définissez la taille d'un bloc, éventuellement son positionnement sur la page, vous pouvez, pour verrouiller la taille du bloc utiliser l'attribut 'overflow' en lui donnant deux valeurs :
  • overflow: hidden :
    Netscape : le contenu du bloc qui dépasserait la taille fixée est masqué mais la place qu'il occuperait est réservée, comme s'il existait,
    Internet Explorer : le contenu du bloc qui dépasserait la taille fixée est masqué, comme s'il n'existait pas.
  • overflow: auto :
    Netscape : fonctionnement identique à 'overflow: hidden',
    Internet Explorer : le bloc affiche un escenceur vertical permettant de faire défiler le contenu du bloc sans aggrandir sa taille.
  La méthode
dans la partie <head>
<style>
.cache { position: relative; width: 180px; height: 75px; overflow: hidden; background-color : #3399FF; }
.defil { position: relative; width: 180px; height: 75px; overflow: auto; background-color : #3399FF; }
</style>

dans la partie <body>
<hr>
<div class="cache">Ceci est un texte d'une dizaine de ligne, si-si !! Mais le bloc qui le contient possède une taille fixe qui ne lui permet pas d'afficher la totalité de son contenu... Ceci est un texte d'une dizaine de ligne, si-si !! Mais le bloc qui le contient possède une taille fixe qui ne lui permet pas d'afficher la totalité de son contenu...</div>
<hr>
<div class="defil">Ceci est un texte d'une dizaine de ligne, si-si !! Mais le bloc qui le contient possède une taille fixe qui ne lui permet pas d'afficher la totalité de son contenu... Ceci est un texte d'une dizaine de ligne, si-si !! Mais le bloc qui le contient possède une taille fixe qui ne lui permet pas d'afficher la totalité de son contenu...</div>
<hr>
<div class="cache"><img src="logo.gif"></div>
<hr>
<div class="defil"><img src="logo.gif"></div>
<hr>
  Démonstration
Sur toute la démonstration, aucun espace n'est forcé entre les différents exemples. Les traits horizontaux permettent de voir comment les marges verticales s'enchainent.
Ceci est un texte d'une dizaine de ligne, si-si !! Mais le bloc qui le contient possède une taille fixe qui ne lui permet pas d'afficher la totalité de son contenu... Ceci est un texte d'une dizaine de ligne, si-si !! Mais le bloc qui le contient possède une taille fixe qui ne lui permet pas d'afficher la totalité de son contenu...
Ceci est un texte d'une dizaine de ligne, si-si !! Mais le bloc qui le contient possède une taille fixe qui ne lui permet pas d'afficher la totalité de son contenu... Ceci est un texte d'une dizaine de ligne, si-si !! Mais le bloc qui le contient possède une taille fixe qui ne lui permet pas d'afficher la totalité de son contenu...
  Téléchargement
Cette feuille de style est disponible en deux versions :
  • le style est appliqué localement, dans la balise style de la page),
  • le style dans une feuille de style externe, commune à toutes les pages (fichier .css).

    L'intérêt d'une feuille de style est de pouvoir partager le style entre plusieurs liens de la page.
    		•
    Style local :
    str_overflow.zip
    4 Ko    		 telechargez le style telechargez le style
    Feuille de style :
    str_overflow2.zip
    4 Ko
    Recherche
    		aide sur la recherche
    DHTML
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter