Un target pour 2 DIV

Bonjour tout le monde !

Je me présente, c'est mon premier message sur ce forum. Vincent, je suis designer, et je m'intéresse pas mal aux interfaces.

Justement, en ce moment, je monte une structure de site pour qqn, tout en CSS 2 et 3, mais je bloque sur un point :
J'ai une DIV de 150px par 300px contenant une image, et une légende. J'aimerai, lorsque l'on clique dessus, que le contenu disparaisse, que la DIV s'agrandisse passant à 200px par 400px, et qu'un autre contenu apparaisse.
Ceci afin de présenter 1 aperçu d'un produit, de cliquer sur la DIV pour afficher les détails et des photos supplémentaires sur le produit.

Voilà mon code CSS (qui ne fonctionne pas comme je veux) :

.produit {
		position:absolute;
		visibility:visible;
		background-color:#ccc;
		width:150px;
		height:200px;
		z-index:-10;
	}
	
	.fiche {
		position:absolute;
		width:150px;
		height:200px;
		background-color:#eee;
		overflow:hidden;
		z-index:10;
		-webkit-transition-property: height, width;
		-webkit-transition-duration: 0.5s;
	}
	
	.produit:target, .fiche:target {
		visibility:hidden;
	}

Et le code HTML :

	<div id="openficheproduit" class="fiche">
		<a href="#openficheproduit">Ouvrir la DIV</a>
	</div>
	<div class="produit">
		Présentation du produit.
		<a href="#closeficheproduit">Fermer la DIV</a>
	</div>

Ah oui, je précise que je fais ça par passion, que ce n'est pas mon "vrai" boulot. Vous risquez de voir des choses qui pourraient vous sembler absurde… mais ne m'en voulez pas, je débute !

Merci à vous d'avoir pris le temps de me lire !
Modifié par vincentalheure (19 Sep 2010 - 01:26)

Salut et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Bonne continuation

Bonsoir,

Je ne trouve pas comment éditer mon message.

Pardonnez mon erreur de petit nouveau !
:)

vincentalheure a écrit :
Bonjour tout le monde !

Je me présente, c'est mon premier message sur ce forum. Vincent, je suis designer, et je m'intéresse pas mal aux interfaces.

Justement, en ce moment, je monte une structure de site pour qqn, tout en CSS 2 et 3, mais je bloque sur un point :
J'ai une DIV de 150px par 300px contenant une image, et une légende. J'aimerai, lorsque l'on clique dessus, que le contenu disparaisse, que la DIV s'agrandisse passant à 200px par 400px, et qu'un autre contenu apparaisse.
Ceci afin de présenter 1 aperçu d'un produit, de cliquer sur la DIV pour afficher les détails et des photos supplémentaires sur le produit.

Voilà mon code CSS (qui ne fonctionne pas comme je veux) :

.produit {
		position:absolute;
		visibility:visible;
		background-color:#ccc;
		width:150px;
		height:200px;
		z-index:-10;
	}
	
	.fiche {
		position:absolute;
		width:150px;
		height:200px;
		background-color:#eee;
		overflow:hidden;
		z-index:10;
		-webkit-transition-property: height, width;
		-webkit-transition-duration: 0.5s;
	}
	
	.produit:target, .fiche:target {
		visibility:hidden;
	}

Et le code HTML :

	<div id="openficheproduit" class="fiche">
		<a href="#openficheproduit">Ouvrir la DIV</a>
	</div>
	<div class="produit">
		Présentation du produit.
		<a href="#closeficheproduit">Fermer la DIV</a>
	</div>

Ah oui, je précise que je fais ça par passion, que ce n'est pas mon "vrai" boulot. Vous risquez de voir des choses qui pourraient vous sembler absurde… mais ne m'en voulez pas, je débute !

Merci à vous d'avoir pris le temps de me lire !

[code]

En haut à droite du message initial de ce sujet, se trouve un petit lien "editer" qui te permettra de revenir à la page qui t'as servi à taper ton message. Il te suffira alors d'entourer ton code des balises [ code] et [ /code] (l'espace à l'intérieur des crochets n'existe pas, je l'ai juste ajouté pour que la balise s'affiche dans le corps de ce message).

Par extension, tu peux éditer n'importe quel de tes messages en cliquant sur le lien "editer" qui correspond à chacun d'entre eux.