En espérant vous voir nombreux !

Suivez InfographiZm sur Google+ !

Le problème posé

Pourquoi ne pas utiliser les sprites ?

Les sprites sont très utiles pour gérer les images de fond ; mais dès lors qu’une image véhicule une information (image cliquable, portrait d’un auteur, schéma explicatif, etc.) et n’est plus seulement décorative, il est nécessaire que cette image soit présente dans le HTML (balise <img />).

Dans le cas d’une image cliquable, à plus forte raison un menu qui ne contiendrait aucun texte, il est très fortement déconseillé de recourir aux images CSS, car cela impose que le lien dans le HTML soit vide :

<a href="mapage.html"></a>

Si on peut styliser cette balise en CSS pour lui donner une hauteur, une largeur et un fond, retenez bien que tout le monde ne visionne pas un site comme vous. Les internautes mal-voyants qui utilisent un lecteur d’écran ne peuvent lire que le contenu strict de la page ; ils se retrouveront donc face à un lien vide de 0px×0px qui ne sera pas cliquable, car il ne sera tout simplement pas affiché par le navigateur.

En conséquence, la navigation sur votre site sera impossible !

Une solution possible en javascript

On peut également charger une image au survol grâce aux événements onmouseover et onmouseout du javascript. Si cette méthode permet de palier au problème précédemment exposé, elle en présente deux autres :

1. Tout d’abord, vos visiteurs peuvent très bien avoir désactivé l’exécution du javascript sur leur navigateur (pour des raisons qui les concernent).
2. L’image ne sera chargée qu’au survol, ce qui créera un effet de clipping (clignotement) le temps que l’image soit affichée. Pour une petite connexion (comme la 3G) cela se révèle très vite particulièrement désagréable.

La solution : un compromis

La meilleure solution consiste à mettre l’image « normale » dans le html, puis de la masquer au survol pour révéler une image de fond en CSS. Nous allons donc voir comment procéder.

Le HTML

Ici, rien de bien compliqué. Nous allons nous contenter de mettre notre image et notre lien tout à fait normalement (à noter qu’on peut tout à fait utiliser le même effet sans un lien avec une image seule).

Pour les besions de l’exemple, nous plaçons le lien dans une balise portant l’ID « menu ».

<div id="menu">
	<a href="mapage.html"><img src="monimage.jpg" alt="Accueil" /></a>
</div>

Le CSS

C’est ici que l’astuce se déroule. Tout d’abord, nous allons affecter à notre lien un comportement de type inline-block, afin de pouvoir lui donner des valeurs de hauteur et de largeur sans pour autant briser sa mise en place au sein d’un texte ou d’un menu (à adapter selon vos besoins).

#menu a {
	display: inline-block;
}

Ceci fait, nous allons lui appliquer l’image de fond qui doit apparaître au survol :

#menu a {
	display: inline-block;
	background: url("monimage_survol.jpg") no-repeat;
}

Maintenant, nous pouvons masquer l’image au survol grâce à la pseudo-propriété CSS :hover.

#menu a:hover img {
	visibility: hidden;
}

Une petite précision

Pour éviter toute mauvaise surprise, je vous recommande aussi de :

• Penser à désactiver l’affichage de bordure automatique autour des images cliquables, au moyen de ce code :

  a img { border: none; }

• De spécifier également la hauteur et la largeur de l’image
  • En CSS si les images sont toutes de même dimension (cas d’un menu) :

    #menu a, #menu img {
    	width: 200px;
    	height: 50px;
    }

  • En HTML si les images sont différentes :

    <div id="menu">
    	<a href="mapage.html">
    		<img src="monimage.jpg" alt="Accueil" width="200px" height="50px" />
    	</a>
    </div>

    Dans ce cas, le lien fera normalement automatiquement son travail pour garder la taille de l’image de base, même si cette dernière venait à ne pas être affichée (mauvais chargement, lien mort, etc.)

Et voilà ! Une image qui change au survol, sans effets secondaires indésirables du côté visuel, ni du côté de l’accessibilité.

Cette évolution (en plus d’être à la mode) est utile pour définir une sémantique claire, ce qui est d’abord un plus pour le référencement SEO, mais qui permet aussi d’ajouter des fonctionnalités.
Ainsi (c’est variable en fonction des navigateurs), les formulaires de contact ou de commentaire bénéficient d’une vérification préalable avant même d’être envoyés – et ce sans utilisation de javascript – et la barre de recherche du blog bénéficiera des avantages implémentés par les différents navigateurs webs dans les versions à venir.

Et vous, êtes vous passé au HTML5 ?

Mais c’est en réalité très simple à faire, et nous allons voir comment.

Le html

La première chose, c’est d’abord de placer les trois colonnes dans un conteneur, que nous appellerons ici « page« . Ensuite, il faut mettre les éléments flottants (les sidebar donc) avant le corps central.

<div id="page">
	<div id="gauche"></div>
	<div id="droite"></div>
	<div id="centre"></div>
</div>

Comme toujours, essayez d’ajouter un peu de contenu pour pouvoir voir les effets ; utilisez par exemple le générateur de lipsum.

Le CSS

Maintenant, il suffit de mettre en place les éléments :

#page {
	overflow: auto;
}
#gauche {
	width: 200px;
	float: left;
}
#droite {
	width: 200px;
	float: right;
}
#centre {
	width: auto;
	overflow: hidden;
}

Voyons ces lignes en détail :

#page {
	overflow: auto;
}

Les éléments flottants (utilisés avec la propriété float donc) sortent du flux d’éléments, ce qui conduit les autres éléments à passer en-dessous comme s’ils étaient ignorés. Utiliser une propriété neutre comme overflow permet au contenant de tenir compte de ces flottants et de les englober pour que tout rentre dans l’ordre.

#gauche {
	width: 200px;
	float: left;
}
#droite {
	width: 200px;
	float: right;
}

On place simplement les éléments flottants (les menus latéraux) à gauche et à droite avec la propriété float, et on leur attribue une largeur fixe.

#centre {
	width: auto;
	overflow: hidden;
}

Enfin, on donne à l’élément central une largeur automatique afin qu’il s’adapte automatiquement à la largeur disponible. Là encore, on use de la propriété overflow pour que cette colonne tienne compte des deux éléments flottants.

Avec cette méthode, si votre design est évolutif ou que la mise en page change (une colonne ou une autre ou bien les deux ou aucune en fonction des pages visitées, par exemple), la colonne centrale sera toujours adaptée correctement, ainsi que son contenu.

Voici, pour preuve, le logo d’InfographiZm, en version html générée par ImgToCss. Vous pouvez consulter la source à loisir.

Voici le résultat avec une photo de Danny Wallace. Le poids de la page est énorme (2,6Mo), mais le rendu est bluffant. Soyez TRÈS patient pour afficher la page, cela peut prendre plusieurs paires de minutes…

Voici des travaux d’icones et de logos réalisés entièrement en HTML/CSS, rivalisant d’ingéniosité et de techniques pour réaliser ce que d’aucuns tiendraient pour impossible :

• Le logo d’Opera en CSS
• Le logo d’Internet Explorer en CSS
• Des icones en CSS

Chapeau à leurs créateurs !

Nous allons voir une solution possible.

Tout d’abord, comprenons bien de quoi l’on parle dans ce tutoriel, et pour cela, nous allons d’abord illustrer le problème.

Lorsqu’un site possède une hauteur totale plus grande que l’écran sur lequel il est vu, on peut alors descendre la page vers le bas, jusqu’au bas de la page en question ; là, le défilement est arrêté, le pied-de-page, ou « footer » en anglais, est alors fixé naturellement au bas de la page et de l’écran.

Mais dans le cas où la hauteur totale de la page est inférieure à la hauteur de l’écran, alors le pied-de-page, toujours placé au bas de la page, n’atteint pas le bas de l’écran.

Si certains design ne sont pas gênés par cette éventualité, ce n’est pas le cas de tous. Pour palier à ce problème, nous allons devoir faire en sorte que le design adopte la taille du contenu si la taille de la page est supérieure à la taille de l’écran, mais que la taille minimale de la page ne puisse pas être inférieure cette dernière.

Nous allons maintenant voir comment faire ceci.

Le html

Nous partons sur cette base html :

<body>
	<div id="page">
		<div id="bloc-principal">
			<div id="header"></div>
			<div id="contenu">
				<div id="sidebar"></div>
				<div id="texte"></div>
			</div><!-- contenu -->
		</div><!-- fin bloc-principal -->
		<div id="footer"></div>
	</div><!-- fin page -->
</body>

Ce n’est qu’un exemple de site de base ; vous pouvez bien sûr utiliser votre propre site.

Pourquoi mettre le pied de page (footer) en dehors du bloc principal ?

Toute l’astuce est là, c’est le fait de placer le pied-de-page en dehors du bloc du contenu qui va permettre de le fixer au bas de la page, mais aussi de l’empêcher de passer par-dessus le texte du contenu.

Le CSS en action

La première étape est donc de donner à <html> une hauteur de 100%, qui servira à définir pour les balises enfants à quoi correspondent les valeurs en pourcentage que nous allons leur donner par la suite. La première balise enfant étant <body>, nous lui attribuons également cette valeur.

html, body { height: 100% }

Il nous faut ensuite donner à notre conteneur principal, « page », une hauteur de 100%. Mais nous n’allons pas utiliser la propriété height, car celle-ci défini une hauteur définitive ; à la place, nous ferons usage de min-height, qui défini une hauteur minimale pour le conteneur : Ainsi, Si la fenêtre est plus grande que la page, alors le conteneur prendra toute la hauteur disponible, mais ne sera jamais plus petite que 100% -soit la taille du contenu de la page- et ne chevauchera donc jamais ledit contenu.

Il faut également préparer le positionnement du pied-de-page au bas du conteneur, aussi nous appliquons un paramètre de position relative à page.

#page {
	min-height: 100%;
	position: relative;
}

Nous passons maintenant au conteneur bloc-principal. L’astuce consiste à lui attribuer une marge interne de la hauteur du pied-de-page (ici, 100px). Cela a pour but de bien définir la fin du conteneur à la fin de son contenu. Sans ce paramètre, vous vous rendrez compte que le pied-de-page se superposerait au bas du contenu sur 120px, soit sa propre hauteur.

#bloc-principal {
	padding-bottom: 100px;
}

Maintenant, nous nous attaquons au pied-de-page. Il faut que celui-ci ait tout d’abord une hauteur définie (même s’il s’agit d’un pourcentage), puis il faut lui affecter un positionnement absolu. Comme son parent direct, le conteneur page, est en positionnement relatif, footer se sert de cette référence pour savoir où se positionner. Enfin, grâce au positionnement absolu, il suffira d’accrocher le conteneur au bas du bloc parent. On ajoute également left et right afin que le bloc prenne toute la largeur.

#footer {
	height: 100px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

Et nous y voici ! Il est à noter que le pied de page doit avoir du contenu pour être affiché, à cause de son positionnement absolu.

Si vous souhaitez réagir à ce tutoriel, n’hésitez pas à laisser un commentaire !

Vous pouvez voir un exemple ici.

Voyons d’abord le code html :

<ul id="menu">
	<li><a href="#">Sans sous-menu</a></li>
	<li><a href="#">Un niveau</a>
		<ul>
			<li><a href="#">Lien 1</a></li>
			<li><a href="#">Lien 2</a></li>
			<li><a href="#">Lien 3</a></li>
			<li><a href="#">Lien 4</a></li>
			<li><a href="#">Lien 2</a></li>
		</ul>
	</li>
	<li><a href="#">Deux niveaux</a>
		<ul>
			<li><a href="#">Lien 1</a></li>
			<li><a href="#">Lien 2</a>
				<ul>
					<li><a href="#">Sous-menu 1</a></li>
					<li><a href="#">Sous-menu 2</a></li>
					<li><a href="#">Sous-menu 3</a></li>
					<li><a href="#">Sous-menu 4</a></li>
					<li><a href="#">Sous-menu 5</a></li>
				</ul>
			</li>
			<li><a href="#">Lien 3</a>
				<ul>
					<li><a href="#">Sous-menu 1</a></li>
					<li><a href="#">Sous-menu 2</a></li>
					<li><a href="#">Sous-menu 3</a></li>
				</ul>
			</li>
			<li><a href="#">Lien 4</a></li>
			<li><a href="#">Lien 5</a></li>
		</ul>
	</li>
	<li><a href="#">Sans sous-menu</a></li>
	<li><a href="#">Sans sous-menu</a></li>
</ul>

Pour l’instant, nous obtenons un rendu tout à fait normal d’une liste html à plusieurs niveaux. Vous pouvez constater qu’il n’y a pas de classes, car tout va se passer en CSS !

Et maintenant, du CSS !

Tout d’abord, il faut enlever les marges automatiques des listes, et supprimer les puces devant chaque élément :

#menu, #menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0
}

Vous avez peut-être noté la présence de font-size: 0 ? C’est parce que les éléments de liste vont être positionnés avec la propriété display: inline-block; ; d’où le fait que seules les versions plus récentes d’Internet Explorer puissent avoir le rendu désiré, car la prise en charge pour les versions 6 et 7 n’était que partielle, et ne fonctionnait que sur des éléments inline. inline-block a en effet tendance à créer un espace (white-space) entre les éléments ainsi déclarés. Définir font-size sur 0 permet de corriger ce problème, mais il faut penser à définir une taille normale par la suite.

Voyons maintenant les propriétés à donner aux éléments de liste :

#menu li {
	display: inline-block;
	position: relative;
	font-size: 12px;
}

Comme annoncé, les éléments de liste sont déclarés comme inline-block, et on donne une taille au texte. On ajoute également le positionnement relatif afin de pouvoir ensuite placer les sous-menu directement par rapport à leur parent.

Définissons maintenant les liens :

#menu a {
	display: block;
	width: 150px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: #555;
}

Pour pouvoir appliquer une largeur et une hauteur, il faut donner au lien la propriété display: block;. Une couleur de fond est appliquée afin de pouvoir simplement vérifier que tout se met correctement, mais vous pourrez vous occuper d’embellir l’ensemble plus tard. line-height sert à centrer verticalement le texte du lien.

Il faut enfin masquer les sous-menu par défaut :

#menu ul {
	left: -4000px;
	position: absolute
}

Le positionnement absolu permet de placer chaque sous-menu par rapport à son parent.
On déplace l’élément très loin sur la gauche pour qu’il n’apparaisse pas. À noter qu’on pourrait utiliser display: none;, pour masquer les éléments, mais cela s’avère moins accessible pour les personnes utilisant un lecteur d’écrans (malvoyants entre autres).

Afficher les sous-menu au survol

Nous allons utiliser la pseudo-classe :hover pour faire apparaître les sous-menus au survol d’un lien.

#menu li:hover > ul {
	left: 0
}

Simple n’est-ce pas ? Nous replaçons l’élément à sa position de départ. Si nous avions utilisé display: none; à l’étape précédente, nous aurions ici employé display: block; pour afficher l’élément. Nous utilisons cette fois le sélecteur ">", afin d’accéder uniquement à l’enfant direct de l’élément survolé.

À ce stade, nous avons déjà un menu déroulant simple et fonctionnel. Mais nous avons ajouté un second sous-niveau de liens, voyons donc comment l’afficher correctement :

#menu li li:hover > ul {
	left: 150px;
	top: 0
}

Grâce au positionnement absolu, nous pouvons régler le placement de la liste avec les propriétés left et top. Nous décalons donc la sous-sous-liste de 150px (la largeur des éléments de liste que nous avons choisie plus haut) et le replaçons à la même hauteur que son parent.

Et voilà ! Vous avez un menu-horizontal déroulant à plusieurs niveaux, uniquement en CSS. Mission accomplie !

Compatibilité avec les anciens navigateurs (facultatif)

Attention, les propriétés CSS qui vont être utilisées dans ce chapitre doivent remplacer les anciennes. Cette étape est facultative, ne vous en servez que si vous voulez pousser la compatibilité de vos sites aux anciens navigateurs.

Nous allons utiliser le flottement pour mettre les éléments en ligne. Tout d’abord, nous pouvons enlever quelques propriétés pour la liste elle-même :

#menu {
	margin: 0;
	padding: 0;
	list-style: none
}

Maintenant, nous utilisons float: left; pour aligner les élements de liste :

#menu li {
	float: left;
	width: auto;
	position: relative
}

Comme nous n’avons pas défini font-size: 0;, il n’y a plus besoin de redéfinir la taille du texte ici. La largeur automatique est présente car un float nécéssite un width pour être valide.

Et c’est tout ! Vous pouvez ensuite styliser d’avantage l’affichage de votre menu, par exemple en mettant le lien survolé en surbrillance :

#menu a:hover {
	color: #666;
	background-color: #ccc
}

Si vous souhaitez réagir à ce tutoriel, n’hésitez pas à poster un commentaire !

Voici une liste (tout ce qu’il y a de plus personnelle et subjective !) non exhaustive des meilleurs d’entre eux :

Google Analyticator

Cette extension fait le lien entre votre blog et le service de statistiques Google Analytics. L’intégration est parfaite et permet d’utiliser le mode asynchrone afin de ne pas ralentir les pages au chargement du code.

Catégorie : Statistiques

Google XML Sitemaps

Génère un fichier sitemap, afin de faciliter la visite des robots d’indexations des moteurs de recherche.

Catégorie : Référencement

Contact Form 7

Un excellent gestionnaire de formulaires de contact, très personnalisable et facile d’emploi.

Catégorie : Fonctionnalités

WP Super Cache

Cette extension met votre blog en cache, générant des pages statiques pour vos visiteurs afin de les afficher bien plus rapidement.

Catégorie : Optimisation

WP Minify

Ce plugin combine et compresse vos fichiers HTML, CSS et javascript, afin qu’ils soient chargés bien plus rapidement par le navigateur du visiteur. Attention toutefois, la « minification » du CSS entraîne parfois des changements d’affichage.

Catégorie : Optimisation

WP Smush.it

Compresse vos fichiers image (jpg, png et gif) sans perte de qualité afin de les afficher plus rapidement, à la manière du service Smush.it de Yahoo!.

Catégorie : Optimisation

Simple Social Buttons

Ajoutez à vos posts des boutons vers les réseaux sociaux (Facebook, Twitter, Google+) pour partager vos articles, et personnalisez leur affichage très simplement.

Catégorie : Fonctionnalités

WP Security Scan

Une liste d’options, d’outils et de consignes pour sécuriser votre WordPress facilement et efficacement.

Catégorie : Sécurité

StatPress Reloaded

Ajoute à votre blog des statistiques de visites, directement visibles depuis l’interface d’administration de votre WordPress.

Catégorie : Statistiques

WP Antispam

Un antispam simple, qui bloquera tout un tas de spam et bots certes peu élaborés, mais néanmoins courants.

Catégorie : Sécurité

Viper’s Video Quicktags

Ajoute à la fenêtre de rédaction des articles et des pages des boutons pour ajouter des vidéos depuis les principaux services de partage vidéo (YouTube, Dailymotion, Vimeo).

Catégorie : Fonctionnalités

Login LockDown

Avec ceci, vous pourrez aisément personnaliser les commentaires de l’auteur d’un article au milieu de ceux de vos lecteurs.

Catégorie : Personnalisation

SyntaxHighlighter Evolved

Cette petite extension permet de configurer un nombre maximal de tentative de connexion à WordPress, avant de blocker l’ip pour une heure. Très pratique pour éviter l’intrusion par bruteforce.

Catégorie : Sécurité

Author Highlight

Avec ceci, vous pourrez aisément personnaliser les commentaires de l’auteur d’un article au milieu de ceux de vos lecteurs.

Catégorie : Personnalisation

Et vous, vous avez des extensions favorites, ou que vous trouvez indispensables ? Faîtes-le savoir dans les commentaires !

Essayez de deviner le score d’InfographiZm !