Discussion :

[Guiiil]

Bonjour à tous,

J'imagine que mon problème doit être facilement réglable, mais j'y suis depuis hier soir et je n'arrive pas à trouver la bonne solution.

J'ai une banderole, avec en bas à gauche un coins mail et en bas à droite un coins information. Si je clique sur la partie information, un toggle se met en route, et laisse apparaitre le texte. Je voudrais qu'il prenne la partie droite de la banderole, mais il prend malheureusement toute la partie basse de l'image, de gauche à droite, empiétant donc sur le coins mail et se superposant de façon moche à lui.

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<div id="bloc_galerie_illustration">					
	<div style="background: url(../images/marques.jpg);position:absolute;width:740px; height:220px; background-repeat:no-repeat;">
		<div style="position:absolute;left:0px;bottom:0px;;border-style:solid;" class="AlerteMail">
		<div id="ContactSouscription">
			<div id="ContactForm" style="position: absolute;left:0;bottom:0;display:none">
												<fieldset>
													<label for="Nom">Nom</label>
													<input id="Nom" type="text" /><br>
													<label for="Email">Adresse E-mail</label>
													<input id="Email" type="text" /><br>
													<input id="EnvoiMail" type="submit" name="submit" onclick="closeForm()" /><br>
													<span id="MessageEnvoi">Vous recevrez désormais toutes <br> les informations concernant ' .$nom_com_marque. ' !</span>
												</fieldset>
			</div>
			<div id="ContactFautPasRater" style ="color:white;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;background-color:black;">Ne ratez pas les prochaines <br>nouveautés ' .$nom_com_marque. '</div>
			<div id="ContactLien" style="color:white;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;background-color:black;">
Souscrivez à l\'alerte e-mail
			</div>
		</div>
	</div> 
<div style="position:absolute;right:0px;bottom:0px;border-style:solid;" class="DecouvrirStyle">
<div id="DecouvrirStyle" style="rigth:0;bottom:0;display:none;color:white; filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;background-color:black;">
' .$com_marque. '
</div>
<div id="DecouvrirLien" style="color:white;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;background-color:black;">Découvrez le style ' .$nom_com_marque. '</div>
		</div>
         </div>
</div>';

Et le code jquery (tout simple)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
$(document).ready(  function()
{
	$('#ContactLien').click(function()
	{
		if ($('#ContactForm').is(':hidden'))
		{
			$('#ContactForm').toggle('slow');
			$('#ContactFautPasRater').toggle('slow');
		}
		else
		{
			$('#ContactForm').toggle('slow');
			$('#ContactFautPasRater').toggle('slow');
		}
	});
	$('#DecouvrirLien').click(function()
	{
		if ($('#DecouvrirStyle').is(':hidden'))
		{
			$('#DecouvrirStyle').toggle('slow');
		}
		else
		{
			$('#DecouvrirStyle').toggle('slow');
		}
	});
});

Je ne sais pas si j'ai été très clair... Si besoin je préciserai ^^.

En vous remerciant !

[danielhagnoul]

Bonsoir.

Si j'ai bien compris (pas certain) et bien déchiffré le code (pas évident) en modifiant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$('#ContactLien').click(function(){
    $('#ContactForm').toggle('slow');
    $('#ContactFautPasRater').toggle('slow');
});
 
$('#DecouvrirLien').click(function(){
    $('#DecouvrirStyle').toggle('slow');
});

et :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div id="ContactForm" style="position:absolute; left:0px; top:-250px; display:none;">

J'obtiens un résultat plus esthétique que l'original. Il reste de petites différences de positionnement suivant le navigateur (testé avec C3, F3 et IE8).