Code-Web.org - Html / CSS

Quelques méthodes anti spam

Thierry Geindre — Thu, 15 May 2008 19:21:00 +0200

Développant depuis un certain temps des applications et sites web, j'ai de nombreuses fois été confronté au problème su spam. Au fil du temps j'ai pu mettre au point ou découvrir différentes solutions techniques pour lutter contre ce problème. Je vous en propose ici un petit tour d'horizon.

Captcha D'après Wikipédia : Un Captcha est une forme de test de Turing permettant de différencier de manière automatisée un utilisateur humain d'un ordinateur. Et vous avez probablement déjà rencontré ce genre de test. Il se caractérise très souvent par une image sur laquelle on fait apparaître une série de caractères qui seront à... Lire Quelques méthodes anti spam

Des formulaires accessibles

Thierry Geindre — Tue, 11 Mar 2008 16:54:00 +0000

Votre site passe au validateur du W3C? Parfait vous avez respecté une norme à la lettre en développant votre site et on ne peut que vous en féliciter. Pourquoi ne pas jeter un petit coup d'œil à vos formulaires en vous appuyant sur les quelques conseils que je vous donne dans cet article. Vous y trouverez quelques petites astuces pour rendre les formulaires plus accessibles et pratiques à utiliser. On y fera également un petit point sur l'emploi de javascript pour la validation ceux-ci.

Les balise oubliées du web Titre étrange me direz-vous, mais admettons que beaucoup de sites se privent de l'emploi des balises que nous allons voir. Et pour cause, elles ne sont absolument pas indispensables au bon fonctionnement d'un formulaire. Cependant, leur emploi pourra faciliter l'utilisation de vos formulaires par vos visiteurs, alors... Lire Des formulaires accessibles

Un arrière plan étirable

Thierry Geindre — Fri, 15 Feb 2008 22:32:00 +0000

Les propriétés CSS permettant d'appliquer une image d'arrière plan aux éléments d'une page, ou à la page elle même, ne permettent de couvrir toute la surface disponible que par répétition de l'image. Je vous propose ici une méthode permettant détirer l'image en hauteur et/ou en largeur en fonction de l'espace disponible. A noter qu'à l'inverse de beaucoup de solutions proposées sur la toile, celle que je vous propose n'utilise pas de java script.

Le principe Les propriétés CSS ne satisfaisant pas nos exigences, nous allons devoir utiliser une autre technique. Pour cela, nous utiliserons une classique image (balise <img ... />). La méthode consistera en fait à lui donner des dimensions à 100%. Elle s'étirera donc automatiquement en fonction des éventuels changements de dimensions.... Lire Un arrière plan étirable

Centrage vertical et horizontal

Thierry Geindre — Thu, 22 Nov 2007 17:09:00 +0000

S'il est simple de centrer horizontalement un bloque dans une page, il moins simple de le centrer verticalement. Nous verrons dans cette article une technique qui fonctionne uniquement grâce aux CSS et sur tous les navigateurs. Le tout en respectant les normes!

Le code HTML Il est on ne peut plus simple : <div id="centre"> <p>Je suis un bloque toujours centré! Essayez de redimensionner la fenêtre!</p> </div> Rien de très compliqué, un simple bloque contenant un peu de texte. Le code CSS On commence d'abord avec un hack pour Internet... Lire Centrage vertical et horizontal

Barres de défilement dans un bloque

Thierry Geindre — Wed, 21 Nov 2007 11:05:00 +0000

Certains diront "Ou comment imiter une iframe proprement"! C'est que nous allons voir dans cette article : reproduire le comportement d'une iframe mais sans tout les inconvénients de celle-ci et avec une seul page.

Pourquoi pas une iframe? Une iframe, n'est rien d'autre qu'une frame qui peut être placée n'importe où dans une page. Pour cette raison, elles pose les même problèmes qu'une frame classique. La théorie Il faut simplement savoir qu'il est possible de définir la façon dont va se comporter le navigateur avec un bloque lorsque le contenu de... Lire Barres de défilement dans un bloque

Effet encadrement photo avec ombre sur vos images

Thierry Geindre — Thu, 15 Nov 2007 10:56:00 +0000

Je vous propose de découvrir dans cet article comment donner à vos images un encadrement blanc, un contour gris et enfin une ombre. L'objectif est de leur donner l'apparence d'une photo papier surélevée par rapport à votre page. La technique qui sera présenté ici ne nécessitera aucune modification de vos images, et pourra donc s'appliquer à n'importe laquelle de façon automatique.

Notre objectif est de créer un système qui mettra en place, sur vos images, le cadre et l'ombre sans modifier l'image originale. Nous n'utiliserons ici que du CSS et une image. Le principe Il est possible d'afficher une image dans un bloque. On peut donc très facilement appliquer à ce bloque une marge interne (padding) de plusieurs pixels. Ceci... Lire Effet encadrement photo avec ombre sur vos images

Un min-height pour tous les navigateurs

Thierry Geindre — Wed, 07 Nov 2007 15:58:00 +0000

Parfois, certaines chartes graphiques requièrent que certains bloques d'une pages aient une hauteur minimale. Ce comportement peut être obtenu grâce à la propriété CSS min-height. Malheureusement, Internet Explorer ne reconnaît pas cette propriété... A cause de quoi, il faudra ruser pour obtenir le même comportement partout!

Cas général Pour tous les navigateurs modernes et respectueux des standards, il est possible de préciser une hauteur minimale pour les éléments de type bloques. On utilisera pour cela la proprièté CSS min-height. De la façon suivante par exemple : #monBloque { /* monBloque ne fera donc jamais moins de 50px de haut */... Lire Un min-height pour tous les navigateurs