Une div au dessus de l'autre

Fermé
jona303 Messages postés 369 Date d'inscription dimanche 25 janvier 2009 Statut Membre Dernière intervention 28 janvier 2013 - 9 avril 2009 à 18:06
jona303 Messages postés 369 Date d'inscription dimanche 25 janvier 2009 Statut Membre Dernière intervention 28 janvier 2013 - 11 avril 2009 à 17:36
Bonjour,
j'ai une page avec un formulaire, et quand on valide je veux faire ne feuille de confirmtion.
Je l'ai faite avec un div que je remplis avec js du contenu du formulaire.
Dans la structure de ma page, cette div est placée en dernière position.
je la repositione avec un margin-top négatif, mais j'ai un soucis:
le background de cette div est en dessous du formulaire, et donc la div ne masque pas le formulaire correctement. (il s'agit juste d'une couleur, pas d'une image)
Y a-t-il un truc auquel je dois penser?
merci
A voir également:

8 réponses

okuni Messages postés 1221 Date d'inscription jeudi 4 septembre 2008 Statut Membre Dernière intervention 2 janvier 2014 126
9 avril 2009 à 18:10
tu dois mettre ton div js en dessous de ton formulaire.
0
jona303 Messages postés 369 Date d'inscription dimanche 25 janvier 2009 Statut Membre Dernière intervention 28 janvier 2013 28
9 avril 2009 à 18:16
c'est la qu'il est en fait, il y a plus rien apres le formulaire,.. en fait le texte du div est au dessus du formulaire, mais le background-color en dessous..
0
okuni Messages postés 1221 Date d'inscription jeudi 4 septembre 2008 Statut Membre Dernière intervention 2 janvier 2014 126
10 avril 2009 à 10:01
bizarre, tu nous montre le code source des 2 div?
0
jona303 Messages postés 369 Date d'inscription dimanche 25 janvier 2009 Statut Membre Dernière intervention 28 janvier 2013 28
10 avril 2009 à 11:20
elles sont assez balèzes, mais ca done ça (pour le moment j'ai "résolu" le problème en chargeant une image en html qui sert de "background".

<div id = formIns"><form method="POST" class="formgen" action="index.php" align="center" name="form">
					<h3>Informations personelles</h2>
					<div class="el">
					<div id="nom">Nom: <br/><input type="text" name="nom" id="scr"/></div>
					</div>
					<div class="el"><div id="Prenom">Prenom: <br/><input type="text" name="prenom" /></div>

					</div>
					<div class="el"><div id="email">Adresse e-mail: <br/><input type="text" name="email" /></div>
					</div>
					<div class="ttr">
					<h3>Quel type de régime désirez-vous?</h3>
					</div>
					<div id="type">
					<div class="el">

					<input type="checkbox" name="typeE" value="typeE"/>Recherche d'une alimentation équilibrée (vous ne présentez pas d'excès de poids).</div>
					<div class="el"><input type="checkbox" name="typeEx" value="typeEx"/>Excès de poids.</div>
					<div class="el"><input type="checkbox" name="typeC" value="typeC"/>Cholestérol élevé.</div>
					<div class="el"><input type="checkbox" name="typeD" value="typeD"/>Diabète de type 1 ou 2.</div>
					</div>
					<div class="ttr">
					<h3>Informations relatives au régime</h3>

					</div>
					<div id="date">
					<div class="el">Date de Naissance: <br/><select name=jour><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> <select name="mois"><option value="1">janvier</option><option value="2">fevrier</option><option value="3">mars</option><option value="4">avril</option><option value="5">mai</option><option value="6">juin</option><option value="7">juillet</option><option value="8">aout</option><option value="9">septembre</option><option value="10">octobre</option><option value="11">novembre</option><option value="12">decembre</option></select> 19<input type="text" size="2" name="year" value="00"/></div></div>

					<div class="el">Sexe: <br/><SELECT NAME="sexe" size="1"><OPTION value="M" >Homme</option><OPTION value="F" selected="selected">Femme</option></SELECT>
					</div>
					<div id="cdr">
					<div class="el"><div id="taille">Taille: <br/><input type="text" name="taille" size="3"  /> cm.</div></div>
					 <div class="el"><div id="poids">Poids :  <br/><input type="text" name="poids" size="3" /> kg.</div>

					</div>
					</div>
					<div class="ttr">
					<h3>PAL (Physical Activity Level):</h3>
					</div>
					<div id="pal">
					<div class="el">
					<div class="bold"><input type="checkbox" id="te"name="activite" value="Sedentaire" onChange="gerepal('te');"> Niveau 1 : sédentaire : </div>votre travail ne nécessite pas beaucoup d’efforts physiques, 
vous marchez moins d’une demi-heure par jour et vous ne pratiquez pas de sport.
					</div>

					<div class="el">
					<div class="bold"><input type="checkbox" id="te2"name="activite" value="moderee" onChange="gerepal('te2');"> Niveau 2 : activité physique modérée :</div> votre travail entraîne des efforts physiques réguliers,
 ou vous marchez au moins une demi-heure par jour ou, vous pratiquez un sport au moins deux fois par semaine.
					</div>
					<div class="el">
					<div class="bold"><input type="checkbox" id="te3"name="activite" value="importante" onChange="gerepal('te3');"> Niveau 3 : activité physique moyenne :</div>votre travail entraîne des efforts physiques importants,
 ou vous marchez régulièrement d’un bon pas  plus d’une demi-heure par jour,
 ou vous pratiquez un sport relativement intensif plus de deux fois par semaine.
					</div>
					<div class="el">

					<div class="bold"><input type="checkbox" id="te4"name="activite" value="tres importante" onChange="gerepal('te4');"> Niveau 4 : activité lourde ou entraînement sportif intense : </div>vous êtes un travailleur de force 
ou vous pratiquez un sport intensif au moins trois ou quatre fois par semaine.
					</div>
					</div>
					<div class="ttr">
					<h3>Ossature :</h3> 
					</div>
					<div class="el">Examinez les os de vos poignets. Sont-ils <select name="oss"><option value="Forte">épais</option><option value="Moyenne">moyens</option><option value="Fine">fins</option></select> ?</div>

					<div id="aliments_p"><div class="ttr"><h3>Y a-t-il, dans cette liste, des aliments que vous n'aimez pas:</h3> </div><table cellpadding=0 cellspacing=0 halign=left><tr><td><ul></ul></td></tr><tr><td><ul><li> <input type="checkbox" name="exclu0" value="Agneau"/>Agneau</li><li> <input type="checkbox" name="exclu1" value="Ananas"/>Ananas</li><li> <input type="checkbox" name="exclu2" value="Anchois"/>Anchois</li><li> <input type="checkbox" name="exclu3" value="Asperges"/>Asperges</li><li> <input type="checkbox" name="exclu4" value="Aubergine"/>Aubergine</li><li> <input type="checkbox" name="exclu5" value="Avocat"/>Avocat</li><li> <input type="checkbox" name="exclu6" value="Betteraves rouges"/>Betteraves rouges</li><li> <input type="checkbox" name="exclu7" value="Bœuf"/>Bœuf</li><li> <input type="checkbox" name="exclu8" value="Cabillaud"/>Cabillaud</li><li> <input type="checkbox" name="exclu9" value="Canard"/>Canard</li><li> <input type="checkbox" name="exclu10" value="Céleri"/>Céleri</li><li> <input type="checkbox" name="exclu11" value="Champignons"/>Champignons</li><li> <input type="checkbox" name="exclu12" value="Chocolat"/>Chocolat</li><li> <input type="checkbox" name="exclu13" value="Chou blanc"/>Chou blanc</li><li> <input type="checkbox" name="exclu14" value="Chou fleur"/>Chou fleur</li><li> <input type="checkbox" name="exclu15" value="Chou rouge"/>Chou rouge</li><li> <input type="checkbox" name="exclu16" value="Concombre"/>Concombre</li><li> <input type="checkbox" name="exclu17" value="Couscous"/>Couscous</li><li> <input type="checkbox" name="exclu18" value="Crabe"/>Crabe</li><li> <input type="checkbox" name="exclu19" value="Crevettes"/>Crevettes</li></ul></td><td valign="top"><ul><li> <input type="checkbox" name="exclu20" value="Plats aigres-doux"/>Plats aigres-doux</li><li> <input type="checkbox" name="exclu21" value="Curry"/>Curry</li><li> <input type="checkbox" name="exclu22" value="Endives (chicons)"/>Endives (chicons)</li><li> <input type="checkbox" name="exclu23" value="Epinards"/>Epinards</li><li> <input type="checkbox" name="exclu24" value="Fenouil"/>Fenouil</li><li> <input type="checkbox" name="exclu25" value="Foie"/>Foie</li><li> <input type="checkbox" name="exclu26" value="Foie gras"/>Foie gras</li><li> <input type="checkbox" name="exclu27" value="Fromage"/>Fromage</li><li> <input type="checkbox" name="exclu28" value="Fromage de chèvre"/>Fromage de chèvre</li><li> <input type="checkbox" name="exclu29" value="Haricots rouges"/>Haricots rouges</li><li> <input type="checkbox" name="exclu30" value="Huile d'olive"/>Huile d'olive</li><li> <input type="checkbox" name="exclu31" value="Lapin"/>Lapin</li><li> <input type="checkbox" name="exclu32" value="Lardons"/>Lardons</li><li> <input type="checkbox" name="exclu33" value="Magret de canard"/>Magret de canard</li><li> <input type="checkbox" name="exclu34" value="Melon"/>Melon</li><li> <input type="checkbox" name="exclu35" value="Moules"/>Moules</li><li> <input type="checkbox" name="exclu36" value="Navets"/>Navets</li><li> <input type="checkbox" name="exclu37" value="Œufs"/>Œufs</li><li> <input type="checkbox" name="exclu38" value="Olives"/>Olives</li><li> <input type="checkbox" name="exclu39" value="Pâtes"/>Pâtes</li></ul></td><td valign="top"><ul><li> <input type="checkbox" name="exclu40" value="Petit déjeuner "salé""/>Petit déjeuner "salé"</li><li> <input type="checkbox" name="exclu41" value="Poireaux"/>Poireaux</li><li> <input type="checkbox" name="exclu42" value="Poisson"/>Poisson</li><li> <input type="checkbox" name="exclu43" value="Poivrons"/>Poivrons</li><li> <input type="checkbox" name="exclu44" value="Porc"/>Porc</li><li> <input type="checkbox" name="exclu45" value="Poulet"/>Poulet</li><li> <input type="checkbox" name="exclu46" value="Rognons"/>Rognons</li><li> <input type="checkbox" name="exclu47" value="Roquefort"/>Roquefort</li><li> <input type="checkbox" name="exclu48" value="Sardines"/>Sardines</li><li> <input type="checkbox" name="exclu49" value="Sauce tomate"/>Sauce tomate</li><li> <input type="checkbox" name="exclu50" value="Saumon"/>Saumon</li><li> <input type="checkbox" name="exclu51" value="Tarama"/>Tarama</li><li> <input type="checkbox" name="exclu52" value="Thon"/>Thon</li><li> <input type="checkbox" name="exclu53" value="Tomates crues"/>Tomates crues</li><li> <input type="checkbox" name="exclu54" value="Tomates cuites"/>Tomates cuites</li><li> <input type="checkbox" name="exclu55" value="Truite"/>Truite</li><li> <input type="checkbox" name="exclu56" value="Yaourt"/>Yaourt</li></ul></td></tr></table>

					</div>
					<div id="verif2">
					<div class="el"><input type="checkbox" name="verif" id="verif" value="true"/> J'ai lu et j'accepte les conditions de vente.
						</div>
						</div>
					<div id="submit_r">
					<input type="button" onClick="checkAll();"/>
					</div>
					</form>

					<div id="checker">
					</div>

c'est la div checker qui est au dessus de tout et que je remplis en js

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
okuni Messages postés 1221 Date d'inscription jeudi 4 septembre 2008 Statut Membre Dernière intervention 2 janvier 2014 126
10 avril 2009 à 11:31
Si c'est cette div qui contient le js, tu dois le mettre au dessus de ce formulaire
<div id="checker"></div>

sinon c'est vrai qu'une image servant de background reste le plus simple :p
0
jona303 Messages postés 369 Date d'inscription dimanche 25 janvier 2009 Statut Membre Dernière intervention 28 janvier 2013 28
10 avril 2009 à 11:56
merci de ton aide :)
la div ne "contient" pas le js, c'est la function checkAll qui fait un document.getElementById('checker').innerHTML=tout plein de trucs
je crois que je vais laisser comme ça..
0
okuni Messages postés 1221 Date d'inscription jeudi 4 septembre 2008 Statut Membre Dernière intervention 2 janvier 2014 126
10 avril 2009 à 12:01
ok mais ça
document.getElementById('checker').innerHTML
ça veux dire que JS va récupéré le truc où se trouve l'id checker donc dans ce cas-ci, c'est ta div.
Je me trompe?
0
jona303 Messages postés 369 Date d'inscription dimanche 25 janvier 2009 Statut Membre Dernière intervention 28 janvier 2013 28
11 avril 2009 à 17:36
Dans ce cas ci je m'en sers pour setter et pas getter :) je met du contenu HTML dans la div ;)
0