Petites explications sur le skin Filezilla

Petites explications sur le skin Filezilla (le 21 mai 2006)

Chose promise chose due, je vais expliquer le principe du dernier skin Filezilla.

Si vous regardez la source du site, la logique est la suivante : une div "bandeau" en premier, une div "cadremilieu" qui contient une div "haut", "contenu" et "bas".

En fait, c'est assez simple, la div nommée "cadremilieu" a pour fond une image qui se répète verticalement permet au skin de s'allonger verticalement selon la taille du contenu de la page.

Ensuite, j'ai une partie haute qui est pilotée par "#cadremilieu .haut" dans la feuille de style. La partie basse suit le même principe.

Seul problème si je ne fais rien, la partie "contenu" devrait s'afficher en-dessous de l'image du haut, et j'aurais un grand espace blanc indésirable. Cela se résoud très simplement en ajoutant une marge négative pour la marge du haut de la div "contenu", ça permet de récupérer cet espace.

Pour le bandeau, le principe est très simple : chaque lien du bandeau contient une image avec le texte en noir et en blanc sur sa droite (juste assez pour ne pas qu'on voie le texte blanc).
Quand on survole le lien, l'image de fond est décalée, et donne l'illusion d'un rollover (en fait, le texte blanc se décale à gauche pour venir prendre la place du texte en noir).
Les deux textes sont sur fond transparent, quand on survole le lien, un fond bleu est ajouté (via la propriété background-color en CSS), ce qui complète l'illusion du rollover (texte blanc sur fond bleu).

Ensuite le reste du skin n'est que positionnements et utilisation de propriétés CSS.

J'espère que le principe est bien expliqué, je vous invite à faire des remarques en commentaire.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=947

2 commentaires

Posté par Jojo le 22/05/2006, à 13:26:41
ça a toujours l'air simple quand c'est expliqué !
En tout cas, bien vu pour les items du bandeau, l'idée est un peu tordue.

C'est pas un peu compliqué de faire ainsi ?
Posté par Nico le 22/05/2006, à 17:52:32
Certes, c'est un peu compliqué, mais ça permet de ne pas passer par le Javascript pour précharger les images du rollover.

Donc, même sans Javascript, pas de problème d'image non préchargée ! (sourire)

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.