CSS : remplir le contenu d'une div de manière fluide

CSS : remplir le contenu d'une div de manière fluide photo

J'ai récemment été confonté à un problème lors de la réécriture du code CSS d'un formulaire Gravity Form : on voulait que le contenu remplisse la div, sans sauter de ligne lorsqu'il n'y en avait pas besoin. Je pensais naïvement qu'un simple float:none et une largeur à 100% suffiraient : .gfield_label { float: none !important; width: 100% !important; } Mais cela a fini par chambouler tous les champs de formulaires : labels et champs n'étaient plus sur la même ligne. […]

Lire la suite »

HTML5 : corriger l’erreur "element link is missing required attribute property"

HTML5 : corriger l’erreur "element link is missing required attribute property" photo

Le problème : pas d'attribut property pour les feuilles de styles du corps de page Si, lors de la validation HTML5 de vos pages, vous obtenez le message d'erreur de validation suivant : "Element link is missing required attribute property" ... alors il y a fort à parier qu'une feuille de style (CSS) est appelée via une balise link dans le corps de votre page (body) au lieu d'être insérée dans l'entête (header) comme à l'accoutumée. Sous WordPress par exemple, […]

Lire la suite »

Nouveautés du site : hiver 2014-2015

gradient-optimisation

Pas mal de nouveautés ont fait leur apparition sur le site cet hiver. La plupart sont under the hood et donc invisibles mais pour le reste, voici ce qui a été ajouté, modifié ou retiré. Sécurisation du serveur email Sur le serveur de mail, j'ai ajouté l’authentification SPF, Sender-ID et DKIM à Postfix et Bind9 avec opendkim, ce qui permet de rendre les messages plus fiables puisqu'ils sont désormais signés lors de l'envoi du serveur. Cela permet notamment de ne […]

Lire la suite »

HTML5 : corriger l'erreur "The frameborder attribute on the iframe element is obsolete. Use CSS instead."

HTML5 : corriger l’erreur "element link is missing required attribute property" photo

Le problème : l'attribut HTML frameborder Si vous obtenez l'erreur : "The frameborder attribute on the iframe element is obsolete. Use CSS instead." sur le validateur HTML5 du W3C, c'est que le code de votre page HTML5 contient un élément <iframe> avec un attribut frameborder comme dans l'exemple suivant : <iframe frameborder="0" … /> La solution : la propriété CSS border Comme l'attribut frameborder n'est plus présent dans HTML5, il faut utiliser la propriété border en CSS à la place […]

Lire la suite »

HTML5 : corriger l'erreur "The scrolling attribute on the iframe element is obsolete. Use CSS instead."

HTML5 : corriger l’erreur "element link is missing required attribute property" photo

Le problème : l'attribut HTML scrolling Si, au détour d'une validation du code HTML5 de votre page, vous obtenez l'erreur suivante: "The scrolling attribute on the iframe element is obsolete. Use CSS instead" ... c'est que le code de votre page HTML5 contient un élément <iframe> avec un attribut scrolling comme dans le code suivant : <iframe scrolling="no" … /> La solution : la propriété CSS overflow Comme l'attribut scrolling ne fait plus partie des spécifications HTML5, il faut utiliser […]

Lire la suite »

jQuery : script toggle pour afficher et cacher de multiples blocs HTML

jQuery : script utilisant la fonction toggle pour afficher/cacher un bloc HTML photo

J'ai écrit il y a quelques temps un script jQuery utilisant la fonction toggle pour afficher/cacher un seul bloc HTML mais pas mal de gens m'ont demandé comment faire pour afficher plusieurs blocs HTML . Voici comment s'y prendre, en utilisant les fonctions jQuery .slideup(), .slidedown() et .closest(). Démo Article A Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam […]

Lire la suite »

Mise à jour du site du Centre de Kriya Yoga France : v4.0

Mise à jour du site du Centre de Kriya Yoga France : v4.0 photo

Il y a quelques mois de cela, le site du Centre de Kriya Yoga France a eu droit à un léger rafraichissement de son style : un peu plus de lisibilité, moins de fonds colorés, un peu plus de finesse dans les traits. C'était juste un petit coup de plumeau mais comme j'ai oublié de vous en parler, voici une petite capture d'écran : Mais cette semaine, j'ai retroussé mes manches et suis totalement passé à l'offensive : redéfinition des […]

Lire la suite »

Nouveautés du site : septembre 2014

(Avec un peu de retard) et après des vacances fort reposantes, voici les quelques derniers ajouts et améliorations du site : [+] WordPress : transformation des pages en articles. Avec la suppression des dates dans les URLs (link), il n'y a plus aucune raison d'avoir du contenu dans des pages. Le site passe donc de 230 pages à... seulement douze. Je garde juste les pages institutionnelles : contact, à propos etc. Un plugin m'a beaucoup aidé : Vice Versa. [+] […]

Lire la suite »

Nouveautés du site : hiver 2013 - printemps 2014

Voici une petite liste des derniers ajouts, modifications et améliorations du site ces derniers mois : [*] PHP : déplacement de mes bouts de code du fichier functions.php pour les organiser dans un fichier-plugin. [*] HTML : ajout des meta Dublin Core sur la page d'accueil, passage des balises H2 en H1 pour les titres des articles, correction du code HTML5 parce que le validateur W3C a changé ses recommandations. [*] CSS : nettoyage du code CSS. J'ai remplacé les […]

Lire la suite »

Améliorer ses graphiques avec le minimalisme

graphiques-plus-lisibles

Aujourd'hui, j'ai trouvé cette petite animation qui explique comment créer des graphiques plus attirants et plus lisibles : Il est donc utile de retirer le fond, les étiquettes et légendes redondantes, les bordures, le nombre de couleurs, les effets spéciaux et la mise en gras. Il faut adoucir les étiquettes en mettant du gris au lieu du noir et adoucir voire supprimer les lignes. Et enfin, ne garder que les étiquettes ou titres qui ont le plus d'impact pour la […]

Lire la suite »

Nouveautés du site : été-automne 2013

Voici les quelques mises à jour du serveur et du site depuis quelques mois : [+] Serveur : JetPack qui me permet d'avoir un module de statistiques extrêmement simple et qui ne casse pas le code du site. J'ai désactivé la plupart des modules car certains cassent la validation HTML. Le module Contact conserve une trace de tous les messages de la page Contact dans la base de données... pas vraiment idéal vus les spams. J'ai installé Fast Secure Contact […]

Lire la suite »

Pin It on Pinterest

Spelling error report

The following text will be sent to our editors: