Largeur des blocs en CSS : bien comprendre les “width” et “padding”

En très court, très simple : il faut comprendre que d’après les normes du W3C, le width est censé représenter la largeur du bloc de texte, et le padding la marge entre la bordure et le bloc de texte. On aurait donc une largeur de bloc = width + padding.

Dans la réalité, ceci fonctionne avec Firefox, mais pas avec Internet Explorer.

Voici donc un hack très facile à mettre en pratique, pour un bloc dont on veut que la largeur constatée (width + padding) soit à 160px :

width: 160px; /* pour ie */
padding-left: 10px;
voice-family: "\"}\"";
voice-family:inherit;
width: 150px; /* pour les respectueux des standards */

Voici la source qui ne semble plus être disponible actuellement sur le site OpenWeb.eu.org : Gérer les modèles de boîte standard et Microsoft

Proposé par Rom's Catégorisé dans : CSS et mise en forme 0 commentaire » décembre 2007

Menu Horizontal Déroulant | jQuery

Voici un menu déroulant horizontal fait avec jQuery. La source modifiée : http://webexpose.org/2006/12/28/jquery-pop-up-menu-tutorial/

L’exemple à visualiser est ici : Exemple Menu Déroulant Horizontal

L’exemple à télécharger est ici : Fichiers Compressés Exemple Menu Horizontal Déroulant

La documentation est ici : Documentation Visual jQuery 1.1.2 vous trouverez notamment des effets différents pour l’ouverture du menu, etc.

Attention si vous changez le mode d’effet (dans le fichier menu.js) vers les slideUp et slideDown, j’ai remarqué un bug tout de même sur Firefox : Lorsque vous sortez du menu par le haut et que vous y rentrez avant que l’effet ne soit terminé, il se met à clignoter.. Curieux. J’ai préféré le fadeIn et fadeOut à cause de cela.

Proposé par Rom's Catégorisé dans : CSS et mise en forme, jQuery 0 commentaire » novembre 2007