Date de création le 22/06/2005
Nbre de pages vues total: 2 910 727
Nbre de Visiteurs uniques total: 735 227

Records :
6627 pages vues le 16/05/2007
1681 visiteurs uniques le 21/05/2007
Nbre de lecteurs feedburner max: 164

Cependant il venu pour moi le temps de vous dire au revoir. J'arrête ce blog, il reste ouvert mais il n'y aura plus de nouvel article. J'essaierais de répondre exceptionnellement à quelques commentaires.

La raison: Le deuxième plus beau cadeau de ma vie naitra dans quelques mois et le blogging empiète trop sur ma vie personnelle... Chronophagie électronique je dis STOP et je garde dans mon coeur tous vos gentils commentaires.

Révérence.

J'avais expliqué, il y a quelques temps, comment réaliser des infobulles en CSS sans javascript.

Le problème avec cette méthode, était que si une infobulle venait recouvrir un lien lui même "infobullé", on le voyait apparaitre à travers cette infobulle!

Cette fois le problème est résolu, et ce, grâce à Stu Nicholls. En plus sa méthode permet de les rendre un peu plus jolies qu'auparavant.

Exemple

Lorem ipsum dolor sit amet, consectetuerTooltip0: fond jaune bordures fines grises adipiscing elit. Maecenas aliquet, lacus in molestie tempus, urna mi adipiscingTooltip1: fond bleu bordures épaisses blanches leo, vitae congue urna sem nec mauris. Nam convallis rhoncusTooltip2: fond noir bordures épaisses blanches erat. VestibulumTooltip3: fond jaunes bordures épaisses blanches blandit elit vel metus nonummyTooltip4: fond vert bordures épaisses blanches sagittis. Sed vehicula molestie tellus. Praesent eleifend quam eget tortor. Integer felis leo, malesuada id, feugiat eget, suscipit et, quam. SuspendisseTooltip5: fond vert bordures épaisses noires at arcu.

Code CSS

Pour obtenir le résultat de la première infobulle vous devez rajoutez dans votre CSS le code suivant:

image-infobulle.gif étant l'url de l'image ci-dessous que vous allez prendre soin d'enregistrer sur votre disque dur et d'uploader sur votre espace de stockage personnel:

Veillez s'il vous plaît à ne pas utiliser directement l'url de cette image mais bien celle que vous aurez uploader. Je suis en effet à même de la déplacer pour la maintenance du blog et elle n'apparaitra plus chez vous :(

Si pour vos infobulles, vous ne souhaitez pas avoir cette petite flèche à son sommet, il vous suffit de supprimer la ligne du dernier selecteur du code ci-dessus: a.tooltip:hover em span

Code HTML

Pour tous vos liens nécessitant une infobulle, il vous suffit de leur rajouter un appel à la class tooltip, de mettre dans le texte du lien le texte de l'infobulle encapsulé par des em ainsi qu'un balisage span vide pour positionner l'image:

Aller plus loin...

Infobulles avec des images

Bien entendu vous pouvez utiliser ces infobulles avec des images, il suffit de remplacer le texte du lien par une balise <img />:

Exemple:

Voir mon identité numérique

Personnalisez vos infobulles

Vous avez vu que dans mon exemple initial j'utilise 6 styles différents d'infobulles. Pour ne pas surcharger l'article, je n'ai mis que le code de la première infobulle. Vous l'avez compris, pour passer d'un style à l'autre il suffit de modifier quelques valeurs de propriétés dans le css. Pour vous guidez voici ce qu'il faut savoir:

Dans le sélecteur a.tooltip:hover em, top permet de positionner la hauteur de l'infobulle, et left son placement horizontal, notez que dans mon exemple sa valeur est négative afin que l'infobulle soit en retrait du texte survolé. color indique la couleur de la police de l'infobulle et background sa couleur de fond. border permet d'indiquer la largeur des bordures de l'infobulle ainsi que son style et sa couleur. Pour finir, width renseigne la largeur de l'infobulle.

Le sélecteur a.tooltip:hover em span permet de positionner une image en haut de l'infobulle lui donnant ce style particulier de bulle de BD. top doit correspondre à la valeur négative de la hauteur de l'image, left la positionne horizontalement par rapport au début de l'infobulle, height et width correspondent respectivement à la hauteur et la largeur de l'image, et enfin, background permet de renseigner l'url de l'image

Ci-dessous, retrouvez les différentes images utilisés pour les exemples présentés plus haut, avec le code couleur de background, le code couleur des bordures, la largeur des bordures et la taille de l'image (hauteur x width)

#ffc / #bbb / 1px / (7px x 11px)

#c3d9ff / #fff / 4px / (14px x 29px)

#000 / #fff / 4px / (14px x 29px)

#ff8 / #fff / 4px / (14px x 29px)

#cdeb8b / #fff / 4px / (14px x 29px)

#cdeb8b / #000 / 4px / (14px x 29px)

Bien entendu rien ne vous empêche de modifier ces images comme bon vous semble (couleur, taille, forme), avec un peu d'imagination et l'utilisation de logiciels d'édition d'images comme The Gimp, je suis sûr que vous pouvez faire de très belles choses :)

Z-index et problème de superposition avec flash

Si vos infobulles ne se superposent pas à une animation flash (dailymotion, youtube...) de votre blog, ne cherchez pas à modifier le z-index du code proposé... cela vient du flash!

Pour y remédier il suffit de rajouter un paramètre de transparence à votre animation:

Pour la balise <object>, rajoutez une balise <param name="wmode" value="transparent">

Pour la balise <embed>, rajoutez l'attribut wmode="transparent"

Bonne manip'

Aujourd'hui quelques services en ligne utiles relatif aux email.

Vous n'êtes pas sans savoir qu'il ne faut pas laisser votre email sur internet (à part pour s'abonner à des services et faire des achats en ligne) sinon vous vous exposez à une attaque de SPAM en bonnets difformes... euh pardon, en bonne et due forme.

Vous connaissez sans doute cerbermail. C'est le service que j'utilise pour que vous me laissiez un mail. Il n'est pas très glam, mais fonctionne très bien. L'internaute qui veut vous contacter doit répondre à un test CAPTCHA afin d'accéder à votre email. Simple, efficace! Exemple.

Voici un nouveau service (trouvé sur Niuomedia), Contactify, qui permet cette fois de ne pas divulguer votre email en fournissant un formulaire de contact sécurisé, là encore, par un test CAPTCHA. Exemple.

Attention, j'ai été étonné de pouvoir accéder à l'adresse http://www.contactify.com/images/, répertoire contenant les images du site. Normalement, il devrait y avoir un message indiquant que l'on n'est pas habilité à y accéder. J'espère que la base de donnée n'est pas aussi accessible ;)

Si vous souhaitez un email à SPAM, oui oui ça peut arriver... vous pouvez utiliser les services de Jetable.org qui vous fourni pour une heure, un jour, une semaine ou un mois, une adresse mail temporaire.

Encore plus fort que jetable.org, puisque vous ne donnez même pas votre email au service, 10minuteMail. Ce service vous attribu pour 10 minutes un email jetable. Vous pouvez à tout moment prolonger sa durée de vie de 10 minutes d'un simple clique. Notez que les messages reçus apparaissent directement dans l'interface du site. Excellentissime!

Maintenant passons aux services "poussés" avec Xfruits.com. Ce service propose de nombreuses "briques fonctionnelles" basées sur l'exploitation de fichier XML. Concernant les emails, 2 briques proposent respectivement de transformer les mails que vous recevez en flux RSS (MAIL to RSS) ou bien de recevoir en tant que mail un flux RSS (RSS to MAIL). Si vous combinez cette brique avec la brique AGGREGATOR RSS, vous pouvez recevoir dans un simple mail tous les jours ou toutes les heures tous les flux RSS que vous lisez habituellement sur la toile ou dans votre aggrégateur.

Pour les fans de vidéo, MailEmotion permet d'envoyer par mail avec une simplicifté déconcertante vos vidéos. (Vu sur Altaïde)

Et vous, connaissez-vous d'autres services mail intéressants ?

Vous avez été nombreux à me demander comment faire ce bouton fixe "haut de page" en bas à droite de mon blog. Si vous utilisez Internet Explorer, vous ne voyez pas de quoi je parle, alors voici une copie d'écran.

Je vous livre aujourd'hui le secret en l'adaptant pour en faire un menu utilisable et visible sous Firefox et Internet Explorer 7.

Donc, si vous utilisez l'un des navigateurs cités ci-dessus, vous devez voir en bas à droite quelque chose qui ressemble à ça.

Vous rêvez de la même chose??? Allez zou, un peu d'HTML, un peu de CSS et le tour sera joué!.

Réponses aux questions que vous allez peut-être vous poser

Pourquoi ça marche qu'à partir d'IE7 ? Parce qu'avant cette version d'Internet Explorer, la valeur fixed de la propriété CSS position n'était pas correctement interprétée.

Pourquoi je n'arrive pas à lire les commentaires de cet article? Parce que vous utilisez Inetrnet Explorer inférieur à 7 et que j'ai fait une petite bidouille pas très propre avec les commentaires conditionels pour gérer l'affichage de ce menu sans supprimer mon bouton "haut de page". De toute manière si vous n'utilisez pas FF ou IE7 cet article ne vous intéresse pas... alors pourquoi lire les commentaires :)

... Je compléterais en fonctions des questions récurentes en commentaires :)

Etape 1: l'HTML

Tout d'abord mettons en oeuvre le contenu du menu sur votre blog. Pour cela en mode source (mode HTML) saisissez le code suivant le plus bas possible dans le flux de votre blog (dans le module "pied de page" pour les OverBlogueurs):

La première ligne permet de masquer l'affichage de ce menu pour les versions d'Internet Explorer ne supportant pas ce coding. Vous trouverez plus d'info sur cette syntaxe dans mon article: Commentaires conditionnels pour IE.

Pour le reste du code, veillez à bien renseigner url-de-votre-blog, url-de-votre-flux-rss et Titre-pour-le-favoris.

Notez les points suivants:

• Le lien identifié par home reroute vers la page d'accueil de votre blog.
• Le lien identifié par up renvoi vers une ancre en haut de votre blog. Pour plus d'info consulter mon article: Naviguer dans une page grâce aux ancres. Si vous souhaitez comme moi un effet de scrolling plus "smooth", consulter mon article: Scriptaculous: Utilisation des effets. L'ancre utilisé dans le code ci-dessus fonctionne pour les blogs OverBlog.
• Le lien identifié par down renvoi vers une ancre en bas de votre blog
• Le lien identifié par rss permet à vos lecteurs souhaitant s'abonner à votre flux RSS de récupérer l'url de ce flux. OverBlogueurs, l'url de votre flux RSS2 est constitué comme suit: url-de-votre-blog/rss2.php. Vous pouvez aussi utiliser votre compte feedburner si vous en avez un. Plus d'info sur mon billet: Statistiques et flux RSS
• Le lien identifié par email permet à vos lecteurs de vous contacter directement. Je vous conseil toutefois de ne pas utilser un mailto: afin d'éviter les SPAMs. Préferez l'option Cerbermail qui empêche les robots de récupérer votre email en forçant l'utilisateur à saisir un CAPTCHA. Vous pouvez aussi utiliser votre Ziki. Plus d'info dans mon article: Je fais mon «blogging out»
• Le lien identifié par favoris permet à vos lecteur de mettre votre blog en favoris aussi bien sous Internet Explorer que Firefox. Attention lorsque vous renseignez Titre-pour-le-favoris, ce titre ne doit pas contenir d'apostrophe (') ou alors pensez à échaper ce caractère!

Etape 2: Télécharger les images

Les images utilisées pour ce menu proviennent de l'excellent Fam Fam Fam et sont libres de droits. Vous pouvez les télécharger en faisant un "clique droit > enregistrer sous..." sur chaucune d'elles:

Etape 3: Uploadez les images

Mettez maintenant à dispo sur Internet ces images, vous pouvez utilisez votre espace de stockage préféré, l'essentiel étant de veillez à récupérer l'url de chacune de vos images afin de les renseigner dans le code CSS expliqué ci-après.

Etape 4: Code CSS

Dans votre feuille de style, rajouter le code suivant:

Il ne reste plus qu'à videz le cache de votre navigateur, en visualisant votre blog: Ctrl + F5 afin de charger la CSS modifiée. Pensez aussi à prévenir vos lecteurs ;)

Etape 5: Bonnnnnnn... je vous connais

Pour customiser ce menu, vous avez bien sûr tout loisir de faire joujou avec les codes ci-dessus.

Quelques pistes pour ne pas tout casser:

• Pour "décoller" le menu des bords de la fenêtre, jouer sur les valeurs des propriétés bottom et right de l'identifiant #fixedmenu.
• Si vous préférez le menu à gauche, remplacez right par left
• Si vous préférez le menu en haut, remplacez bottom par top et positionnez le code HTML du menu le plus haut possible dans votre blog (l'entête par exemple)
• Si vous voulez changer les images, pensez que les liens doivent avoir la même largeur (width) et hauteur (height) que celles de vos images
• Vous pouvez rajouter autant de "bouton" au menu que vous le souhaitez

Bien sûr comme d'habitude, si vous avez un souci pour intégrer ce menu à votre blog, ou si vous avez besoin d'aide pour une customisation, laissez moi un commentaire.

Liens

Adaptation de ce menu sous Wordpress par Alexandre.

Bon blogging.

Entre 18H et 20H la matérialisation des moyens de communication a eu lieu!

J'ai rencontré en chair et en os Catgeisha, Bouc & Moustache, Titia, Cln, Denis, Epikt, Gros Louis, et Palmito. Tous sont modérateurs, aidants et/ou blogeurs sur OverBlog.

J'ai passé un moment très agréable en leur compagnie, même si ce fût trop court pour me dérider (je suis un grand timide) mais suffisament long pour me donner envie de lire, relire ou découvrir leur blog respectif.

Je garde surtout de cette expérience une image différente de celle que je m'étais faite de chacun d'eux et une très grande envie de faire mon «blogging out» pour que vous ayez une idée de qui se cache vraiment derrière mon pseudo, bref gérer mon identité numérique.

En lisant les 10 raisons de créer son Ziki, j'ai donc décidé de me dévoiler sur .

NB: On ne plaisante pas avec le nom de famille :)

Vous avez été nombreux à lire et commenter l'article Menu déroulant en CSS sans javascript, compatible IE et FF tout niveau.

Cette solution que j'avais proposé en novembre 2005, était une bidouille pour que les utilisateurs d'overblog n'ayant pas accès au javascript puissent avoir un menu déroulant. Comme indiqué dans l'article en question, cette bidouille n'est pas conforme aux standards, n'est pas intelligente car redondante et est assez omplexe à mettre en place, d'où le nombre de commentaire :)

Avec l'apparition d'Internet Explorer 7 qui prend en compte la pseudo-classe hover sur les éléments autres que les liens, ce menu peut selon les configurations être complètement ACP.

Déjà à l'époque - que le temps passe vite - je préconisais l'utilisation du javascript et je donnais comme référence le menu suckerfish expliqué en détail sur htmldog.

Voici aujourd'hui le "comment faut faire" à la sauce PêUR pour installer ce menu.

Préambule

Pour les habitués de ma petite boutique, c'est le menu que j'utilisais pour ma V4.0 dont vous pouvez voir la demonstration ici. Notez que dans cet article, c'est la version «simple» que j'explique, la version «multi-niveau» que j'utilisais dans la v4.0 sera expliqué la semaine prochaine :)

Pour installer ce menu sur votre blog/site, il vous faudra insérer un bout de code javascript, un bout de code HTML et un bout de code CSS.

Etape 1: le Javascript

Le code suivant est à insérer entre les balises <head> et </head> de votre blog/site. Si vous n'avez pas accès à ces balises (votre blog est hebergé par Overblog par exemple), vous pouvez le mettre en mode source dans votre entête:

Ce code, basé sur un article d'ALA, permet grosso-modo d'effectuer en javascript l'effet de la pseudo-classe CSS :hover sur les éléments li. En d'autres termes, c'est lui qui va permettre le "déroulement" du menu.

Etape 2: le code HTML

Le code ci-dessous est à insérer en mode HTML dans le flux de votre document à l'endroit où vous souhaitez voir apparaitre votre menu:

Comme vous vous en doutez, il faut remplacer les #nogo par les URLs des pages vers lesquelles vous souhaitez que soient redirigés vos lecteurs.

Les "menu x" et "sous-menu x.n" doivent être remplacés par le texte significatif que vous souhaitez voir dans le menu.

Si vous décidez de modifier l'id ("nav" dans notre exemple) de l'élément ul, veillez à le modifier aussi dans le javascript (je l'ai mis en valeur en gras) et bien entendu dans la CSS.

Notez que j'ai englobé le menu par une div identifiée "container" qui pourra être utile à certains d'entre vous en cas de positionnement absolu de ce menu.

Etape 3: le code de la CSS

Ci-dessous, le code à mettre dans votre CSS:

Ce code ne constitue que la base à insérer dans votre CSS pour que que le menu fonctionne.

A vous d'ajouter les propriétés qui permettront d'accorder le style de votre menu à votre blog. Pour cela vous avez toute la panoplie des propriétés CSS (font, background, color, etc). Vous trouverez dans les articles Vos premiers pas en CSS et Typographie et CSS des informations qui vous aideront à "styler" ce menu.

A titre d'exemple je vous renvoie sur la très belle mise en situation faite par htmldog. Je vous propose aussi ce petit exemple sur lequel vous pouvez télécharger le css associé... comme ça vous pouvez vous faire une idée des modifications à apporter.

A bientôt

Bon, et bien voilà! Si vous avez des questions, ben, comme d'hab, un petit commentaire et j'essaie de répondre rapidement.

La semaine prochaine, ça se corse, la même chose mais multi-niveaux.

Bon blogging.

Suite à une question de All concernant l'article Menu CSS - Sliding doors (Horizontal) et la possibilité d'avoir les boutons les uns sous les autres, voici un article expliquant les modifications a apporter au code CSS pour un magnifique menu sliding doors vertical.

Prérequis

Le code HTML à utiliser et celui présenter dans l'article Menu CSS - Sliding doors (Horizontal)

Contrairement au menu horizontal, pour ce menu vertical, une seule possibilité s'offre à vous: les boutons de menu doivent être de largeur fixe.

Code CSS à utiliser

Le code modifié est le suivant:

Résultat

Avec les mêmes images que le menu horizontal:

Suite à une question de Smopuim concernant l'article Menu de navigation léger en CSS (3) et la possibilité de mettre une image en background, voici un nouveau lot de menu horizontaux avec la technique des «sliding doors» qui permet avec une seule image d'obtenir un effet hover du plus bel acabit.

Edit: Suite à la question de All sur cet artcile, vous trouverez une explication pour avoir ce menu sliding doors en mode vertical

Exemples

Menu 1 (ajustable):

Menu 2 (ajustable):

Menu 3 (ajustable):

Menu 4 (ajustable):

Menu 5 (fixe):

Menu 6 (fixe):

Menu 7 (fixe):

Technique

En fait le concept de «sliding doors» ou «portes coulissantes» est très simple, il est largement expliqué dans les liens que je cite dans le dernier paragraphe de cet article, toutefois on peut rapidement expliquer le principe comme suit:

On a, sur une seule image, l'image de l'état avant le passage de la souris superposée à l'image de l'état pendant le passage de la souris:

C'est cette image que l'on utilise en background des liens; en la calant sur la partie du haut pour les liens avant survol, et en la calant sur la partie du bas pour les liens pendant le survol. On tache évidement à faire en sorte que la hauteur du background affiché soit toujours celle de la moitié de l'image.

On comprend mieux l'utilisation de l'expression «portes coulissantes».

Code HTML à utilser

Le code HTML à utiliser (et à insérer en mode source) est le suivant:

Bien sûr, pensez à remplacer les #nogo par les urls vers lesquelles vos liens doivent pointer.

Codes CSS à utilser

2 possibilités s'offrent à vous: soit vous voulez des boutons de menu de largeur fixe, soit vous souhaitez des boutons qui s'adaptent à la taille du texte qu'ils contiennent.

Code CSS pour des boutons de largeur fixe

C'est ce code CSS que vous devez utiliser si vous souhaitez que tous les boutons aient la même taille (celle de votre background):

Vous devez renseigner la propriété height par la moitié de la hauteur de votre image. Dans tous les exemples de cet article, les images ont une hauteur de 64px, on mettra donc 32px.

C'est la même valeur que vous devez renseigner pour la propriété line-height, ainsi le texte des liens sera bien centré verticalement.

Pour la largeur des boutons, widh, vous devez saisir la largeur de votre image de fond. Dans mon exemple 200px.

Les propriétés text-decoration et text-align sont facultatives, elles permettent respectivement d'enlever le soulignement des liens et de centrer le texte des liens. Vous pouvez à loisir rajouter des propriétés liées au style de la police (font-family, font-size, font-weight, text-transform, ...)

Selon la feuille de style de votre blog/site, il est possible que vous ayez défini des couleurs de police précises pour les liens, couleurs qui ne correspondent pas aux couleurs souhaitées dans vos boutons. Pour les modifier, vous devez rajouter la propriété color avec la valeur souhaitée dans la partie adéquate: #nav1 li a:link, #nav1 li a:visited pour les liens avant survol et visités, et #nav1 li a:hover, #nav1 li a:active pour les liens au survol et actifs.

Pensez enfin à remplacer nav.gif par l'url de votre image de fond, et ce, dans les 2 appels à la propriété background. Dans le deuxième appel, les paramètres 0 -32px permettent d'afficher l'image de fond avec un décalage de 32px vers le haut, c'est l'effet «portes coulissantes». Vous l'aurez compris, -32px correspond à la moitié de la hauteur de votre image. Le signe négatif est important!

Notez que pour la propriété background, il est important en premier paramètre de mettre une couleur de fond. Dans l'exemple, j'ai mis #fff (blanc) pour le premier appel de la propriété et #000 (noir) pour le deuxième appel. Ces couleurs sont importantes dans les cas où le navigateur de vos visiteurs sont dans l'incapacité d'afficher l'image de fond (affichage des images désactivée, problème serveur, temps de réponse trop long...). Veillez donc à mettre des couleurs proches de l'image.

Les autres propriétés ne doivent pas être modifiées, les margin et padding à 0 permettent d'initialiser les marges externes et internes de la liste à puces, le display: inline combiné au float: left permettent d'aligner côte à côte des éléments qui sont pourtant définis en display: block, valeurs nécessaire pour pouvoir fixer la largeur et la hauteur de ces éléments.

Code CSS pour des boutons ajustables

C'est ce code CSS que vous devez utiliser si vous souhaitez que les boutons soient proportionnels à la largeur du texte qu'ils contiennent:

Les différences par rapport au code précédent, sont les suivantes:

La propriété width disparaît et est remplacée par une deuxième valeur de padding (20px dans l'exemple) qualifiant les marges internes gauche et droite des liens.

Dans la propriété background on renseigne un nouveau paramètre: repeat-x, qui permet de répéter selon l'axe des abcisses votre images de fond. Il faut veuiller à ce que cette image soit un motif répétitif. Vous aurez ainsi des boutons qui s'ajustent, dans la largeur, à la taile de vos liens.

Les autres propriétés sont expliquées au paragraphe précédent: Code CSS pour des boutons de largeur fixe

Images de fond

Vous trouverez ci-dessous les images utilisées pour les exemples du 1er paragraphe de cet article. Pour les télécharger, cliquez droit puis sélectionnez Enregistrer l'image sous...

Menu 1:

Menu 2:

Menu 3:

Menu 4:

Menu 5:

Menu 6:

Menu 7:

Quelques ressources

• Sliding doors of CSS [En]
• Sliding doors of CSS, part II [En]
• Les portes coulissantes de CSS [Fr]
• Les portes coulissantes de CSS, partie II [Fr]
• css4DesignR: Menu HTML et CSS, sliding doors et item current en PHP [Fr], si vous avez la main sur le php de votre blog, cette article vous permettra de conserver l'état du survol sur le bouton après avoir cliqué dessus afin de mieux savoir dans quelle partie du blog/site vous êtes.