Les standards ont du bon. Malgré tout, parfois, ils apportent leurs lots de petits problèmes sur lesquels on peut passer quelques heures en s’arrachant les cheveux (et il m’en reste si peu…)
Dernier exemple en date, ce sont 2 ou 3 mystérieux pixels qui apparaissent sous les balises images (img) lorsqu’on utilise le standard XHTML Strict. Pour illustrer le phénomène, prenons ce cas assez classique de montage d’image découpée en plusieurs tranches assemblées dans un tableau.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/P1010478_01.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="img/P1010478_02.jpg" alt="" /></td>
</tr>
</table>
</body>
</html> |
Ce qui donne comme résultat (sous Firefox) :
Les block images « poussent » leurs conteneurs (en l’occurrence la cellule de tableau) de quelques pixel en bas. Ca n’a évidement rien de très esthétique et ça n’est pas le résultat attendu.
Donc, à moins de changer la déclaration du type de document HTML, il va falloir ruser.
Pour contourner ce problème, il faudra définir l’affichage de vos images en mode « block » dans votre CSS. Vous pouvez le faire de plusieurs façons :
- Systématiquement dans une déclaration CSS globale de vos balises img, l’inconvénient étant que celles-ci produiront un retour à la ligne (dans ce cas, il faudra les définir localement en mode
float afin d’éviter ces retours).
- En déclarant localement un style dans vos balises
img de type style="display:block;".
- En créant une classe spécifique que vous affecterez aux images nécessitant l’ajustement.
Cette dernière solution peut donner au final :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style type="text/css" media="screen">
.block {
display:block;
}
</style>
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/P1010478_01.jpg" alt="" class="block" /></td>
</tr>
<tr>
<td><img src="img/P1010478_02.jpg" alt="" class="block" /></td>
</tr>
</table>
</body>
</html> |
Et voila le rendu enfin correct :
Allez, à nous les montages de fou en XHTML Strict 
Alban Jubert Divers Astuce, CSS, Images, Standard, XHTML
Un article intéressant vient d’être publié sur The Bakery. Il décrit une astuce permettant de tirer parti des fonctionnalité d’auto-complétion de Eclipse/Aptana pour le développement de projets CakePHP (pour les modèles et les helpers notamment).
Ca n’est pas aussi simple qu’avec un projet Yii Framework (il n’y a rien à faire), mais ça a le mérite de fonctionner 
Alban Jubert Outils de développement, PHP Aptana, Astuce, CakePHP, Eclipse, IDE, Outil
On continu le tour des astuces pour Yii Framework avec un petit tuto qui montre comment mutualiser certains comportements et paramètres entre tous les contrôleurs d’une même application.
Bonne lecture.
Alban Jubert PHP Astuce, PHP, Tutorial, Yii framework
Un petit tuto Yii qui montre comment utiliser les fonctions de « profiling » permettant d’améliorer les performances d’une application est disponible ici. Vos remarques et commentaires sont les bienvenus.
Bonne lecture
Alban Jubert PHP Astuce, Performances, PHP, Tutorial, Yii framework
Vous souhaitez alerter vos utilisateurs s’ils ont modifié le contenu d’un formulaire et qu’ils s’apprêtent à quitter la page par l’intermédiaire d’un lien sans avoir validé ?
Un petit javascript permet de facilement accomplir cela.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| jQuery(document).ready(function() {
$(window).attr("isDirty", false);
$(":input").bind("change", function(event) {
if (event.target.value != event.target.defaultValue) {
$(window).attr("isDirty", true);
}
});
$(":checkbox,:radio").bind("click", function(event) {
if (event.target.checked != event.target.defaultChecked) {
$(window).attr("isDirty", true);
}
});
$("a, button").bind("click", function(event) {
if (window.isDirty) {
return confirm("Etes-vous sûre de vouloir quitter cette page sans enregistrer ?");
}
});
} |
L’astuce consiste à créer un attribut isDirty attaché à la page et à en changer l’état dès qu’une valeur de champ a été modifiée. Au chargement de la page, on attache des listeners aux champs, checkbox et boutons radio qui vont scruter leurs éventuelles modifications. Lorsque l’utilisateur clique sur un lien, on vérifie juste la valeur de cet état pour déclencher une demande de confirmation le cas échéant (qui dans le cas négatif, interrompt l’événement de changement de page).
On peut facilement adapter ce code à Prototype ou à MooTools afin de réaliser la même chose avec ses librairies.
Alban Jubert Javascript Astuce, Formulaire, jQuery, Validation
Dans Flash CS4, l’aide n’est plus intégrée dans l’application. Quand on clique sur F1, on ouvre le navigateur et on se connecte à l’aide en ligne. C’est pas très pratique quand on n’est pas connecté. Heureusement, il y à une petite astuce qui permet d’accéder à l’aide en local.
J’ai fait une petite vidéo qui explique comment procéder.
Lire la suite…
Pascal Achard Adobe Flash Astuce, Flash CS4, Video
Les idées reçues ont la vie dure. J’ai toujours été persuadé qu’il n’était pas possible d’utiliser les API Google et Google Maps en particulier autrement que sur un serveur de production possédant un nom de domaine valide.
Et bien, ça n’est pas vrai du tout. En réalité, on peut parfaitement effectuer une demande de clé en saisissant un nom de domaine comme http://localhost/. Et ça fonctionne.
Je sais que certains d’entre vous connaissaient déjà l’astuce. Moi pas. Et sans doute reste-t-il encore quelques développeurs dans l’ignorance. Bref, comme on dit, on en apprend tous les jours
Alban Jubert Javascript API, Astuce, Google, Maps
Commentaires récents