overflow-x CSS propriété

Définition de la CSS overflow-x.

La propriété CSS overflow-x permet de gérer la manière dont est rogné horizontalement le contenu lorsque votre contenu est plus large que la longueur spécifiée de votre élément. La propriété CSS overflow-x gère aussi, la manière dont est affiché les barres de défilement horizontal de l'élément (scrollbar).

Exemple de syntaxe CSS overflow-x :

overflow-x : hidden;
overflow-x : visible;
overflow-x : scroll;
overflow-x : auto;

La propriété de feuille de style overflow-x CSS peut prendre la valeur de rognage :

visible : rend visible tout ce qui dépasse de l'élément et ne met pas barre de défilement. Valeur par défaut.
hidden : cache tout ce qui dépasse de l'élément et ne met pas barre de défilement (scrollbar).
scroll : met toujours une barre de défilement horizontale.
auto : met une barre de défilement horizontale si besoin.
inherit : hérite de la propriété CSS overflow-x de son parent (CSS2).

Exemple de code overflow-x CSS

Conditions d'application de la CSS overflow-x.

La propriété de feuille de style overflow-x CSS est applicable sur toutes les balises HTML ou XHTML dont on a précisé la propriété CSS width ou max-width et qui ne sont pas de type display:inline.

La valeur de la CSS overflow-x peut être mise directement dans la propriété de raccourci CSS overflow.

Problème d'interprétation de overflow-x en Css.

Attention, pour les versions Internet Explorer < 7 pour overflow-x:visible le bloc s'adapte au contenu.

Règles de syntaxes CSS pour overflow-x.

Complément sur overflow-x

Quand vous faites un overflow-x autre que visible, la propriété CSS overflow-y fonctionne comme si elle était à auto.

Compatibilités navigateurs de la propriété overflow-x

Détails des versions de la CSS overflow-x: Propriété overflow-x css n'est pas compatible W3C; Propriété overflow-x est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS overflow-x: Propriété CSS overflow-x est compatible à partir de Chrome 1; Propriété CSS overflow-x est compatible à partir de Firefox 1.5; Propriété CSS overflow-x est compatible à partir de Internet Explorer 6; Propriété CSS overflow-x est compatible à partir de Opera 9.5; Propriété CSS overflow-x est compatible à partir de Safari 3

Equivalence de la CSS overflow-x en HTML.

La propriété CSS overflow-x n'a pas d'équivalence en HTML.

Exemples et astuces CSS pour utiliser overflow-x

Infos complémentaires Firefox/Nestcape

Comme vous pouvez le constater la propriété de feuille de style css overflow-x n'est pas compatible avec les navigateurs comme Firefox>1.5/Nestcape.
Pour faire le même effet vous devez utilisez le code suivant :

Exemple de code :

#dmcscroll{
display: block;
overflow:hidden;
overflow-x: auto;
overflow-y: hidden;
overflow : -moz-scrollbars-horizontal;
}

Exemple :

DmcaimelescssetlesfeuillesdestyleDmcaimelescssetlesfeuillesdestyleDmc aime les css et les feuilles de style Dmc aime les css

Copie d'écran

Votre avis sur la définition overflow-x en CSS

Votez pour la définition CSS `overflow-x`

Votes: 4.2 / 5 - 26 votes
Cliquez sur une étoile pour voter.

Définitions annexes à la Css overflow-x

Définitions CSS annexes overflow-x

display: La propriété CSS DISPLAY permet de modifier le type de rendu d'un élément.Exemple d'écriture CSS de display display : block; display : inline; display...[ display ]
max-width: La propriété de Longueur CSS MAX-WIDTH permet de spécifier la longueur maximale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple ...[ max-width ]
overflow: La propriété CSS OVERFLOW un raccourci qui permet de gérer la manière dont est rogné le contenu lorsque votre contenu est plus grand que la taille spé...[ overflow ]
overflow-y: La propriété CSS OVERFLOW-Y permet de gérer la manière dont est rogné verticalement le contenu lorsque votre contenu est plus haut que la hauteur spéc...[ overflow-y ]
width: La propriété de Longueur CSS WIDTH permet de spécifier la longueur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CS...[ width ]