[Article] Effet d'accordéon avec CSS et JavaScript

[RideKick]

Bonsoir,

Je vous propose une traduction de l'article anglophone de Rob Glazebrook (Webmaster de Css Newbie) : Advanced CSS Accordion Effect

Ce tutoriel va vous montrer comment mettre en place un effet Accordéon simple avec un peu de CSS Et du JQuery

Pour toutes questions/suggestions, vous pouvez les faire à la suite de ce message.

Bonne lecture

[gui80]

Bonjour,

merci pour le code clair et ludique.
C'est vrai qu'il faut toujours quand même penser aux gens sur IE6.
Du coup, la notion de hover ne prend que pour la balise a, et justifie du javascript pour simuler l'effet hover.

Cependant quelques remarques :
1) dans la balise body, je vois :
font: small/1.2 Arial, Helvetica, sans-serif;

small/1.2 définit la plage maximale de définition des tailles d'écriture possibles de la page web ?
C'est une écriture standard ?

2) Une barre de scrolling apparaît sur le 3ème élément (Automne). Ma question est lié à l'interrogation au point 1), et je me demande du coup si la taille de la police utilisé serait interprété différemment, si l'écriture n'est pas standard.

Merci d'avance pour les éclaircissements.

[12monkeys]

Bonsoir

Envoyé par gui80

1) dans la balise body, je vois :
font: small/1.2 Arial, Helvetica, sans-serif;

small/1.2 définit la plage maximale de définition des tailles d'écriture possibles de la page web ?
C'est une écriture standard ?

Cette écriture correspond à font-size/line height. Voici l'écriture de la propriété font :

Code :

[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]...

Font-size est obligatoire, si en plus on rajoute line-height (qui est facultatif -> présence du caractère ?) il faut les séparer par un slash...

[Kerod]

Envoyé par gui80

1) dans la balise body, je vois :
font: small/1.2 Arial, Helvetica, sans-serif;

small/1.2 définit la plage maximale de définition des tailles d'écriture possibles de la page web ?
C'est une écriture standard ?

Ce n'est pas détaillé dans l'article puisque ce n'est pas le but principal. Tout ce qui est détaillé dans l'article est à prendre en compte après ce qui est dans la page exemple, excepté le code de l'article est à personnaliser soi-même (d'où le terme exemple).

Mais pour répondre à ta question : small/1.2 définit la taille de la police (small) et le line-height(l'interligne) à appliquer. Oui c'est du standard. Tu peux voir ici : http://www.w3schools.com/css/css_font.asp

2) Une barre de scrolling apparaît sur le 3ème élément (Automne). Ma question est lié à l'interrogation au point 1), et je me demande du coup si la taille de la police utilisé serait interprété différemment, si l'écriture n'est pas standard.

Elle n'apparaît pas chez moi. Je dirais que ça dépend surtout du navigateur utilisé et de sa gestion des polices.

[gui80]

Intéressant cette simplification d'écriture du line-height.
On apprend tous les jours

Oubli de ma part : Le navigateur faisant le défaut de scrolling est le IE6.

[Kerod]

Attention ce n'est pas une simplification d'écriture du line-height vu qu'il n'y a rien à simplifier

Cette écriture permet juste de rajouter la définition interligne dans la définition de font. Donc je ne dirais pas que c'est une simplification . Mais je vois ce que tu veux dire

[gui80]

Bonjour,

l'important, c'est que l'on se comprenne alors

Défaut de scrolling sur la 3ème colonne :
- IE6
- IE8

Une interprétation différentes des tailles de police ?

[Kerod]

Tu n'as jamais entendu parler des différences entre les navigateurs à l'affichage de pages web ? Ben c'est l'une des différences.

Moi j'utilise Firefox 3 et je n'ai aucun scroll, j'utilise IE j'en ai. Tout simplement parce que les règles par défaut ne sont pas identiques et ça généralement les internautes n'y touchent pas vu que c'est dans la configuration du navigateur et d'affichage du contenu Web. D'où le fait que je dise que c'est normal que tu n'aies pas la même chose sous IE et FF.

[gui80]

Oui, désolé.
c'est une des différences alors, avec le png, le calcul des tailles de boîtes et autres.