Démo : refaire le design d'une page d'album

/*---- Suppression du titre redondant */ .h2Album {display:none}

Le but du jeu

Cette page sort d'un de mes albums photo, son aspect est classique : tout en bandes horizontales. La bande d'imagettes et la pagination sont trop bas pour qu'on aille y voir, or il y a beaucoup de place de part et d'autre de la photo (600 pixels maxi en largeur). Pourquoi ne pas disposer galeries, imagettes et pagination sur le côté gauche de la photo, comme les modules dans le blog ? Cette démo va vous montrer toutes les étapes de la transformation.

Le jeu n'est pas réservé aux cinglés

Le design du blog est en "mode avancé" : chaque type de page peut avoir un CSS particulier en plus du CSS d'ensemble. Nous ne modifierons que le CSS de complément pour les "photos seules".C'est la seule particularité de l'album et la cuisine ici décrite est possible dès le niveau "confiance".

Scénario

Nous irons de haut en bas, en commençant par les galeries. Nous allons vraiment intervenir en direct sur la page, j'ai trop le respect du client pour vous présenter des copies d'écran ! Avec un outil comme l'inspecteur DOM de Firefox, vous verrez évoluer le style de la page

À propos de cette page : elle est semblable à n'importe quelle "vraie" page d'un "vrai" album, je lui ai seulement rajouté une (longue) section nommée "explications" et quelques id supplémentaires pour les besoins de l'exposé. Le reste du HTML est inchangé (un coup d'œil au source vous en convaincra), juste redisposé pour être plus lisible.

Maniement

Les instructions disparaîtront au fur et à mesure de leur exécution. Comme il serait trop difficile de revenir en arrière, je n'ai prévu qu'un lien pour tout reprendre à zéro. Donc ALLEZ-Y DOUCEMENT ! C'est facile mais, mine de rien, c'est assez dense.

Vous pourrez aussi, à tout moment, réduire ou développer tout le pavé pour dégager la vue.

Utilisateurs d'IE : la page peut prendre une drôle de tête par moments, cela vient de ce qu'elle n'est pas rafraîchie après chaque ajout. Cependant le résultat final est bel et bien correct : c'est le CSS réel de mes albums photo.

Alors, on commence ?

(et voici l'article dont sort cette démo)

1 - Se débarrasser d'un titre inutile

Ce titre "Coups d'œil - Eiffel-E-O.jpg" doublonne avec l'indication de l'album (mis en évidence dans la liste des galeries) et le titre proprement dit de la photo. Donc, à la trappe ! C'est facile : puisqu'il est de classe h2Album, il suffit de cette ligne de CSS :

.h2Album {display:none}

Allez-y, la suite apparaîtra.

4 - Les imagettes

En dessous de la photo, vous les voyez ? Même genre de travail que pour les galeries, avec des raffinements.

La structure des imagettes est plus complexe que celle des liens de la galerie : chaque image est incluse dans un lien de classe thumbAlbum ou thumbCouranteAlbum, lui-même inclus dans un div de classe thumbAlbum lui aussi : à l'occasion, il faudra savoir les distinguer.

Pour obtenir une disposition en ligne, j'avais écrit .thumbAlbum {display:inline}, il faudra donc corriger en :

.thumbAlbum, .thumbAlbum a {display:block}

Et naturellement, pour que le panneau d'imagettes passe en "absolu" (j'ai aussi calculé top pour le faire remonter) :

.thumbsAlbumContainer {position:absolute;
width:205px; top:116px;}

Tout en une fois, zou !

5 - La pagination

On commence comme pour les imagettes : mise à la verticale, définition de la largeur, placement à la bonne hauteur :

.pagination { position:absolute;
  top:340px;  width:55px; }
.pagination a, .pagination b {display:block;}

Hop !

Décoration : supprimons la bordure, changeons quelques couleurs et dimensions, mettons en place des flèches dans le bon sens… je vous épargne les détails :

.pagination {border:none;}
.pagination a, .pagination b {margin:0 0 8px;
  border-width:1px; background-color:#fcf9ec}
.pagination a {padding: 4px 0px 6px; }
.pagination a:hover {background-color:#ede2cc}
.currentPage {padding: 0px ;
  vertical-align:baseline;}
a.textNext:hover, a.textLast:hover,
 a.textPrevious:hover, a.textFirst:hover
  {color:#ede2cc}
.textNext, .textPrevious ,
  .textLast, .textFirst
   {text-align:left; padding-left:0;color:#fcf9ec;
     background-position:center center}
.textLast {padding-left :5px; }
.textNext     {background-image:
  url([blablabla]nav16V-Next.gif)     }
.textPrevious {background-image:
  url([blablabla]nav16V-Previous.gif) }
.textLast     {background-image:
  url([blablabla]nav16V-Last.gif)     }
.textFirst    {background-image:
  url([blablabla]nav16V-First.gif)    }

Zou !

Après ça, on passera aux choses sérieuses…

6 - Alignement des pavés

Toutes les pièces ont l'aspect désiré, reste à les mettre en place précisément. Cela concerne trois pavés :

#galeries liste des albums disponibles,
.thumbsAlbumContainer panneau d'imagettes,
.pagination pagination pour avancer de 5 en 5 photos.

Qu'ils soient tous à peu près alignés sur la gauche n'est que de la chance : au départ ces côtés gauches étaient déjà tous presque à l'aplomb et le passage en absolu n'y a rien changé. Fi des coïncidences ! Nous souhaitons une maîtrise complète.

Pour le placement vertical vous avez déjà vu passer top. Sur la lancée, utilisons left pour le placement horizontal. La pagination est ce qu'on fait de plus décalé sur la page, nous commencerons donc par elle. Si on essaye ça :

.pagination {left:30px;}

… qu'est-ce que ça donne ?

Wheu… la cata ! La pagination est à 30 pixels du bord gauche de la fenêtre, ce qui n'a aucun intérêt ici :une largeur de fenêtre, ça varie. Ce qu'on veut, c'est que le corps de la page d'album serve de référence.

OR, justement, ce corps porte un identifiant, à savoir #general (passez sur le lien pour voir). OR, justement, je vous ai parlé d'une manœuvre diabolique pour en faire la référence des absolus désorientés :

#general {position:relative;}
	/* sans indiquer aucun décalage */

Cela ne va aucunement faire bouger le corps du blog, mais donner un cadre à tous les pavés que nous avons mis en position:absolute.

Chiche ?

Gagné ! Comme le panneau d'imagettes est OK, ne reste plus qu'à placer les galeries :

#galeries { left:23px;
  margin-left:0; margin-top:2px;}

Zzzzzzzzzzzzou !

Réduire