Country’s Blog

Rassurez-vous je ne vais pas vous parler de foot, juste vous présenter ce pour quoi j’ai beaucoup moins bloggué ces derniers temps, à savoir la nouvelle version du site PSG.FR

Lire la suite »

Hop, la 3ème édition du WaSP café aura lieue le 17 avril (inscrivez-vous !) avec, comme la dernière fois, 3 ateliers : Accessibilité, CSS et Sémantique ⁽¹⁾. La dernière fois j’avais choisi l’atelier Javascript et je n’avais franchement pas été déçu. Cette fois-ci j’ai choisi l’atelier CSS dont le thème est “Organiser et gérer vos CSS”, l’occasion pour moi d’évoquer ici comment j’ai choisi d’organiser les miens pour le dernier projet sur lequel je travaille. Lire la suite »

Vous vous demandez encore ce que c’est vraiment un intégrateur web ? Voila un très bon article qui devrait vous aider à comprendre ces drôles d’oiseaux :

La vie des intégrateurs, Chapitre I : Les intégrateurs sont-ils des développeurs ou des webdesigners ?

Et j’en profite pour ressortir d’autres articles sur le sujet :

• What does a front-end web developer do? (en)
  
• En quoi consiste le métier d’intégrateur Web ?

Sur les sites à fort contenu éditorial on a souvent une liste d’actualités accompagnées d’une illustration, dans ce genre là :

La plupart du temps il s’agit d’une simple image placée avant le titre à laquelle on a donné un float:left.

#news li {
 clear:both;
}

#news img {
 float:left;
}

<ul id="news">
 <li>
  <img src="1.jpg" alt="" />
  <h2>Lorem ipsum dolor</h2>
  <p>Lorem ipsum dolor sit amet, ...</p>
 </li>
 <li>
  <img src="2.jpg" alt="" />
  <h2>Lorem ipsum dolor</h2>
  <p>Lorem ipsum dolor sit amet, ...</p>
 </li>
 [...]
</ul>

Hors ce n’est pas des plus logiques d’avoir l’image d’illustration avant le titre. Dans notre code l’image devrait être placée après le titre (elle pourrait aussi être placée après la description).

<ul id="news">
 <li>
  <h2>Lorem ipsum dolor</h2>
  <img src="1.jpg" alt="" />
  <p>Lorem ipsum dolor sit amet, ...</p>
 </li>
 <li>
  <h2>Lorem ipsum dolor</h2>
  <img src="2.jpg" alt="" />
  <p>Lorem ipsum dolor sit amet, ...</p>
 </li>
 [...]
</ul>

Ce qui, avec un float:left pose problème au niveau de la présentation souhaitée (le titre serai placé au-dessus de l’image).

La solution est d’utiliser le positionnement. Appliquons un positionnement relatif au conteneur de l’actualité (normalement un li si il s’agit d’une liste d’actualités comme ci-dessus) puis un positionnement absolu à l’image et plaçons la dans le coin supérieur gauche.

Petits détails supplémentaires :

• Ajouter un padding à gauche égal à la largeur de votre image (ou un peu plus grand si vous voulez une marge entre l’image et le texte) afin que le texte ne passe pas en dessous.
• Ajouter une hauteur minimum au conteneur, sinon, lorsque le texte sera trop court, nos actualités vont se superposer (hack pour IE6 afin “d’émuler” le min-height, si possible à mettre dans une feuille de style séparée avec des commentaires conditionnels).

A noter que l’ajout d’une hauteur permet d’activer le hasLayout sous IE6, ce qui corrige un bug par la même occasion (oui, un hack pour une chose corrige un bug pour une autre, IE6 est vachement bien pensé en fait…).

#news li {
 position:relative;
 padding-left:160px;
 min-height:90px;
 height:auto !important;
 height:90px;
}

#news img {
 position:absolute;
 left:0;
 top:0;
}

Vous pouvez voir le résultat final sur cette page.

Le 28 janvier prochain je serai à la seconde édition du Wasp Café, ça va troller discuter standards, accessibilité, CSS, Javascript, etc.

Bref, une bonne soirée en perspective

Vous avez sûrement déjà fait un menu déroulant en CSS/(x)HTML (ul/li , :hover, etc. enfin vous voyez de quoi je parle).

Problème : sur ce genre de menu si vous essayer de naviguer au clavier, alors vous ne pouvez pas voir les liens des sous-menu. Alors voila un petit truc pour les afficher dans ce cas là. Lire la suite »

Il y a des jours comme ça où on se demande si on n’a pas oublié de se réveiller.

Pour commencer mon côté gamer a tilté à l’annonce du teaser de Duke Nukem Forever (sortie prévue pour Noël 1998 d’après mon vieux magazine Gen4).

Puis histoire de finir la soirée en beauté, la révélation sur le blog d’IE : la version de développement d’Internet Explorer 8 passe le test Acid2 !

Lire la suite »

Avec quelques jours de retard, voila mon petit retour sur Paris Web 2007.

Alors direct : encore mieux que l’édition 2006 ! Une salle superbe (wifi et des prises électriques pour les pc portables, la classe), des conférences très intéressantes, les fameux ateliers qu’il faisaient cruellement défaut l’année passée, … Bref que du bon.

Bon je ne vais pas résumer toutes les conférences (j’aurai l’occasion de le faire plus tard) mais un petit aperçu de ce que j’ai retenu des conférences et celles que j’ai le plus appréciées.
Lire la suite »

Après la petite présentation de Brooser, je vais maintenant expliquer comment réaliser un plugin pour celui-ci. Les plugins sont très simples, il servent juste à afficher l’aperçu d’un type de fichier lors de sa sélection dans le browser.

Pour cet exemple nous aller créer un petit plugin tout simple qui va nous permettre de faire un aperçu des vidéos quicktime (.mov).
Lire la suite »

La technique présentée ici a peut être été déjà exploitée ailleurs, si vous avez des liens vers des articles qui en parlent merci de m’en faire part

On as tous eu ça à faire en CSS : remplacer du texte (généralement un titre) par une image.

Il existe un bon paquet de techniques pour faire cela :

• span avec un display:none (déconseillé)
• la propriété CSS clip (nécessite un hack pour IE)
• sIFR : remplacement avec du javascript + flash (un peu bourrin à mon goût)
• text-indent négatif sur le texte (sûrement la plus répandue car la plus simple à mettre en oeuvre)
• un simple tag img (le plus accessible, mais ne sépare par le contenu de la présentation)
• etc.

Jusqu’à maintenant j’utilisai la technique tu texte-indent qui est très efficace. Mais elle possède le même défaut que les autres techniques à base de CSS à savoir : si les images sont désactivées (et pas le CSS) aucun texte n’est affiché.

J’ai pensé à une technique où ce serait l’image qui cacherait le texte et que donc dans le cas où l’image serait manquante alors le texte resterait visible.

On commence avec un titre tout ce qu’il y a de plus classique :

<h1>Shibby</h1>

Seulement nous allons avoir besoin de 2 éléments : le titre et un élément qui viendra se placer par dessus lui afin de masquer le texte. Nous rajoutons donc un span :

<h1>Shibby<span></span></h1>

Nous allons positionner le titre en position relative, ainsi il nous sera aisé de placer le span à l’intérieur de celui-ci :

h1 {  position:relative; }

Le span quand à lui sera en position absolue et placé en haut à gauche

h1 span {  position:absolute;  top:0;  left:0; }

L’image de remplacement sera en image de fond tu span, le h1 aura la taille de l’image (ici 185×35) et le span 100% en hauteur et en largeur, ce qui donne :

h1 {  position:relative;  width:185px;  height:35px; } h1 span {  position:absolute;  left:0;  top:0;  background: url(shibby.png) no-repeat left top;  width:100%;  height:100%; } 

Et voila notre titre stylé :

Images activées :

Shibby

Images désactivées :

Shibby

Cette technique n’est bien sûr pas exempt de défauts (ça serait trop beau) :

• Impossible de sélectionner le texte lorsque l’image est absente (on a un élément “transparent” par dessus qui empêche la sélection)
• Ajout d’une balise span supplémentaire dans le code
• Il se peut que le texte “dépasse” derrière l’image, un simple overflow:hidden empêchera que cela ne se produise mais tronquera alors le texte lorsque les images seront désactivées.
• Edit 21/04/2007 : Comme on me l’a fait remarquer dans les commentaires, cela pose aussi problème si l’image utilisée est en partie transparente (on risque de voir le texte à travers).

Ce n’est bien sûr pas la solution ultime pour le remplacement d’image (qui ne viendra vraisemblablement qu’avec CSS3) mais elle a l’avantage de pouvoir afficher le texte même lorsque les images (mais pas le CSS) sont désactivées.