Définir une zone pour le toggle dans une div

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:

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:

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 !