Accordéon [résolu] Bouton_activeAccordéon [résolu] Bouton_hoverAccordéon [résolu] Fb-hoverAccordéon [résolu] Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Fiche de Présentation RPG
Accordéon [résolu] EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Accordéon [résolu] EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Accordéon [résolu] EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Accordéon [résolu] EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Accordéon [résolu] EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Accordéon [résolu] EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Accordéon [résolu] EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Accordéon [résolu] EmptyMar 07 Fév 2023, 08:40 par Oxtran

Le Deal du moment : -55%
Coffret d’outils – STANLEY – ...
Voir le deal
21.99 €

Partagez
 

Accordéon [résolu]

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://hunter-city.keuf.net/
chaussette
chaussette
{ Membre }
{ Membre }

Féminin Messages : 40



Accordéon [résolu] Empty
Bonjour. =)

C'est pas vraiment un problème que j'ai, ce serait plutôt une demande. Avez vous un code pour faire comme sur le profil du forum mais horizontalement ? J'aimerais bien utiliser cette technique pour mes catégories... Je ne veux pas faire sur le profil, juste savoir si je peux le faire dans une description...
Voilà, si mon message n'est pas dans le bon endroit, vous pouvez le supprimer. =)
J'ai essayé de mettre un accordéon dans mes descriptions, mais ça n'a pas vraiment marché... >.> Et j'aimerais faire disparaître les écritures qui sont en dessous pour faire les faire apparaître quand je passe la souris sur l'image qui partirait comme sur CSS actif, mais à l'horizontal... Je sais pas si vous comprenez..

Merci pour votre aide. ^^

Chaussette


Dernière édition par chaussette le Mar 17 Avr 2012, 08:27, édité 2 fois
MessageSujet: Accordéon [résolu]   Accordéon [résolu] EmptySam 14 Avr 2012, 09:32
Revenir en haut Aller en bas
http://serialdesigner.forumactif.fr/
K-Surf
K-Surf
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1707



Accordéon [résolu] Empty
C'est possible de le faire sur les descriptions, il suffit de mettre dans tes templates autour de la variable qui correspond aux descriptionx de forum (tu peux chercher ici >> http://www.css-actif.com/f75-decryptage) des div qui les encadres, puis par la suite utilise ta feuille style pour faire l'effet voulu.

Après je sais pas si sa va marcher, mais quand tu rédige tes descriptions tu intalles tes balises avec une class (mettre le CSS dans la feuille de style):

Code:
<div class="description">CONTENUE DE TA DESCRIPTION</div>

Dans ta feuille de style:
Code:
.description {
tes effets voulu
}

.description: hover {
tes effets voulu
}
MessageSujet: Re: Accordéon [résolu]   Accordéon [résolu] EmptyDim 15 Avr 2012, 07:05
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Accordéon [résolu] Empty
Bonsoir,

Quelques recherches sur Google te permettront de trouver ton bonheur en ce qui concerne les tutoriels sur "comment faire un accordéon". Ca demande de faire du Javascript, d'une manière ou d'une autre (ou du CSS3 avancé, après y'a toujours des histoires de compatibilités).

Si tu as un problème plus précis, avec un code à corriger, on sera peut-être plus efficace. Sinon, je ne vois pas bien ce que nous pouvons faire pour toi ici pour le moment Smile
MessageSujet: Re: Accordéon [résolu]   Accordéon [résolu] EmptyLun 16 Avr 2012, 21:51
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Accordéon [résolu] Empty
Nope, ce n'est pas du javascript, c'est du CSS3, Espeon x)

Et c'est relativement simple une fois qu'on a compris le principe.

Prenons un conteneur, une description et... une image, tiens.

Code:
<div class="description"><div class="image"><img blablabbla /></div></div>

Il ne reste plus qu'à placer la description en positionnement relatif (pour servir de référence) en définissant des dimensions bien précises, avec un overflow hidden (pour cacher l'image qui va suivre). Puis on place l'image pile poil par dessus en positionnement absolu.

Et donc, pour cacher l'image au survol et faire apparaitre le texte en dessous, on lui met une transition, et on rajoute comme comportement au survol une marge suffisante pour la faire disparaitre du cadre contenant la description (vu qu'on a mis overflow hidden, l'image sera sans doute ailleurs dans la page, mais cachée XD)

Pour faire le changement à l'horizontale, il suffirait donc de lui donner une marge pour qu'elle parte d'un côté ou de l'autre @o@

Bref, pistes, pistes, à toi (chaussette) de chercher comment mettre ça en pratique. Plutôt que de faire ça de but en blanc sur ton forum, je te conseille de commencer par des essais. Notepad++ est ton ami, une image, un peu de code, tu testes jusqu'à ce que ça marche.
MessageSujet: Re: Accordéon [résolu]   Accordéon [résolu] EmptyMar 17 Avr 2012, 02:41
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Accordéon [résolu] Empty
Citation :
Ca demande de faire du Javascript, d'une manière ou d'une autre (ou du CSS3 avancé, après y'a toujours des histoires de compatibilité).

Notamment, le tableau de compatibilité des transitions en CSS3 comprend (sauf erreur) :

  • Safari 4+
  • Chrome 2+
  • Firefox 4+
  • Internet Explorer 10
  • Opera 10.6+



Bref, en tournant sous IE, vaut mieux encore faire un accordéon en Javascript; ou du moins, avoir une alternative qui fonctionne sous des navigateurs anciens.


Mais sinon oui, je plussoie tout ce que vient de dire Christa' Wink
MessageSujet: Re: Accordéon [résolu]   Accordéon [résolu] EmptyMar 17 Avr 2012, 05:59
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Accordéon [résolu] Empty
Tu m'excuseras, mais même sous IE, ça ne changera rien au fait que l'effet fonctionnera, il n'y a que la transition qui ne marchera pas (donc au niveau de l'affichage l'apparition/disparition de l'image sera instantanée au lieu de graduelle). Est-ce que la compatibilité IE vaut VRAIMENT la peine d'utiliser un script lourd ? Pour un truc aussi peu important ?
MessageSujet: Re: Accordéon [résolu]   Accordéon [résolu] EmptyMar 17 Avr 2012, 06:55
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Accordéon [résolu] Empty
Ca, c'est à la libre appréciation de chaussette Smile

Je pense qu'on vient de lui peser le pour et le contre des solutions envisageables, maintenant c'est à elle de faire quelques recherches en ce sens (à moins qu'elle n'ait des questions particulières encore ?).
MessageSujet: Re: Accordéon [résolu]   Accordéon [résolu] EmptyMar 17 Avr 2012, 06:59
Revenir en haut Aller en bas
http://hunter-city.keuf.net/
chaussette
chaussette
{ Membre }
{ Membre }

Féminin Messages : 40



Accordéon [résolu] Empty
Merci ! Je vais faire mes recherches et tenter de décrypter votre langage. X)
En tout cas, je vous remercie pour ces tuyaux. =D Je vais de ce pas, chercher un peu, en essayant de comprendre, si j'ai un problème, je reviendrais. XD Merci tout les trois. =D
MessageSujet: Re: Accordéon [résolu]   Accordéon [résolu] EmptyMar 17 Avr 2012, 08:26
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Accordéon [résolu] Empty
    Hello (:
    Si le sujet est résolu, je classe !
    Si tu as d'autres questions, n'hésite pas à rouvrir un autre sujet =D
MessageSujet: Re: Accordéon [résolu]   Accordéon [résolu] EmptyMar 17 Avr 2012, 08:47
Revenir en haut Aller en bas
Contenu sponsorisé




Accordéon [résolu] Empty
MessageSujet: Re: Accordéon [résolu]   Accordéon [résolu] Empty
Revenir en haut Aller en bas
 

Accordéon [résolu]

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Accordéon 2... T.T [Resolu]
» Image sur PA accordéon [résolu]
» bordure à supprimer (non résolu) + contenu de forum disparu (résolu)
» [résolu]Retirer auteur & message dans un topic RESOLU
» Problème d'éléments à déplacé : index_box [RESOLU] - viewtopic_body [RESOLU]

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forumactif.com