Position d'éléments en CSS

**El Locos** · 06/10/2009, 14h37

Bonjour à tous.

Dans un premier temps, j'ai cherché sur le forum sans trouver précisement ce que je recherche.

Donc je suis en train de faire un site dans lequel on peut déposer une annonce.

Ma page est constitué de différents bouton liste, de champs à remplir, etc,...
Lorsque je clic sur un des bouton liste, d'autres bouton liste apparaissent.
Le problème étant que je n'arrive pas à décaler les champs se trouvant en dessous lorsqu'ils apparaissent.Ce qui fait qu'avec le css je n'arrive pas à comprendre comment faire puisque le "margin-top" se fait sur les champs qui dans un premier temps sont cachés est donc lorsqu'il apparaissent ils se mettent l'un au dessus de l'autre.

J'ai cherché sur internet et d'autre forum et la franchement je n'ai pas de solution....J'ai trouvé le "display:none" mais je ne n'arrive pas à le faire fonctionner avec mes boutons liste.

Je vous donne un lien d'un site qui utilise ce que j'aimerai faire : http://www2.leboncoin.fr/ai/form/2?ca=17_s

Lorsque l'on choisit la catégorie
des champs s'ajoute ou pas et les champs en dessous se décale, ce que j'aimerai faire...

Voila je vous remercie à l'avance de vos conseils, par ce que la franchement...je sais pas..

Merci

**tzilliox** · 06/10/2009, 14h56

Bonjour El Locos,

il faut en effet utiliser la propriété "display: none".
Il faut lancer une fonction pour afficher et/ou cacher les autres boutons lorsque le premier champs change. Pour cela, il existe l'attribut javascript onchange="maJsfunction();".

Pour t'aider un peu plus, il faudrait voir ton code. Car il y a plusieurs façon de faire ce genre de choses, mais le mieux serait de t'aider à le réaliser à ta manière

Bon aprèm,
Thomas.

**El Locos** · 06/10/2009, 15h13

Oui donc le voici

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 
<link rel="stylesheet" type="text/css" media="screen" href="style/commun.css" />
<link rel="stylesheet" type="text/css" media="screen" href="style/deposez1.css" />
<?php
//$_SERVER["HTTP_USER_AGENT"] : variable donnant le navigateur
if (ereg("MSIE", $_SERVER["HTTP_USER_AGENT"])) {
    //Internet explorer
    echo "<link rel=\"stylesheet\" href=\"style/d60001ie.css\" type=\"text/css\" />";
} else if (ereg("^Mozilla/", $_SERVER["HTTP_USER_AGENT"])) {
    //Mozilla - Firefox
    echo "<link rel=\"stylesheet\"  href=\"style/d70201mz.css\" type=\"text/css\" />";;
} else if (ereg("^Opera/", $_SERVER["HTTP_USER_AGENT"])) {
    //Opera 
    echo "<link rel=\"stylesheet\" href=\"operaStyle.css\" type=\"text/css\" />";
} else {
    //Les autres
    echo "<link rel=\"stylesheet\" href=\"defaultStyle.css\" type=\"text/css\" />";
}
?>
 
 
 
<style type="text/css">
body {background-color: #f66d0f;}
.Style1 {color: #FFFFFF}
</style>
 
 
<title>/d&eacute;posez une annonce</title>
 
<script language="JavaScript" type="text/javascript"><!--/
 
function requeteModele(formulaire2)
{
var l1    = formulaire2.elements["marque"];   
var l2    = formulaire2.elements["modele"];   
var index = l1.selectedIndex;   
if(index < 1)   
l2.options.length = 0;   
else {   
    	var xhr_object = null;   
		if(window.XMLHttpRequest) // Firefox   
    	xhr_object = new XMLHttpRequest();   
		 else if(window.ActiveXObject) // Internet Explorer   
   		 xhr_object = new ActiveXObject("Microsoft.XMLHTTP");   
 				else { // XMLHttpRequest non support� par le navigateur   
    					alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");   
    					return;    
					 }   
 
		xhr_object.open("POST", "veh.php", true);
		xhr_object.onreadystatechange = function()
	 	{   
       if(xhr_object.readyState == 4)   
          eval(xhr_object.responseText);   
    	}   
 
    xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
    var data = "idM="+escape(l1.options[index].value)+"&form="+formulaire2.name+"&select=list2";   
    xhr_object.send(data);
 
	var marque;
	marque=formulaire2.elements['marque'].options[formulaire2.elements['marque'].selectedIndex].text;
 
	}   
 
 
 
 
}
 
 
function affiche(formulaire)
{
 
	//java type
	var l1    = formulaire.elements["categorie"];   
	var l2    = formulaire.elements["typeVeh"];   
	var index = l1.selectedIndex;   
	if(index < 1)   
	l2.options.length = 0;   
	else {   
    	var xhr_object = null;   
		if(window.XMLHttpRequest) // Firefox   
    	xhr_object = new XMLHttpRequest();   
		 else if(window.ActiveXObject) // Internet Explorer   
   		 xhr_object = new ActiveXObject("Microsoft.XMLHTTP");   
 				else { // XMLHttpRequest non support� par le navigateur   
    					alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");   
    					return;    
					 }   
 
		xhr_object.open("POST", "type.php", true);
		xhr_object.onreadystatechange = function()
	 	{   
       if(xhr_object.readyState == 4)   
          eval(xhr_object.responseText);   
    	}   
 
    xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
    var data = "idcategorie="+escape(l1.options[index].value)+"&form="+formulaire.name+"&select=list2";   
    xhr_object.send(data);
 
	var categorie;
	categorie=formulaire.elements['categorie'].options[formulaire.elements['categorie'].selectedIndex].text;
 
	}   
 
 
	//fin java type
 
	var choix;
	choix=formulaire.elements['categorie'].options[formulaire.elements['categorie'].selectedIndex].value;
 
 
	if(choix=="1")
	{
	document.getElementById("marqueVoitureVisi").style.visibility= 'visible';
	document.getElementById("modeleVoitureVisi").style.visibility= 'visible';
	document.getElementById("anneeVisi").style.visibility= 'visible';
	document.getElementById("kilometreVisi").style.visibility= 'visible';
	document.getElementById("energieVisi").style.visibility= 'visible';
	document.getElementById("typeVehVisi").style.visibility= 'visible';
	document.getElementById("typeBoiteVisi").style.visibility= 'visible';
 
	document.getElementById("marqueVehVisi").style.visibility= 'hidden';
	document.getElementById("modeleVehVisi").style.visibility= 'hidden';
	document.getElementById("cylindreVisi").style.visibility= 'hidden';
	}
	else if(choix=="2" || choix=="8")
		{
		document.getElementById("marqueVehVisi").style.visibility= 'visible';
		document.getElementById("modeleVehVisi").style.visibility= 'visible';
		document.getElementById("cylindreVisi").style.visibility= 'visible';
		document.getElementById("anneeVisi").style.visibility= 'visible';
		document.getElementById("kilometreVisi").style.visibility= 'visible';
		document.getElementById("typeVehVisi").style.visibility= 'visible';
 
		document.getElementById("marqueVoitureVisi").style.visibility= 'hidden';
		document.getElementById("modeleVoitureVisi").style.visibility= 'hidden';
		document.getElementById("energieVisi").style.visibility= 'hidden';
		document.getElementById("typeBoiteVisi").style.visibility= 'hidden';
 
		}
		else if(choix=="7")
				{
				document.getElementById("marqueVoitureVisi").style.visibility= 'hidden';
				document.getElementById("modeleVoitureVisi").style.visibility= 'hidden';
				document.getElementById("energieVisi").style.visibility= 'hidden';
				document.getElementById("cylindreVisi").style.visibility= 'hidden';
				document.getElementById("kilometreVisi").style.visibility= 'hidden';
				document.getElementById("anneeVisi").style.visibility= 'hidden';
				document.getElementById("typeBoiteVisi").style.visibility= 'hidden';
 
				document.getElementById("marqueVehVisi").style.visibility= 'visible';
				document.getElementById("modeleVehVisi").style.visibility= 'visible';
				document.getElementById("typeVehVisi").style.visibility= 'visible';
				}
				else if(choix=="0")
				{
				document.getElementById("marqueVoitureVisi").style.visibility= 'hidden';
				document.getElementById("modeleVoitureVisi").style.visibility= 'hidden';
				document.getElementById("energieVisi").style.visibility= 'hidden';
				document.getElementById("cylindreVisi").style.visibility= 'hidden';
				document.getElementById("kilometreVisi").style.visibility= 'hidden';
				document.getElementById("typeVehVisi").style.visibility= 'hidden';
				document.getElementById("marqueVehVisi").style.visibility= 'hidden';
				document.getElementById("modeleVehVisi").style.visibility= 'hidden';				
				document.getElementById("anneeVisi").style.visibility= 'hidden';
				document.getElementById("typeBoiteVisi").style.visibility= 'hidden';
				}else if(choix=="3")
					 {
					 	document.getElementById("marqueVehVisi").style.visibility= 'visible';
						document.getElementById("modeleVehVisi").style.visibility= 'visible';				
						document.getElementById("anneeVisi").style.visibility= 'visible';
						document.getElementById("typeVehVisi").style.visibility= 'visible';
 
						document.getElementById("marqueVoitureVisi").style.visibility= 'hidden';
						document.getElementById("modeleVoitureVisi").style.visibility= 'hidden';
						document.getElementById("energieVisi").style.visibility= 'hidden';
						document.getElementById("cylindreVisi").style.visibility= 'hidden';
						document.getElementById("kilometreVisi").style.visibility= 'hidden';
						document.getElementById("typeBoiteVisi").style.visibility= 'hidden';
					}else if(choix=="4")
					{
					document.getElementById("marqueVehVisi").style.visibility= 'visible';
					document.getElementById("modeleVehVisi").style.visibility= 'visible';				
					document.getElementById("anneeVisi").style.visibility= 'visible';
					document.getElementById("typeVehVisi").style.visibility= 'visible';
					document.getElementById("kilometreVisi").style.visibility= 'visible';
					document.getElementById("energieVisi").style.visibility= 'visible';
					document.getElementById("typeBoiteVisi").style.visibility= 'visible';
 
					document.getElementById("marqueVoitureVisi").style.visibility= 'hidden';
					document.getElementById("modeleVoitureVisi").style.visibility= 'hidden';
					document.getElementById("cylindreVisi").style.visibility= 'hidden';
 
					}else if(choix=="5" || choix=="6")
					{
					document.getElementById("marqueVehVisi").style.visibility= 'visible';
					document.getElementById("modeleVehVisi").style.visibility= 'visible';				
					document.getElementById("anneeVisi").style.visibility= 'visible';
					document.getElementById("typeVehVisi").style.visibility= 'visible';
					document.getElementById("cylindreVisi").style.visibility= 'visible';
 
					document.getElementById("kilometreVisi").style.visibility= 'hidden';
					document.getElementById("energieVisi").style.visibility= 'hidden';
					document.getElementById("typeBoiteVisi").style.visibility= 'hidden';
					document.getElementById("marqueVoitureVisi").style.visibility= 'hidden';
					document.getElementById("modeleVoitureVisi").style.visibility= 'hidden';
					}
 
}
 
 
function affiche1(formulaire)
{
	var choix1;
	choix1=formulaire.elements['typeVeh'].options[formulaire.elements['typeVeh'].selectedIndex].text;
 
						if(choix1=="remorque")
						{
						document.getElementById("marqueVehVisi").style.visibility= 'visible';
						document.getElementById("modeleVehVisi").style.visibility= 'visible';				
						document.getElementById("anneeVisi").style.visibility= 'visible';
						document.getElementById("typeVehVisi").style.visibility= 'visible';
 
						document.getElementById("marqueVoitureVisi").style.visibility= 'hidden';
						document.getElementById("modeleVoitureVisi").style.visibility= 'hidden';
						document.getElementById("energieVisi").style.visibility= 'hidden';
						document.getElementById("cylindreVisi").style.visibility= 'hidden';
						document.getElementById("kilometreVisi").style.visibility= 'hidden';
						document.getElementById("typeBoiteVisi").style.visibility= 'hidden';
 
						}else if(choix1=="camping car")
						{
						document.getElementById("marqueVehVisi").style.visibility= 'visible';
						document.getElementById("modeleVehVisi").style.visibility= 'visible';				
						document.getElementById("anneeVisi").style.visibility= 'visible';
						document.getElementById("typeVehVisi").style.visibility= 'visible';
						document.getElementById("kilometreVisi").style.visibility= 'visible';
						document.getElementById("energieVisi").style.visibility= 'visible';
						document.getElementById("typeBoiteVisi").style.visibility= 'visible';
 
						document.getElementById("marqueVoitureVisi").style.visibility= 'hidden';
						document.getElementById("modeleVoitureVisi").style.visibility= 'hidden';
						document.getElementById("cylindreVisi").style.visibility= 'hidden';
 
 
						} else if(choix1=="caravane")
						{
						document.getElementById("marqueVehVisi").style.visibility= 'visible';
						document.getElementById("modeleVehVisi").style.visibility= 'visible';				
						document.getElementById("anneeVisi").style.visibility= 'visible';
						document.getElementById("typeVehVisi").style.visibility= 'visible';
 
						document.getElementById("kilometreVisi").style.visibility= 'hidden';
						document.getElementById("energieVisi").style.visibility= 'hidden';
						document.getElementById("typeBoiteVisi").style.visibility= 'hidden';
						document.getElementById("marqueVoitureVisi").style.visibility= 'hidden';
						document.getElementById("modeleVoitureVisi").style.visibility= 'hidden';
						document.getElementById("cylindreVisi").style.visibility= 'hidden';
						}
 
}
 
 
//--></script>
</head>
 
<body>
<div id="degrade"></div><!-- fin div degrade -->
<div id="container">
<form name="test2" action="d70202.php" method="post">
<div id="logo">
 
<a href="http://www..com/index.php"><img border="0" src="images/logo1.jpg" alt="" /></a>
 
<div id="loggsession"><span class="Style1">Bonjour : <?php echo $_SESSION['id']."&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"; ?></span></div>
 
</div><!--fin div logo -->
 
<div id="menu">
<ul>
<li><a href="index.php">Accueil</a></li>
<li><a href="d80000.php" >Acheter</a></li>
<li><a href="d70000.php">Vendre</a></li>
<li><a href="d60000.php">Mes Annonces</a></li>
<li><a href="d50000.php">Aide</a></li>
</ul>
</div><!-- fin div menu -->
 
 
<div id="cadre">
 
<div class="upperleft1">
<div class="upperright2">
<div class="lowerleft3">
<div class="lowerright4">
 
  <div class="texteform" id"texteliste">
	<label><span class="Style1">Cat&eacute;gorie:</span></label>
  </div>
 
  <div id="formliste">
    <select name="categorie" id="categorie"  onChange="affiche(this.form)" >
      <option selected="selected"  value="0" style="background-color:#f66d0f;">-- VEHICULES --</option>
      <option value="1" style="background-color:#00CC33;" >Voitures</option>
      <option value="2"  style="background-color:#00CC33;" style="display:block;">Deux roues</option>
      <option value="8" style="background-color:#00CC33;" >3 et 4 roues</option>
      <option value="3"  style="background-color:#00CC33;">Caravaning</option>
      <option value="4"  style="background-color:#00CC33;">Camion/Bus</option>
      <option value="5" style="background-color:#00CC33;" >Nautisme</option>
	  <option value="6" style="background-color:#00CC33;" >A&eacute;ronautique</option>
      <option value="7"  style="background-color:#00CC33;">Pieces et accessoires</option>
    </select>
  </div><!-- fin div formliste -->
 
  <div class="texteform" id"texteliste">
	<label><span class="Style1">Département :</span></label>
  </div>
-
  <div id="region">
	<select name="dept" id="dept">
		<option style="background-color:#f66d0f;" value="0">Choisir</option>
    	<option style="background-color:#00CC33;" <?php if ($dept == "01-Ain") { echo "selected='selected'"; } ?>value="01-Ain">01-Ain</option>
    	<option style="background-color:#00CC33;" <?php if ($dept == "974-La Réunion") { echo "selected='selected'"; } ?>value="974-La Réunion">974-La Réunion</option>
      </select>
	</div><!-- fin de div region -->
	<div id="cadrecache">
	<div id="form1">
 		<div style="visibility:hidden" id="marqueVehVisi" >
 			<div class="texteform Style1" id="titremarque">Marque :</div>
 			<input type="text" size="35" maxlength="35" style="background-color:#2dbd06;" name="marqueVeh" id="marqueVeh"/>
  		</div>
  		<div style="visibility:hidden" id="modeleVehVisi" style="display:none;">
  			<div class="texteform Style1" id="titremodele">modele :</div>
    		<input type="text" id="modeleveh" name="modeleVeh" size="35" maxlength="35"  style="background-color:#2dbd06;"/>
  		</div>
 	</div>
 
 
   <div id="form1"> 
		<div style="visibility:hidden" id="marqueVoitureVisi" >
			<div class="texteform Style1" id="marquetitre">Marque</div>
				<select name="marque" id="marque"  onChange="requeteModele(this.form)" style="background-color:#2dbd06;">
 
<?php
 
 
include "acs.php";
 
$conn = mysql_connect(HOST,USER,PASS)  or die("Impossible de se connecter");
 
mysql_select_db(DB) or die("Selection de base impossible");
 
 
$req = "SELECT * FROM `marque` WHERE idT =1 ORDER BY `marque`"; 
$res=mysql_query($req) or die("Erreur requete : ".mysql_error());
 
 
 
	echo "<option style='background-color:#f66d0f;' selected value='choisir'>choisir</option>";	
		while ($marque = mysql_fetch_array($res) )
		{
		echo "<option style='background-color:#00CC33;' value=".$marque['idM'].">".$marque['marque']."</option>";
		}
 
 
 
 
 
?>
		</select>
	 </div>
	  <div style="visibility:hidden" id="modeleVoitureVisi"> 
		<div class="texteform Style1" id="modeletitre">Modèle</div>
			<select name="modele" id="modele" style="background-color:#2dbd06;" >
			</select>
	 </div>
   </div>
 <div id="form1">
 	<div style="visibility:hidden" id="typeBoiteVisi" >
	<div class="texteform Style1" id="typeboite">Type de boite :
		<select name="typeboite" style="background-color:#2dbd06;" id="typeboite" >
				<option value="Choisir" style="background-color:#f66d0f;">Choisir</option>
				<option value="1" style="background-color:#00CC33;">automatique 5</option>
		</select></div>
	</div>
  	<div style="visibility:hidden" id="kilometreVisi" >
 		<div id="titrekilometre" class="texteform Style1" >Kilometre :</div>
 	<div id="formkilometre"><input type="text" name="km" size="10" style="background-color:#2dbd06;"  id="km"/></div>
  </div>
  <div style="visibility:hidden" id="cylindreVisi">
  	<div class="texteform Style1" id="titrecylindre">cylindre</div>
    <div id="cylindre"><input type="text" id="cylindre" name="cylindre" size="10" maxlength="50" value="" style="background-color:#2dbd06;"/></div>
  </div>
 </div><!-- fin div form1 -->
 
	<div style="visibility:hidden" id="anneeVisi">
 		<div id="titreannee" class="texteform Style1" >année :</div>
 		<div id="formannee">
			<select name="annee" id="annee">
				<option value="Choisir" style="background-color:#f66d0f;">Choisir</option>
				<option value="2009" style="background-color:#00CC33;">2009</option>
				<option value="2008" style="background-color:#00CC33;">2008</option>
				<option value="2007" style="background-color:#00CC33;">2007</option>
				<option value="2006" style="background-color:#00CC33;">2006</option>
				<option value="2005" style="background-color:#00CC33;">2005</option>
				<option value="2004" style="background-color:#00CC33;">2004</option>
				<option value="2003" style="background-color:#00CC33;">2003</option>
				<option value="2002" style="background-color:#00CC33;">2002</option>
				<option value="2001" style="background-color:#00CC33;">2001</option>
				<option value="2000" style="background-color:#00CC33;">2000</option>
				<option value="1999" style="background-color:#00CC33;">1999</option>
				<option value="1998" style="background-color:#00CC33;">1998</option>
				<option value="1997" style="background-color:#00CC33;">1997</option>
				<option value="1996" style="background-color:#00CC33;">1996</option>
				<option value="1995" style="background-color:#00CC33;">1995</option>
				<option value="1994" style="background-color:#00CC33;">1994</option>
				<option value="1993" style="background-color:#00CC33;">1993</option>
				<option value="1992" style="background-color:#00CC33;">1992</option>
				<option value="1991" style="background-color:#00CC33;">1991</option>
				<option value="1990" style="background-color:#00CC33;">1990</option>
				<option value="1989" style="background-color:#00CC33;">1989</option>
				<option value="1988" style="background-color:#00CC33;">1988</option>
				<option value="1987" style="background-color:#00CC33;">1987</option>
				<option value="1986" style="background-color:#00CC33;">1986</option>
				<option value="1985" style="background-color:#00CC33;">1985</option>
				<option value="1984" style="background-color:#00CC33;">1984</option>
				<option value="1983" style="background-color:#00CC33;">1983</option>
				<option value="1982" style="background-color:#00CC33;">1982</option>
				<option value="1981" style="background-color:#00CC33;">1981</option>
				<option value="1980" style="background-color:#00CC33;">1980</option>
				<option value="1979" style="background-color:#00CC33;">1979</option>
				<option value="1978" style="background-color:#00CC33;">1978</option>
				<option value="1977" style="background-color:#00CC33;">1977</option>
				<option value="1976" style="background-color:#00CC33;">1976</option>
				<option value="1975" style="background-color:#00CC33;">1975 ou avant</option>
			</select>
		</div>
	  </div>
	  <div style="visibility:hidden" id="energieVisi">
		<div id="titreenergie" class="texteform Style1">Energie</div>
		<div id="formenergie">
			<select name="energie" id="energie">
				<option value="Choisir" style="background-color:#f66d0f;">Choisir</option>
			</select>
		</div><!-- fin div energie -->
	  </div>
 
 
	  <div style="visibility:hidden" id="typeVehVisi">
		<div id="titretype" class="texteform Style1" style="display: none;">Type :</div>
		<div id="typeVeh">
			<select name="typeVeh" id="typeVeh" onChange="affiche1(this.form)">
			</select>
		</div><!-- fin div energie -->
	  </div>
  </div><!-- fin div cadrecache -->
 
   <div id="form1"> 
		<div class="texteform Style1" id="pseudo" >Pseudo</div>
 
    <input type="text" id="nom" name="nom" size="35" maxlength="50" value="<?php if(!empty($nom))echo $nom;  ?>" style="background-color:#2dbd06;"/>
	</div><div id="form1">
		<div class="texteform Style1" >ville</div>
 
    <input type="text" id="ville" name="ville" size="35" maxlength="50" value="<?php if(!empty($ville))echo $ville;  ?>" style="background-color:#2dbd06;"/>
 
		<div class="texteform Style1" >code postal</div>
 
    <input type="text" id="cp" name="cp" size="35" maxlength="50" value="<?php if(!empty($cp))echo $cp;  ?>" style="background-color:#2dbd06;"/>
 
   </div><!-- fin div form1 -->
 
  <div class="texteform" id="phone">
    <label><span class="Style1">T&eacute;l&eacute;phone:</span></label>
  </div>  
 
 
<div id="form3">
    <input type="text" id="phone" name="tel" size="17" style="background-color:#00CC33;" maxlength="10" value="<?php if(!empty($tel))echo $tel;  ?>" />
    <label for="phone_hidden"><span class="Style1">Facultatif</span></label>
    <span class="Style6"><br />
	<span class="Style1">exemple: 0123456789</span></span><br />
    </div>
<!-- fin div form3 -->
 
 
<br />
 
 
 
<div class="texteform">
    <label><span class="Style1">Titre de l'annonce:</span></label>
  </div>
 
 
  <div id="form4">
    <input type="text" style="background-color:#00CC33;" id="subject" name="titre_annonce" size="50" maxlength="50" value="" />
 
 
 
    </div>
    <span class="Style1">test</span></br>
	<span class="Style1">test</span>
    <div id="company_title_tips" class="warning" style="display: none;">
    <span class="Style1">test</span>  
    </div>
 
 
 
<div class="texteform" style="clear:left;">
    <label><span class="Style1">Texte de l'annonce:</span></label>
  </div>
 
 
  <div id="form5">
    <div id="category_tips" class="warning">
 
 
 
    </div><!-- fin div form-->
 
 
    <textarea name="texte_annonce" cols="50" rows="10" name="body" id="body" style="background-color:#00CC33;" ></textarea>
 <br />
     <span class="Style1">Indiquez dans l'annonce si vous d&eacute;sirez &ecirc;tre contact&eacute;(e) uniquement par t&eacute;l&eacute;phone.</span>
    <div id="price_box" style="display: block;">
      <br />
 
 
	  <div class="texteform Style1" id="prix" style="display: block;">
		Prix	  </div>
 
 
	  <div class="adinput" id="dprice" style="display: block;">
	    <input type="text" name="prix" size="10" maxlength="8" style="background-color:#00CC33;" value="" id="prix" /> 
	    <span class="Style1">&euro; </span>
	    <div id="err_price" style="display: none;">
	      <span class="warning" id="err_msg_price"></span>
	    </div>
    </div>
  </div>
  <br />
  <div id="validerVisi">
    <input type="submit" name="validate" value="Valider" />
  </div>
 
</div>
 
 
</form>
 
 
</div><!-- fin de div lowerright -->
</div><!-- fin de div lowerleft -->
</div><!-- fin de div upperright -->
</div> <!-- fin de div upperleft -->
</div><!-- fin div mon cadre -->
 
 
 
</div><!-- fin div container -->

**tzilliox** · 06/10/2009, 15h28

Re El Locos !

Je suis désolé mais je ne vais pas pouvoir t'aider. Car je ne vais pas faire tout le boulot pour toi !

1. Il existe un bouton en haut de l'éditeur de texte pour déclarer un portion de code. Ce qui permet de garder la mise en forme, mais également de limiter la hauteur du code. C'est pour que ta demande soit lisible ! Donc pour que les gens la lise, donc pour que les gens te réponde. C'est donc pour toi que je te dis ça.

2. Ici on fait du CSS, un langage qui est interprété côté client. Donc le PHP c'est bien, mais c'est de l'autre côté, côté serveur. Il ne faut donc pas tout mélanger et ne pas poster de PHP ici stp. Pour faire simple tu peux générer ta page PHP et afficher le code source (Ctrl+U sous Firefox).

Thomas.

**El Locos** · 06/10/2009, 15h35

Re

Je ne cherche pas à ce que quelqu'un fasse le boulot à ma place, justement je cherche à comprendre!

J'ai utilisé le"[code]" comme tu me l'as demandé.

Je cherche des conseils rien de plus..Tu me demandes de voir ma page je te la montre....
Ca ne sert à rien de linké la page du css puisque pour le moment elle ne contient rien d'intéressant en rapport avec mon problème de balise caché.

**tzilliox** · 06/10/2009, 16h10

Re El Locos !

C'est quand même bien le bordel dans ton code ! Par exemple, tu n'as même pas remarqué qu'il te manquait la balise ouvrante <head>.
Donc, s'il te plaît, pour toi (pour que tu puisse te relire dans quelques semaines) et pour les autres, je te conseille d'indenter ton code.

Chez moi ça marche, si au lieu d'écrire ces lignes :

Code :

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

1
2
3
 
	document.getElementById(id).style.visibility= 'visible'; /* show */
	document.getElementById(id).style.visibility= 'hidden'; /* hide */

tu écris ces lignes-là :

Code :

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

1
2
3
 
	document.getElementById(id).style.display= ''; /* show */
	document.getElementById(id).style.display= 'none'; /* hide */

Bon courage,
Thomas.

Position d'éléments en CSS

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager