Forums Développement Multimédia

Aller au contenu

Liste avec texte partiellement déroulant

CODE HTML CSS

21 réponses à ce sujet

#1 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 05 October 2010 - 01:09 AM

Bonsoir,
J'ai une liste de questions/réponses. Comme les réponses sont un peu longue, je souhaiterais n'avoir que la liste des questions et que les réponses s'affichent en cliquant sur une flèche sous chaque question... est-ce possible ? sous Drw directement ou php ?

#2 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 05 October 2010 - 08:54 AM

  • Soit tu le fais en javascript, en utilisant au hasard jQuery
  • Soit tu le fais en PHP, et là tu recharges ta page avec un paramètre
  • Soit tu le fais en CSS avec la pseudo-class :focus

Voilà les pistes de recherche

#3 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 05 October 2010 - 09:49 AM

Merci pour ces pistes, je vais aller voir de ce pas la pseudo-class :focus

#4 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 05 October 2010 - 10:34 AM

Bon, sinon, une autre solution, avec la pseudo-class :target

Exemples :
http://css-infos.net...hot/l9t96y.html
ou
http://www.thecssnin...ffect-using-css

#5 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 05 October 2010 - 10:41 AM

Top le deuxième lien !, c'est tout à fait l'effet que je recherche. Il faut maintenant que je le décortique pour l'adapter. En+ IE6 l'accepte !
Merci beaucoup

#6 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 05 October 2010 - 10:48 AM

Le premier lien, c'est pour montrer des sources simples pour le principe.
En gros, tu utilises les ancres nommées. En plus, si tu files ton lien avec une ancre, ça ouvrira le bon contenu.

#7 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 05 October 2010 - 13:59 PM

Le système est plus que génial pour mon besoin du jour mais je n'arrive vraiment pas à régler un détail :
- si une réponse occupe trop de place elle n'apparait pas en entier. J'ai essayé de jouer sur les hauteur auto et autre mes rien à faire et le plus dur, c'est que sans ce réglage, le reste ne sert plus à rien.

Et la cerise sur le gâteau serait de pouvoir modifier la vitesse d'affichage mais je n'en demande pas trop.

Je joins un petit fichier pour modèle, c'est toujours plus clair

Fichier(s) joint(s)



#8 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 05 October 2010 - 14:27 PM

Tu peux modifier la vitesse, c'est le 1s que tu peux accélérer en 0.5s si tu veux

Tu remarqueras pour la hauteur, c'est marqué 6em.
On ne peut animer que sur 2 valeurs, ici de 0 à 6em. On ne peut pas le faire sur auto.

Une des astuces est de remplacer l'animation height par max-height mais ça ne marchera plus sur IE6 il me semble.
Tu peux tenter en animant max-height de 0 à 9999px:

dl dd {
    max-height: 0;
    -webkit-transition: max-height 1s ease-in-out;
}
dl dd:target {
    max-height: 9999px;
}
@media (-webkit-transition) {
dl dd:target {
    max-height: 9999px;
}
}
 

Tu peux aussi ne pas faire d'animation.

#9 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 05 October 2010 - 14:30 PM

est-ce que supprimer l'animation évite le pb de hauteur ?

#10 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 05 October 2010 - 14:31 PM

oui, parce que sans animation, tu peux faire

dl dd:target {
   height: auto;
}
 

Modifié par neolao, 05 October 2010 - 14:31 PM.


#11 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 05 October 2010 - 14:36 PM

oui effectivement, si je supprime

@media (-webkit-transition) {
 dl dd:target {
 height: 6em;
}

plus de problème de hauteur. Dommage pour le bel effet...

Et pour terminer, pourrais-tu me dire si on peut faire en sorte que la réponse s'ouvre ou se ferme à partir de clic successifs sur la question...

#12 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 05 October 2010 - 14:40 PM

pas avec ce système, car ça utilise le fait qu'on va à l'ancre nommée.

#13 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 05 October 2010 - 14:51 PM

Bon, la solution max-height ne fonctionne pas mais tu m'as déjà beaucoup aidé et je t'en remercie ! j'ai au moins une solution viable. Et si jamais tu trouves la solution pour la hauteur (je ne prétendrai pas la trouver avant), ce sera génial ;) :?: ;-)

#14 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 05 October 2010 - 14:54 PM

je n'ai pas l'intention de chercher ;)

pour le max-height, je l'ai testé chez moi, ça ouvre le nouveau contenu en animation, et ça ferme l'ancien en animation, successivement.

De toute facon, si tu veux être satisfait du résultat, essaye la piste du javascript.

#15 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 05 October 2010 - 14:59 PM

Il y a bien entendu la solution js SPRY de Dreamweaver mais c'est encore une surcharge de code importante. Je crois donc que je vais faire light pour cette fois, encore merci

#16 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 05 October 2010 - 15:34 PM

Heu, désolé de revenir sur le sujet mais en testant en grandeur réelle, soit en positionnant mes questions/réponses en milieu de page, le clic sur une question déploie correctement la réponse mais l'encrage fait remonter aussitôt la page jusqu'au dessus de la réponse et on ne voit plus la question...

C'est logique mais pas très fonctionnel... peut-on arranger ça ? ;)

#17 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 05 October 2010 - 15:42 PM

Non, c'est aussi une des fonctionnalités inhérentes aux ancres nommées.
J'étais sûr que tu viendrais au final à faire du Javascript ;)

#18 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 05 October 2010 - 15:47 PM

C'est pas sympa de balader les amateurs... ;)

Bon j'ai tenté le spry accordéon de Drw mais un message incompréhensible" concernant "L'assistance visuelle" empêche sa création alors que tous les autres widgets fonctionnent.

Bon si la pression de la journée qui défile n'était pas la, je pourrais rire de tout ça :?:

#19 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 05 October 2010 - 15:57 PM

hop un tuto jQuery http://www.alsacreat...vec-jQuery.html

#20 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 05 October 2010 - 15:59 PM

C'est marrant, je consultais justement ce tuto à l'instant, à croire qu'Alsacréation est le seul site crédible en la matière...

#21 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 05 October 2010 - 16:02 PM

il est propre et clair.

sinon, pour tes recherches, le mot clé est "accordéon"

#22 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 05 October 2010 - 16:03 PM

après une solution pipo, j'espère que l'accordéon sera plus efficace...



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP