28172 sujets

CSS et mise en forme, CSS3

Liste de blocs extensibles

Bonjour,
j'ai besoin de concevoir une liste de boites, qui puissent être ouvertes pour obtenir des informations supplémentaires. Je sais déjà l'effet que je veux obtenir, j'arrive en partie à le mettre en œuvre avec CSS3 seulement (pour la transition, j'utilise quand même javascript pour changer la classe).
Ainsi la liste (ou, visuellement, le tableau) est composée de 3 colonnes et d'un nombre indéterminé de lignes. Lorsque l'on clique sur une boite, celle-ci s'étend pour prendre toute la largeur de la ligne, et sa hauteur augmente aussi un peu (40px). Au préalable (juste avant l'agrandissement), les autres boites sur la même ligne ont disparu en fondu.
L'effet n'est pas très compliqué pour les boites sur la première colonne, mais pour celles sur la deuxième et troisième colonne, un effet s'ajoute: elle doivent soit s'étendre sur leur droite et sur leur gauche, soit s'étendre sur leur gauche. Alors que les boites de la première colonne n'ont qu'à s'étendre sur la droite.

Voilà un 3 exemples résumants ce que je viens d'expliquer:

upload/43453-shema.png


Naturellement, j'aimerais avoir un rendu assez propre. Merci beaucoup de votre aide !
Modifié par juliendargelos (28 Aug 2013 - 16:29)
Hum, mon truc est un peu plus complexe que ça, le problème n'est pas de passer d'un état à l'autre, c'est la transition qui m'embête, le rendu que je recherche est celui-ci (j'arrive à l'obtenir avec les boites de la premières colonnes).
Je n'ai pas trop compris dans ce cas ce que tu cherches. Je n'ai pas non plus cherché à faire un design avancé et un effet complexe Smiley biggrin , c'était plus pour le principe des autres boîtes du milieu et droite. Ce n'était pas ça ta question ?
J'ai dû mal comprendre. Quand tu dis transition tu fais référence à quoi et à quel moment ?
J'admet que ma question n'est pas des plus claires:
Je sais passer d'un état à l'autre (de la boite qui fait le tiers de la largeur, à la boite qui fait toute la largeur), maintenant, j'aimerais animer ce passage d'un état à l'autre selon les étapes que j'ai décris dans mon premier post. Je parviens déjà à correctement faire cette transition avec les boites de la première colonnes (comme dans la vidéo de mon post précédent).
Le problème est donc d'obtenir cette transition avec les autres boites, car jusqu'à maintenant voilà les résultats que j'obtiens avec les boites de la deuxième et troisième colonne.
Modifié par juliendargelos (29 Aug 2013 - 11:53)
Mmmmwé... le principe pour moi reste grosso modo le même. En fait, si tu connais les dimensions de chaque case, le mieux serait de passer un positionnement absolu. Quand tu appliques les transitions, avec des éléments qui restent dans le flux, les dimensions "dérangent" l'effet car les autres éléments se réorganisent en fonction de la case que tu es entrain d'animer.
Je parachute une fois de plus un code qui une fois de plus pourrait être brouillon mais je pense qu'il sera tout de même compréhensible. Est-ce que je me rapproche ?

EDIT: les transitions CSS ne sont pas préfixées.
Modifié par Zelalsan (29 Aug 2013 - 13:23)
Plus que de te rapprocher, tu as parfaitement cerné ce que je tentais de décrire !
En effet, mes boites étaient en inline-block, et c'est ceci qui compliquait la tâche. C'est bien plus propre en absolu ! Je vais m'inspirer de ce que tu as fait pour finaliser mon travail.
Merci beaucoup de ton aide et de ton attention !
Bien sûr, je laisse le topic ouvert et je posterais ça dès que ce sera fait (je me suis penché sur autre chose en attendant, je veux juste le finir vite fait).
Ça a l'air super. En fait c'était plus le code qui m'intéressais, si tu peux faire un JsField ou autre ça serait sympa.
Ça m'a l'air un peu complexe tout ça. Enfin, il doit y avoir des paramètres que je n'ai pas. Par contre tu es entrain de combiner certaines propriétés en CSS inutiles (ex: display:block+position:absolute / float+display). En JS, si tu veux une compatibilité IE8, tu dois savoir que "getElementsByClassName" n'est pas interprété, il faut préférer "querySelectorAll(".taClasse")".
Si non sympa comme effet.
Ce fragment de code qui servira pour mon site ne sera compris que dans une version pour navigateurs récents ayant javascript activé, donc en dessous de IE10, l'utilisateur devra se contenter de la version simple (Et na !). Je nettoierais un peu tout ça Smiley cligne
juliendargelos a écrit :
Ce fragment de code qui servira pour mon site ne sera compris que dans une version pour navigateurs récents ayant javascript activé, donc en dessous de IE10, l'utilisateur devra se contenter de la version simple

Je ne te suis pas trop dans ta logique... Quel est le rapport entre JS activé et un navigateur récent ? De plus, IE9 est déjà plutôt récent. IE8 pourrait aussi comprendre tout ça...
Plus qu'une question de compatibilité, c'est surtout pour revendiquer ma pensée (que je n'aurais pas à développer je pense) en ce qui concerne les versions d'IE inférieures à v10 et les navigateurs sans JS, non pas que je méprise les utilisateurs concernés (ils n'ont parfois pas le choix !), je veux juste, par le biais d'un message discret, leur faire savoir ce qu'il ratent. Ainsi, la version simplifiée fonctionnera avec des liens normaux vers des pages php (et non pas avec JS qui change le contenu), et avec des propriétés CSS compréhensibles par tout navigateur.
Je me permet ce petit luxe uniquement car le site en question est le mien, et que je ne me présente pas comme professionnel.
Sujet clos
Aller à