Dakwamine

Étiquette : css

  • [Drupal] Variable de hauteur de barre d’outils d’administration

    Variable CSS pour la hauteur de la barre d’outils d’administration : --drupal-displace-offset-top

    Cette variable se met à jour automatiquement grâce au script JS displace.js intégré nativement dans Drupal.

    On pourra par exemple utiliser cette valeur pour décaler des éléments pour les éléments ancrés qu’on accède grâce au fragment d’URL (le dièse en fin d’URL). Par exemple :

    À noter qu’il existe également d’autres variables sur d’autres dimensions :

    Vous pouvez vous référer au fichier displace.js pour plus d’informations.

    Drupal : 10+

  • T&A — Un site superbe pour vous donner une autre approche du CSS

    *UPDATE* 08 août 2011
    Edition : précision dans le dernier paragraphe que les enfants pouvaient être flottants ou pas.

    Je voulais vous présenter ce blog que j’ai découvert récemment : http://matthewjamestaylor.com/ . Il y a de nombreuses petites astuces pour régler vos problèmes de colonnes à hauteur visuelle égale ou de positionnement du footer en bas de la fenêtre, entre autres.

    Les ajouts dans le HTML sont relativement négligeables, surtout si c’est pour avoir une compatibilité ascendante, parfois jusqu’à IE5.5, et sans Javascript !

    Par exemple, je me suis inspiré de cet article pour créer mes colonnes à hauteur visuelle égale des pages d’articles du prochain site de Fuu-Doh! : http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths.

    Concernant ce blog, j’ai presque la même approche du design de site en largeur pleine. Cela me fait plaisir de savoir que des gens essaient de lutter contre la tentation de la facilité avec les largeurs fixes. 🙂

    Pour finir, voici l’enseignement principal que j’en ai tiré : un élément flottant prendra toujours la hauteur de ses enfants, qu’il soit flottant ou pas…

    ps : Non, mon blog n’est pas un bon exemple de ce que j’aime vraiment 😛

  • font-family par défaut des balises <input/>

    Juste un petit billet pour dire que le texte contenu dans les balises <input/> aurait de base un font-family dépendant de l’OS. Si vous voulez un font-family particulier, il vous faudra le redéfinir explicitement sur la balise elle-même, sur son id ou sa class (elle ne prend pas en héritage le font-family de son parent).

    input{font-family:nom_de_la_police;}

  • Petite note concernant les DOCTYPE

    Ne jamais oublier de mettre un DOCTYPE dans une page web et toujours vérifier qu’elle est complète ET correcte.

    J’étais en train de naviguer sur un site web lorsque j’ai remarqué que le centrage du site ne fonctionnait pas sur Internet Explorer 8. J’ai mis en place mes solutions gagnantes pour le centrage du futur site de fuu-doh.com dans l’outil de débogage intégré à l’explorateur (touche F12 pour votre information).

    Hélas, malgré mes nombreuses tentatives, cela n’avait pas fonctionné. Puis j’ai remarqué que la syntaxe n’était pas du XHTML, mais apparemment du HTML 4.0 Transitional. Ce n’est pas un mal en soi, j’ai juste dû m’habituer à ces horribles balises en majuscules. Puis j’ai sauvegardé en local cette fameuse page pour aller plus loin dans le débogage en supprimant tout ce qui n’était pas nécessaire, en ne laissant qu’un seul <div> à centrer. En vain.

    À ce moment là, je n’avais plus comme solution que de changer la page de HTML 4.0 Transitional vers XHTML. Et là, ça fonctionne ! Alors, en fait, ce n’est pas grâce au XHTML que cela avait fonctionné. Lorsque j’ai relu la version précédente, le DOCTYPE était… incomplet. Il manquait le lien vers la page du DTD situé sur le site w3.org . Ainsi, le fait de n’avoir que ça :

    … va empêcher le bon traitement de certaines fonctionnalités de la page, notamment le CSS et le fameux margin-left:auto et margin-right:auto qui centrent le contenu. Alors que le DOCTYPE suivant active de nouveau ces fonctionnalités particulières :

    En espérant rendre service aux rares malheureux développeurs de sites web qui sont tombés dans ce piège.