Je compte donc faire une série d'articles traitant du Xhtml / CSS, du Javascript, des bonnes pratiques, des méthodes d'organisation, etc. Ce premier article traitera d'astuces CSS et d'intégration pour IE. Pas mal concernent IE 6, certes ce navigateur date de 2001, on pourrait légitimement se demander pourquoi optimiser pour ce dernier. Pourtant son pourcentage d'utilisation oblige a encore le prendre en compte. La faute a bien des postes où les mises à jours sont impossibles, vieilles versions de Windows, utilisateurs néophytes, etc.

Ci-dessous quelques astuces, globalement elles sont assez connues et relativement communiquées, mais je rencontre encore trop d'intégrateurs qui ne les connaissent pas.

Sommaire

• Double margin sur un élément flottant (IE 6)
• Non interprétation de la propriété min-height (IE 6)
• La hauteur minimum d'un élément (IE 6)
• Le clear sur un élément flottant (IE)

Double margin sur un élément flottant (IE 6)

Ce bug survient lorsque vous utilisez une marge dans le même sens qu'un float. En d'autre terme une marge à gauche sur un élément flottant à gauche et inversement une marge à droite sur un élément flottant à droite. Un petit exemple :

.floatbox { float: left; width: 150px; height: 150px; margin-left: 100px; }

Ceci appliquera un margin left de 200px sur IE 6 :

Heureusement il existe une astuce simple, qui consiste à rajouter la propriété display à la valeur "inline". Dès lors votre bloc se comporte normalement sous IE 6. L'avantage majeur de cette astuce est qu'elle n'influera pas le comportement des autres navigateurs car la propriété float est prioritaire à display.

Cette astuce est extrêmement importante à connaître car dans le cas contraire on peut parfois tomber sur des codes difficilement maintenables avec des surcharges des valeurs des marges pour IE 6...

Le code final sera donc :

.floatbox { float: left; width: 150px; height: 150px; margin-left: 100px; display: inline; }

Ce bug survient aussi si vous avez plusieurs éléments flottants côte à côte avec une marge mais que pour le premier élément ! Prenons un exemple simple un menu de navigation horizontal avec une marge entre chaque élément :

#nav { margin: 0; padding: 0; list-style: none; }
#nav li { float: left; width: 100px; height: 30px; line-height: 30px; margin: 0 10px; border: 1px solid #eee; }

<ul id="nav">
<li></li>
<li></li>
<li></li>
</ul>

Comme dans l'exemple précédent un simple display inline résoudra ce fâcheux problème :

#nav li { float: left; width: 100px; height: 30px; line-height: 30px; margin: 0 10px; border: 1px solid #eee; display: inline; }

Source chez positioniseverything.net

Retour au sommaire

Non interprétation de la propriété min-height (IE 6)

Cette chère propriété qui nous est souvent bien pratique, notamment pour un div avec un dégradé, il vous assure que le bloc aura au minimum la hauteur de votre dégradé, n'est pas interprété par IE 6. Heureusement, comme la vie d'intégrateur est quand même bien faite, le comportement de la propriété height sous IE 6 est similaire à celle de min-height.

#round { min-height: 100px; }
/* ajout pour IE 6 */
#round { height: 100px; }

L'astuce est, cette fois-ci, plus complexe, car mettre la propriété height à tous les navigateurs aura forcément des répercutions sur l'affichage. Il est donc nécessaire d'appliquer cette propriété uniquement pour IE 6. Ca se complique...

• Commentaires conditionnels : incontestablement la solution la plus propre, mais pas forcément la plus simple à maintenir, en effet elle vous oblige à avoir une CSS dédiée aux surcharges pour IE.En savoir plus chez blog-and-blues.org ;
• Commentaires conditionnels détournés pour ajouter un identifiant à la balise body, je pense revenir plus en détail sur cette technique dans un futur billet, car elle m'a beaucoup séduit.En savoir plus chez lesintegristes.net ;
• Un hack : il vaut mieux éviter car on ne peut être sûr de son fonctionnement dans le temps (mise à jour des navigateurs), néanmoins il permet de centraliser la CSS et les surcharges pour IE dans une seule CSS.En savoir plus chez blog.pixarea.com ;

Retour au sommaire

La hauteur minimum d'un élément (IE 6)

Sous IE 6, tous les éléments ont une hauteur minimum, même après avoir mis la propriété height à "10px" par exemple. Par exemple, nous souhaitons faire un rectangle de couleur de 10px de hauteur :

#little-box { width: 100px; height: 10px; background: #eee; }

<div id="little-box"></div>

Ce qui donnera :

Cela provient de l'interligne et de la taille du texte qui sont par défaut définit à 16px sur tous les éléments. Pour résoudre ce problème, il vous faut soit redéfinir les propriétés "line-height" et "font-size", soit rogner ce qui dépasse de l'élément au moyen de la propriété "overflow".

Solution n°1 :

#little-box { width: 100px; height: 10px; background: #eee; font-size: 0; line-height: 0; }

Solution n°2 :

#little-box { width: 100px; height: 10px; background: #eee; overflow: hidden; }

Certes nous sommes des intégrateurs, mais nous sommes avant tout des développeurs, aussi rappelons nous de nos enseignements, à savoir de prendre toujours le chemin le plus court, et de coder le moins possible. Nous choisirons donc la solution n°2 ;-)

Si maintenant nous souhaitons avoir du texte dans notre #little-box, il faudra par contre redéfinir les propriétés "line-height" et "font-size" au risque de ne pas voir le texte... Donc :

#little-box { width: 100px; height: 10px; background: #eee; font-size: 11px; line-height: 10px; text-align: center; overflow: hidden; }

<div id="little-box">Little box</div>

Et voilà, merci IE... Mais en y réfléchissant là encore c'est un bug très facile à corriger, il suffit seulement d'ajouter une propriété qui n'influe pas le comportement des autres navigateurs. C'est un peu de temps et une habitude à prendre pour que vos sites passent correctement sous ce dinosaure d'IE 6.

Retour au sommaire

Le clear sur un élément flottant (IE)

Si vous avez plusieurs éléments flottants dont un avec un "clear", vous serez surpris du rendu sous IE. En effet l'élément avec "clear" sera bien interprété mais les suivants ne partiront pas de lui comme base. Un exemple sera beaucoup plus simple à comprendre :

#box1 { float: left; width: 50px; height: 20px; background: #eee; }
#box2 { clear: left; float: left; width: 100px; height: 25px; background: #ccc; }
#box3 { float: left; width: 50px; height: 30px; background: #aaa; }

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

Voici le rendu qu'auront ces 3 blocs :

On voit bien ici que le bloc avec "clear" est bien passé à la ligne, mais le 3ème bloc ne le prends pas comme base et est flottant à partir du 1er bloc. La solution est d'ajouter un élément vide juste avant l'élément avec "clear". Comme ceci :

<div id="box1"></div>
<div "></div>
<div id="box2"></div>
<div id="box3"></div>

Bon, sur ce précédent exemple, on peut se poser la question de l'intérêt de cette technique, elle peut servir, entre autre, pour des menus horizontaux sur plusieurs lignes, exemple :

#float-box { width: 400px; margin: 0; padding: 0; list-style: none; }
#float-box li { float: left; width: 80px; line-height: 20px; margin: 10px; border: 1px solid #eee; }

<ul id="float-box">
<li>Box 1</li>
<li>Box 2 with long text</li>
<li>Box 3</li>
<li>Box 4</li>
<li>Box 5</li>
<li>Box 6</li>
</ul>

Dans cet exemple, les éléments de la seconde ligne seront déstructurées car il manque un clear sur le 4ème élément. Etant donné que celui-ci sera aussi flottant, nous allons utiliser la technique apprise ci-dessus en ajoutant un élément vide juste avant l'élément flottant avec le clear, comme ceci :

#float-box { width: 400px; margin: 0; padding: 0; list-style: none; }
#float-box li { float: left; width: 80px; line-height: 20px; margin: 10px; border: 1px solid #eee; color: #fff; }
#float-box li.break { float: none; width: auto; margin: 0; border: 0; }
#float-box li.clear { clear: left; }

<ul id="float-box">
<li>Box 1</li>
<li>Box 2 with long text</li>
<li>Box 3</li>
<li class="break"></li>
<li class="clear">Box 4</li>
<li>Box 5</li>
<li>Box 6</li>
</ul>

La seule différence avec l'exemple précédent est que nous sommes obligé de surcharger les propriétés de l'élément vide car nous avons directement ciblé tous les "li", il faut donc lui annuler les effets classiques. Ce qui donnera :

Source chez brunildo.org

Retour au sommaire

Conclusion

Pour conclure, je dirai qu'une seule chose, si votre code CSS contient trop de hacks, d'exceptions, de surcharges, etc. c'est qu'il y a un problème. Votre code doit rester, autant que possible simple ! Si vous commencez votre découpage et que l'intégration vous parait complexe, pleines de subtilités, c'est sans doute que vous prenez le mauvais chemin. Réfléchissez, tournez la maquette dans tous les sens, il y a certainement une méthode plus simple ! Et oui l'intégration est un puzzle :)

Relisez toujours vos CSS, il y a souvent des propriétés qui ne servent plus à rien, il y a souvent moyen de centraliser quelques bouts de code, le tout dans l'optique d'alléger votre CSS. Car aujourd'hui votre CSS vous parez compréhensible, mais dans quelques mois lorsque vous devrez faire une modification elle le sera probablement beaucoup moins !

Et si vraiment la maquette vous parait toujours aussi complexe, ou irréalisable, allez voir votre graphiste, après tout on fait du Web, pas des flyers ;) cela entraîne inévitablement des contraintes.

Et si après tout ça, vous n'arrivez toujours pas à intégrer votre site sous IE, il ne vous reste plus qu'à lire cet article... ;-)

Voici, pour l'instant, deux techniques pour redimensionner plusieurs photos sous Ubuntu, tout d'abord une astuce trouvée via ce post du forum Ubuntu-fr :

[mode console] Vous aurez besoin du paquet imagemagick afin d'utiliser l'outil mogrify, donc au préalable :

sudo apt-get install imagemagick

mogrify s'utilise ainsi :

mogrify -resize 800x600 *.jpg

En sachant que vous devez d'une part vous trouver dans le dossier de vos photos et d'autre part que jpg est à remplacer par l'extension de vos photos.

[mode graphique] Gràce à gthumb, il vous suffit de sélectionner les photos à redimensionner, puis cliquer sur Outils > Scale Images.

Voilà pour le moment les deux techniques que j'ai utilisé pour redimensionner mes photos en masse. Je vous rappelle qu'avec gthumb il est possible de générer son album Web.

Toutefois, comme il est précisé dans la documentation Ubuntu, XAMPP n'est pas fait pour être un environnement de production, en effet, il sera alors préférable d'installer chaque application à la main, via Synaptic ou apt-get. Néanmoins, à l'inverse de ce qui est cité dans la doc Ubuntu, d'une part XAMPP peut facilement devenir un ensemble assez sécurisé, au moyen d'un utilitaire, et d'autre part les fichiers de configuration d'Apache, de MySQL, de PHP, de proftpd, etc. sont bien présents et peuvent être modifiés.

1. Installation

Voyons tout d'abord comment installer XAMPP, il vous faudra en premier lieu télécharger l'archive, et l'extraire soit en mode console :

sudo tar xvfz xampp-linux-1.5.1.tar.gz -C /opt

Soit par le mode graphique en faisant click droit > extraire ici sur l'archive et en la déplaçant vers le dossier /opt de votre Ubuntu.
L'installation est terminée...

2. Lancement et arrêt

Comme il est indiqué dans la documentation Ubuntu, pour lancer XAMPP, il suffit de saisir cette commande :

sudo /opt/lampp/lampp start

Ce qui doit vous retourner :

Starting XAMPP for Linux 1.4.11...
XAMPP: Starting Apache with SSL (and PHP5)...
XAMPP: Starting MySQL...
XAMPP: Starting ProFTPD...
XAMPP for Linux started.

Il ne vous reste plus qu'à lancer votre navigateur et vous rendre sur la page http://localhost/, ce qui devrait directement vous renvoyer vers la page de xampp. Cliquez alors sur Statut, afin de bien vérifier que tous les composants se soient bien lancés. Pour arrêter XAMPP :

sudo /opt/lampp/lampp stop

3. Configuration et sécurité

Sélectionner sa version de PHP

Avec XAMPP, vous pouvez choisir votre version de PHP, entre PHP 4 et PHP 5. La commande suivante vous permet de savoir quelle version de PHP est activée sur votre serveur :

sudo /opt/lampp/lampp phpstatus

Pour sélectionner uniquement PHP 4 :

sudo /opt/lampp/lampp php4

Pour sélectionner uniquement PHP 5 :

sudo /opt/lampp/lampp php5

Sécuriser son serveur Web :

Toujours dans la page d'accueil de XAMPP, vous pouvez consulter la partie Sécurité qui vous informe qu'aucun mot de passe ne protège les différentes applications de votre serveur Web.
Un utilitaire fournit avec XAMPP permet de palier à ce manque de sécurité :

sudo /opt/lampp/lampp security

Vous aurez alors :

XAMPP: Quick security check...
XAMPP: Your XAMPP pages are NOT secured by a password.
XAMPP: Do you want to set a password? [yes] yes
XAMPP: Password: XAMPP: Password
(again):
XAMPP: Password protection active. Please use 'lampp' as user name!
XAMPP: MySQL is accessable via network. XAMPP: Normaly that's not recommended. Do you want me to turn it off? [yes] yes
XAMPP: Turned off.
XAMPP: Stopping MySQL...
XAMPP: Starting MySQL...
XAMPP: The MySQL/phpMyAdmin user pma has no password set!!!
XAMPP: Do you want to set a password? [yes] yes
XAMPP: Password: XAMPP:
Password (again):
XAMPP: Setting new MySQL pma password.
XAMPP: Setting phpMyAdmin's pma password to the new one.
XAMPP: MySQL has no root passwort set!!!
XAMPP: Do you want to set a password? [yes] yes
XAMPP: Write the password somewhere down to make sure you won't forget it!!!
XAMPP: Password: XAMPP:
Password (again):
XAMPP: Setting new MySQL root password.
XAMPP: Setting phpMyAdmin's root password to the new one.
XAMPP: The FTP password is still set to 'lampp'.
XAMPP: Do you want to change the password? [yes] yes
XAMPP: Password: XAMPP:
Password (again):
XAMPP: Reload ProFTPD...
XAMPP: Done.

Créer son répertoire public_html

Jusqu'à présent, sur les anciennes versions de XAMPP, il suffisait de créer un répertoire public_html dans son home afin d'y placer ses fichiers et les joindre via la page http://localhost/~nom-d-utilisateur/.
Avec cette nouvelle version, il faut activer une option d'Apache, pour cela ouvrez un terminal :

sudo gedit /opt/lampp/etc/httpd.conf

Et retirez le # devant la deuxième ligne :

# User home directories
#Include etc/extra/httpd-userdir.conf

Vous pouvez maintenant vous créer votre dossier public_html.

MySQL est marqué comme désactivé

Si en vous rendant dans la page Statut de XAMPP, MySQL est mentionné comme désactivé.
Il faut changer les droits d'accès sur le fichier mysql, pour cela lancer un terminal :

sudo chmod 755 /opt/lampp/bin/mysql <em>(à vérifier)</em>

Il faut ensuite redémarrer MySQL :

sudo /opt/lampp/lampp reloadmysql

Backup de ses sites

Je n'ai pas encore eu l'occasion de tester cette fonctionnalité, mais XAMPP inclut un système de backup des bases de données, des fichiers de logs, ainsi que des sources de vos sites (il ne doit par contre, pas récupérer les sources contenues dans le dossier public_html).

sudo /opt/lampp/lampp backup

Qui retourne :

Backing up databases...
Backing up configuration, log and htdocs files...
Calculating checksums...
Building final backup file...
Backup finished.
Take care of /opt/lampp/backup/xampp-backup-<em>date</em>.sh

Ainsi vous pouvez récupérer vos données via :

sudo sh <em>fichierbackup</em>

Fichiers de configuration

Voici où se trouvent quelques fichiers de configuration :

• Apache : /opt/lampp/etc/httpd.conf
• PHP : /opt/lampp/etc/php.ini
• MySQL : /opt/lampp/etc/my.cnf
• proFTPd : /opt/lampp/etc/proftpd.conf

4. Liens

• Projet XAMPP
• XAMPP dans la documentation Ubuntu
• Très bon tutoriel sur l'utilisation de XAMPP

Si vous souhaitez activer le partage Web de votre Mac, rendez vous tout simplement dans Préférences Systèmes > Partage (Internet et Réseau) :

MAMP est une solution serveur Web parmi tant d'autres, mais compatible Mac. Au même titre qu'EasyPHP ou encore XAMPP, MAMP, qui en est à sa version 1.0.1, met à votre disposition un serveur Web contenant ces différents éléments :

• Apache 2.0.54
• MySQL 4.1.12
• PHP 4.4 & 5.0.4
• eAccelerator 0.9.3
• phpMyAdmin 2.6.3-pl1
• Zend Optimizer 2.5.10
• SQLite 2.8.14
• Freetype 2.1.9
• t1lib 5.1.0
• bzip2 1.0.3
• curl 7.14.0
• jpeg 6b
• libpng-1.2.5
• gd 2.0.28

J'ai découvert cette solution gràce à cet article de Framasoft. Après avoir téléchargé, puis décompressé l'archive, vous vous retrouvez face à un fichier image (dmg), double cliquez dessus et rendez vous dans l'image montée :

Déplacez tout simplement le dossier MAMP dans votre dossier Applications pour que ce dernier s'installe. Lorsque cette procédure est terminée, vous devriez trouver ceci dans votre dossier Applications/MAMP :

Lançons MAMP (celui ci demandera une authentification si vous êtes protégé d'un mot de passe) et vous allez ensuite tomber sur un espace de lancement et d'administration de votre serveur Web, le voici :

Dans les préférences, vous avez notamment la possibilité de configurer les ports des serveurs Apache et MySQL, ils sont par défaut respectivement sur le 8888 et 8889, MAMP vous laisse la possibilité de mettre les ports réels de ces deux serveurs (80 et 3306). Vous pouvez aussi choisir votre version de PHP (4 ou 5), comme dans XAMPP. Enfin dans ce même panneau d'administration, vous pouvez sélectionner le répertoire de base d'Apache, très pratique si vous créez un répertoire public_html ou simplement que vos sites sont stockés dans le répertoire Sites de votre profil.

Au démarrage des serveurs, votre navigateur par défaut s'ouvre pour afficher cette page :

C'est la page d'accueil de MAMP (http://localhost/MAMP/), c'est par ici que vous accèderez en un seul click à phpMyAdmin, SQLiteManager et votre phpinfo.
Vous pouvez aussi accèder directement à phpMyAdmin via l'url : http://localhost/phpMyAdmin/
et http://localhost/SQLiteManager/ pour SQLiteManager.

En ce qui concerne vos pages Web, elles doivent tout simplement être placées dans le dossier MAMP/htdocs/.

Pour un paramètrage plus personnalisé vous avez accès au fichier httpd.conf dans le dossier MAMP/conf/apache, le php.ini se trouve dans MAMP/conf/php4 ou MAMP/conf/php5 suivant votre version.

Vous pouvez aussi lancer MAMP manuellement par la console gràce au start.sh que vous trouvez dans MAMP/bin/.

Ouvrez Synaptic (en ayant pris soin d'avoir mis à jour la base de vos dépots Synaptic) et faites une recherche sur :

streamtuner (ce logiciel permet de lister toutes les radios émettant avec le flux cité ci-dessus, il vous donnera bien sûr l'adresse pour vous y connecter et surtout permet de lancer automatiquement XMMS, Rythmbox ou BMP pour écouter la radio sélectionnée)

streamripper (celui ci est une application console permettant d'enregistrer un flux Shoutcast ou Icecast, ça tombe bien non ?)

Le bon combo de tout ceci c'est que streamtuner ajoute la possibilité d'enregistrer vos radios via streamripper.

http://www.nongnu.org/streamtuner/
http://streamripper.sourceforge.net/

Je viens de tomber sur cette astuce fort interessante qui permet de personnaliser l'affichage de la liste des fichiers d'un répertoire via un .htaccess et une feuille de style CSS. Le résultat est plutôt sympa et surtout beaucoup plus original que le style de base, je vous laisse en juger par vous même : ici.

Depuis certains temps, mes efforts portent enfin leurs fruits et mes connaissances en matière de conception Web et d'utilisation de style CSS augmentent.

Je me décide donc à sortir une série d'articles sur CSS et les arts graphiques, en commençant par le plus simple, jusqu'à ... on verra ;)

Dans ce premier article, vous trouverez d'une part un rappel sur ce qu'est le CSS et d'autre part une base importante de liens sur CSS, dans divers biais, son utilisation, des exemples et des sites et qui ont attirés mon attention. Chacun des liens sera en partie décrit et commenter.

Qu'est ce que les styles CSS (Cascading Style Sheets) ?

Cette définition, ou du moins ce commentaire se veut simple pour être compris par tous, je ne rentrerais pas trop dans les détails ici, d'autres sites le font :)

Le HTML, langage utilisé pour la mise en pages des pages Web, est en soit un peu limité, puisqu'il n'est qu'une succession de balises. CSS permet de donner vie à ces pages HTML en associant des styles à ces successions de balises. En effet une feuille de style CSS met en forme votre page HTML. Ce langage déclaratif est très intuitif et vous permet grâce à une simple syntaxe de mettre du texte en couleur, de mettre une image de fond, de positionner des élèments à différents endroits de votre page, de créer une bordure personnalisée ou encore de rajouter une marge, etc.

Voila pour la briève présentation.

CSS beauty autrement dit une base de liens qui vont vous faire baver

http://www.csszengarden.com/
Un standard, la référence en matière de CSS, c'est souvent le premier que l'on cite, à droite vous pourrez trouver les différents graphismes composés toujours avec une même page HTML, seul la feuille de style CSS changent (et les images). Une partie très interessante est les archives des graphismes publiés sur le Jardin Zen CSS)

http://www.cssbeauty.com/
Une référence, leurs archives sont impressionantes, on découvre une quantité incroyable de sites.

http://www.stylegala.com/
Un site d'art qui répertorie bon nombre de jolis sites utilisant CSS, je vous recommande leur galerie classée par note, les premiers sont magnifiques.

http://cssvault.com/
http://www.unmatchedstyle.com/
http://www.cssdrive.com/
http://www.plasticpilots.com/
http://www.webstandardsawards.com/
Encore des classiques qui répertorient des galleries de sites utilisant CSS.

http://www.cssreboot.com/
Une quinzaine de liens sympas sur le menu de droite de ce site.

J'augmenterais cette liste au fur et à mesure, mais déjà avec ces derniers, vous avez du temps devant vous, il serait dômmage de ne pas consacrer suffisament de temps sur chacuns de ces sites. Vous avez des heures devant vous pour les explorer et comme ils sont fréquemment mis à jour...

Exemples de sites utilisant les feuilles de style CSS

Il y a énormément de sites à citer et ce ne serait pas possibler ici sans quoi la lisibilité de mon site ne serait sans doute plus assurée et de surcroit à force vous ne viendrez sans doute plus sur le miens tellement vous le trouveriez simple à côté des liens qui suivent.

http://csszengarden.com/?cssfile=/068/068.css
http://csszengarden.com/?cssfile=/075/075.css
Deux parutions françaises au Jardin Zen CSS :)

http://www.komodomedia.com/
Intuitif et moderne, son système d'onglet est excellent.

http://www.joshuaink.com/
Simple, clair, joli, CSS quoi...

http://www.suspiremedia.co.uk/
Sobre... Notez l'apparition des boutons de choix de l'affichage du texte qu'on trouve plus souvent.

http://www.jeremyboles.com/
Bon exemple de graphisme pour un site contenant un blog, un diaporama et un portfolio.
Jeux de Maux
Un blog absolument splendide...
http://www.dualbase.com/
Le site d'un graphiste avec de beaux dessins et de bons tutoriaux ;) Consulter dans la partie travaux graphiques, la section design de templates.

http://www.airios.com/blog/
Rien à ajouter... Du grand art, j'adore le côté réaliste des éléments de l'interface.

http://www.cafelisa.com/
Ambiance extraordinaire... Le site vient d'être actualisé avec un fond noir, encore mieux !
On a vraiment le sentiment d'ouvrir quelques vielles lettres trouvées par hasard dans un grenier, excellente idée pour un blog.

http://harmoniak.com/
Site d'un groupe de RAP, choix de couleurs original.

http://xethorn.net/
Sans commentaire, à visiter...
(un site qui m'a grandement inspiré pour mes derniers essais, notament les effets sur le menu de l'image supérieure de l'interface. merci d'être passé sur mon blog ;))

http://www.justwatchthesky.com/
Bon effet vertical de l'image, on dirait un site d'un groupe de rock.

Bon, je m'arrête là car comme je disais plus haut, vous avez encore plus d'heures devant vous pour visionner comme il se doit tous ces sites, mais je compte bien en rajouter et peut être ensuite classer cette liste par catégories.