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! |
| chaussette
{ Membre }
Messages : 40
| 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 | |
| | | K-Surf
{ Spécialiste }
Messages : 1707
| 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 }
| | |
| | | Espeon
Administrateur
Messages : 1819
| 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 | | |
| | | 'Christa
Lostmindy
Messages : 2856
| 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. | | |
| | | Espeon
Administrateur
Messages : 1819
| - 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' | | |
| | | 'Christa
Lostmindy
Messages : 2856
| 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 ? | | |
| | | Espeon
Administrateur
Messages : 1819
| Ca, c'est à la libre appréciation de chaussette 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 ?). | | |
| | | chaussette
{ Membre }
Messages : 40
| 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 | | |
| | | Psycho
Psychopathe
Messages : 3407
| Hello (: Si le sujet est résolu, je classe ! Si tu as d'autres questions, n'hésite pas à rouvrir un autre sujet =D | | |
| | | Contenu sponsorisé
| | | | |
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|