Rechercher : dans
Par :

Une div au dessus de l'autre

Dernière réponse le 11 avr 2009 à 17:36:27 jona303, le 9 avr 2009 à 18:06:00 
 Signaler ce message aux modérateurs

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
Chuck Norris n'utilise pas de navigateur. Il lit le code sou­rce et imagine la page.
Question de gain de temps...

Configuration: Windows XP
Firefox 3.0.7

1

okuni, le 9 avr 2009 à 18:10:48

Tu dois mettre ton div js en dessous de ton formulaire. L'amour, c'est comme les spaghettis; quand c'est mou, c'est ­cuit. (proverbe belge)

Répondre à okuni

2

jona303, le 9 avr 2009 à 18:16:58

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.. Chuck Norris n'utilise pas de navigateur. Il lit le code sou­rce et imagine la page.
Question de gain de temps...

Répondre à jona303

3

okuni, le 10 avr 2009 à 10:01:22

Bizarre, tu nous montre le code source des 2 div? L'amour, c'est comme les spaghettis; quand c'est mou, c'est ­cuit. (proverbe belge)

Répondre à okuni

4

jona303, le 10 avr 2009 à 11:20:06

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

Chuck Norris n'utilise pas de navigateur. Il lit le code source et imagine la page.
Question de gain de temps...

Répondre à jona303

5

okuni, le 10 avr 2009 à 11:31:55

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 L'amour, c'est comme les spaghettis; quand c'est mou, c'est cuit. (proverbe belge)

Répondre à okuni

6

jona303, le 10 avr 2009 à 11:56:04

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.. Chuck Norris n'utilise pas de navigateur. Il lit le code source et imagine la page.
Question de gain de temps...

Répondre à jona303

7

okuni, le 10 avr 2009 à 12:01:00

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? L'amour, c'est comme les spaghettis; quand c'est mou, c'est ­cuit. (proverbe belge)

Répondre à okuni

8

 jona303, le 11 avr 2009 à 17:36:27

Dans ce cas ci je m'en sers pour setter et pas getter :) je met du contenu HTML dans la div ;) Chuck Norris n'utilise pas de navigateur. Il lit le code sou­rce et imagine la page.
Question de gain de temps...

Répondre à jona303
Collection CommentÇaMarche.net