Style qui ne s'applique pas sur un l'id d'un formulaire

**alexgille** · 02/07/2010, 09h19

Bonjour à tous!

J'ai un formulaire qui contient lui même 2 autre formulaire invisible que je fais apparaître grâçe à jQuery.

Voici ma feuille de style :

Code :

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

1
2
3
<style type="text/css">
	form { margin: 0; border: 1px black solid; }
</style>

Mon formulaire principal à pour id addProdForm, et les deux sous-formulaires ont pour id addBrandForm et addCatForm.

Déjà là premier problème: le form addBrandForm n'a pas de bordure noire mais l'attribut margin: 0 s'applique quand même dessus alors que le form addCatForm lui prend les deux attributs.

Si j'écris

Code :

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

#addBrandForm { margin: 0; border: 1px black solid; }

le code css ne s'applique pas et mon formulaire retrouve sa marge par défaut.

Par conséquent il est m'est impossible d'atteindre l'élement addBrandForm avec jQuery.

Si quelqu'un à une idée pour m'aider ^^

Merci à tous!

**Bisûnûrs** · 02/07/2010, 09h42

Sans le moindre code HTML il va être difficile de t'aider.
Cependant d'après ta description, j'ai envie de te dire qu'il y a un énorme problème de conception HTML : un formulaire ne peut pas en contenir un autre.

**alexgille** · 02/07/2010, 10h00

J'ai choisi cette option pour me permettre de positionner les deux formulaires à l'endroit où ils doivent apparaître.
Mais je repars sur mon ancien choix: les deux autre formulaires sont à l'extérieur et repositionné après!

Mais comment expliquer le faite que le css s'applique sur un formulaire et pas l'autre..?

Voici le code HTML

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
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.upload-1.0.2.min.js" type="text/javascript"></script>
 
<style type="text/css">
	#addBrandDiv, #addCatDiv { 
		display: none;
		margin: 0;
		border: 1px black solid;
		width: 300px;
		padding: 5px;
		background: #EEE;
		position: absolute;
		z-index: 1000;
		font-family: Verdana, Geneva, sans-serif;
		font-weight: bold;
		font-size: 11px;
	}
	#addBrandForm, #addCatForm { margin: 0; }
	#addBrandActivate, #addCatActivate { margin: 0 2px; position: relative; top: -1px; }
	#selectBrand, #selectCat { float: left; margin: 0; padding: 0; }
</style>
 
<script type="text/javascript">
$(document).ready(function() {
 
	$("#selectBrand").load('donne.php?ajax=brand');
	$("#selectCat").load('donne.php?ajax=cat');
 
	$("#addBrandActivate").click( function () {
			if($("#addBrandDiv").css("display")=="none") { $("#addBrandDiv").fadeIn("slow"); }
			else { $("#addBrandDiv").fadeOut("slow"); }
										});
 
	$("#addCatActivate").click( function () {
			if($("#addCatDiv").css("display")=="none") { $("#addCatDiv").fadeIn("slow"); }
			else { $("#addCatDiv").fadeOut("slow"); }
										});
});
</script>
</head>
<body>
<form id="addProdForm" method="post" action="" enctype="multipart/form-data">
	<table style="border-collapse: collapse" border="1" width="800">
		<tr>
			<td style="width: 300px">Ajouter un produit</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 300px">Nom du produit:</td>
			<td><input name="name" type="text" /></td>
		</tr>
		<tr>
			<td style="width: 300px">Caractéristiques:</td>
			<td><textarea name="car" cols="60" rows="5"></textarea></td>
		</tr>
		<tr>
			<td style="width: 300px">Description de la gamme ou du 
			produit:</td>
			<td><textarea name="des" cols="60" rows="5"></textarea></td>
		</tr>
		<tr>
			<td style="width: 300px">Catégorie:</td>
			<td>
            	<div id="selectBrand">Chargement...</div><input type="button" id="addBrandActivate" value="+" />
                <div id="addBrandDiv">
                	<form id="addBrandForm" enctype="multipart/form-data" method="post">
                    	Nom: <input type="text" name="title" /><br />
                        URL: <input type="text" name="url" /><br />
                        Icone: <input type="file" name="icon" /><br />
                        <input type="submit" value="Ajouter" />
                    </form>
                </div>
			</td>
		</tr>
		<tr>
			<td style="width: 300px">Marque:</td>
			<td>
            	<div id="selectCat">Chargement...</div><input id="addCatActivate" type="button" value="+"/>
                <div id="addCatDiv">
                <form method="post" id="addCatForm" enctype="multipart/form-data">
                            Nom: <input type="text" name="title" /><br />
                            URL: <input type="text" name="url" /><br />
                            Icone: <input type="file" name="icon" /><br />
                            <input type="submit" value="Ajouter" />
                    </form>
                </div>
            </td>
		</tr>
		<tr>
			<td style="width: 300px">Image:</td>
			<td><input type="file" name="upload" size="30"> (stockée dans images/prod)</td>
		</tr>
		<tr>
			<td style="width: 300px">Prix: (avec espace pour séparer les milliers)</td>
			<td><input name="prix" type="text"></td>
		</tr>
		<tr>
			<td style="width: 300px">Promotion: </td>
			<td><input type="checkbox" name="promotion" value="1" /></td>
		</tr>
		<tr>
			<td>Prix promo:</td>
			<td><input type="text" name="prix_promo"></td>
		</tr>
		<tr>
			<td style="width: 300px">&nbsp;</td>
			<td><input name="do" type="submit" value="Envoyer" /></td>
		</tr>
	</table>
</form>
</body>
</html>

Style qui ne s'applique pas sur un l'id d'un formulaire

CSS

Discussions similaires

Partager

Partager