Soutenez-nous
Publicité
+ Répondre à la discussion Actualité déjà publiée
Affichage des résultats 1 à 9 sur 9
  1. #1
    Rédacteur
    Avatar de RideKick
    Homme Profil pro
    Directeur technique
    Inscrit en
    septembre 2006
    Messages
    5 956
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : septembre 2006
    Messages : 5 956
    Points : 11 695
    Points
    11 695

    Par défaut Effet d'accordéon avec CSS et JavaScript

    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
    Pas de questions techniques en MP please

    Mon site perso

    Mon profil Viadeo

  2. #2
    Membre actif
    Inscrit en
    mars 2004
    Messages
    281
    Détails du profil
    Informations forums :
    Inscription : mars 2004
    Messages : 281
    Points : 150
    Points
    150

    Par défaut

    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.
    amiénois

  3. #3
    Responsable (X)HTML/CSS

    Avatar de 12monkeys
    Homme Profil pro Christophe F.
    Webmaster
    Inscrit en
    novembre 2006
    Messages
    4 100
    Détails du profil
    Informations personnelles :
    Nom : Homme Christophe F.
    Âge : 36
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : novembre 2006
    Messages : 4 100
    Points : 8 410
    Points
    8 410

    Par défaut

    Bonsoir

    Citation Envoyé par gui80 Voir le message
    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...
    Vous souhaitez participer à la rubrique (X)HTML/CSS, contactez moi.
    débutez avec les CSS
    Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS !
    Votez pour les messages qui vous ont aidés...

  4. #4
    Inactif
    Avatar de Kerod
    Inscrit en
    septembre 2004
    Messages
    11 681
    Détails du profil
    Informations forums :
    Inscription : septembre 2004
    Messages : 11 681
    Points : 18 122
    Points
    18 122

    Par défaut

    Citation Envoyé par gui80 Voir le message
    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.

  5. #5
    Membre actif
    Inscrit en
    mars 2004
    Messages
    281
    Détails du profil
    Informations forums :
    Inscription : mars 2004
    Messages : 281
    Points : 150
    Points
    150

    Par défaut

    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.
    amiénois

  6. #6
    Inactif
    Avatar de Kerod
    Inscrit en
    septembre 2004
    Messages
    11 681
    Détails du profil
    Informations forums :
    Inscription : septembre 2004
    Messages : 11 681
    Points : 18 122
    Points
    18 122

    Par défaut

    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

  7. #7
    Membre actif
    Inscrit en
    mars 2004
    Messages
    281
    Détails du profil
    Informations forums :
    Inscription : mars 2004
    Messages : 281
    Points : 150
    Points
    150

    Par défaut

    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 ?
    amiénois

  8. #8
    Inactif
    Avatar de Kerod
    Inscrit en
    septembre 2004
    Messages
    11 681
    Détails du profil
    Informations forums :
    Inscription : septembre 2004
    Messages : 11 681
    Points : 18 122
    Points
    18 122

    Par défaut

    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.

  9. #9
    Membre actif
    Inscrit en
    mars 2004
    Messages
    281
    Détails du profil
    Informations forums :
    Inscription : mars 2004
    Messages : 281
    Points : 150
    Points
    150

    Par défaut

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

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •