Aligner un tableau et un formulaire

**Latimer** · 19/05/2015, 10h55

Bonjour à tous!!

Voila je développe un site intranet et j'aurai besoin de votre aide. J'ai un tableau de fournisseur avec ces contacts dans ce tableau lorsque je clique sur certains icone j'affiche des formulaires de modification. Mon problème est que quand je clique sur ces icônes mon formulaire ne s'affiche pas à coté mais au dessus de mon tableau (voir image ci dessous). Je voudrai que mon tableau sois à gauche et mon formulaire à droite.

voici le code de la page principal:

Code php :

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
<?php
session_start();
include("../../connexion.php");
include("../../require/fonction_quote.php"); // Import de la fonction repquote()
include("req_fournisseur.php");
 
 
if(empty($_SESSION) || empty($_SESSION['ID_PERSONNE'])) { // sécurité
	header('Location:../../index.php');
}
 
$requete = "SELECT LABEL_SOUS_MENU FROM POP_SOUS_MENU WHERE ID_SOUS_MENU = 29";
$statement = oci_parse($conn, $requete);
oci_execute($statement,OCI_COMMIT_ON_SUCCESS);
$result = oci_fetch_assoc($statement);
$_SESSION['titre_page'] = $result['LABEL_SOUS_MENU'];
 
$requete1 = "SELECT ID_FOURNISSEUR,NOM_FOURNISSEUR,ADR_FOURNISSEUR,ACTIF_FOURNISSEUR,TYPE_ACTIVITE FROM POP_FOURNISSEUR 
ORDER BY NOM_FOURNISSEUR ASC";
$statement1 = oci_parse($conn, $requete1);
oci_execute($statement1,OCI_COMMIT_ON_SUCCESS);
?>
<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Protos</title>
		<link href="../../css/page.css" rel="stylesheet" type="text/css" />
		<link href="../../css/couleur.css" rel="stylesheet" type="text/css" />
		<link href="../../css/tableau.css" rel="stylesheet" type="text/css" />
		<link href="../../css/formulaire.css" rel="stylesheet" type="text/css" />
		<link href="css/fournisseur.css" rel="stylesheet" type="text/css" />
		<script src="ajax/fournisseur.js"></script>
	</head>
	<body class="couleur3">
		<div id="entete" class="couleur1"><?php
			include("../../include/entete.php");?>
		</div>
		<br clear="all" />
		<div id="corps">
			<div class="couleur4" style="float:left;margin:5px auto 10px auto;width: 98%;border-radius: 4px;font-family: Segoe UI;font-size: 11pt;color: black;padding:1%;">
 
				<div class="bordure_gauche">
					<label class="label_3" for="nom_fournisseur">Nom fournisseur</label><br clear="all" />
					<input id="nom_fournisseur" type="text" name="nom_fournisseur">
				</div>
				<div class="bordure_gauche">
					<button style="float:left;margin:0px 10px 10px 10px;width:150px;" class="bouton_2 couleur16" onclick="AffFournisseur(1,site.value,nom_fournisseur.value,num_fournisseur_f.value);Invisible('div_formulaire2');">Rechercher</button>
					<br class="br" />
					<button style="float:left;margin:0px 10px 0px 10px;width:150px;" class="bouton_2 couleur16" onclick="AffFournisseur(1,0,0,0);Invisible('div_formulaire2');">Par défaut</button>
				</div>
			</div>
			<div id="div_formulaire2" style="float:left;width:100%;border-radius:4px;"></div>
			<div id="div_formulaire" style="float:right;margin-top:8px;"></div>
			<div id="div_fournisseur" style="float:left;"></div>
 
		</div>
		<script type='text/javascript'>AffFournisseur(0,0,0,0);</script>
	</body>
	<footer >
	</footer>
</html>

le code de mon tableau:

Code php :

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
<?php 
include("../../../connexion.php");
session_start();
if(empty($_SESSION) || empty($_SESSION['ID_PERSONNE'])) { // sécurité
	header('Location:../../index.php');
}
 
if(!isset($_SESSION['TAB_FOURNISSEUR']) || $_GET['init'] == 1){
	$tableau = array($_GET['nom_fournisseur']);
	$_SESSION['TAB_FOURNISSEUR'] = $tableau;
}
 
$requete2 = "SELECT ID_FOURNISSEUR,NOM_FOURNISSEUR,ADR_FOURNISSEUR,ACTIF_FOURNISSEUR,TYPE_ACTIVITE FROM POP_FOURNISSEUR 
WHERE 1=1"; 	
																					//requête de recherche fournisseur
if($_SESSION['TAB_FOURNISSEUR'][0] != null && $_SESSION['TAB_FOURNISSEUR'][0] != '0')
	$requete2 .= " AND NOM_FOURNISSEUR = '".$_SESSION['TAB_FOURNISSEUR'][0]."'";
$requete2 .= "ORDER BY NOM_FOURNISSEUR ASC";
$statement2 = oci_parse($conn, $requete2); 
oci_execute($statement2,OCI_COMMIT_ON_SUCCESS); 
 
 
?>
 
<div id="affiche_fournisseur" style="float:left;width:70%;margin: 8px 5px 5px 0px;border-radius: 4px;padding: 5px;" class="couleur2">
	<form id="form_fournisseur" method='post' onsubmit='' action="#" >
		<table class="table" width=10%>
			<tr class="couleur5">
				<th class="th actif" rowspan="2">Actif</th>
				<th class="th fournisseur" rowspan="2">Fournisseur</th>
				<th class="th adresse" rowspan="2" >Adresse</th>
				<th class="th type_activite" rowspan="2">Type d'activite</th>
				<th class="th action" rowspan="2">Action Fournisseur</th>
				<th class="th contact"  colspan="5" >Contact</th>
 
			</tr>
			<tr class="couleur5">
				<th class="th" >Nom du contact</th>
				<th class="th">Adresse email</th>
				<th class="th">Telephone Fixe</th>
				<th class="th">Telephone Portable</th>
				<th class="th">Action contact</th>
			</tr>
			<?php
			$flag_couleur1 = 0;
			$flag_couleur2 = 0;
			while($result1 = oci_fetch_assoc($statement2)) {
 
			$requete22 = "SELECT COUNT(*) as NB
			FROM POP_CONTACT_FOURNISSEUR
			WHERE ID_FOURNISSEUR =".$result1['ID_FOURNISSEUR'];
 
			$statement22 = oci_parse($conn, $requete22); 
			oci_execute($statement22,OCI_COMMIT_ON_SUCCESS);
			$result22 = oci_fetch_assoc($statement22);
 
 
 
			?>
				<tr <?php if($flag_couleur1%2 == 0){echo "class='couleur6'";}else{echo "class='couleur7'";}?>>
					<?php
					if($result1['ACTIF_FOURNISSEUR'] == 1){
					?>
						<td class='td' ROWSPAN=<?php echo $result22['NB'];?>><img src='../../icone/G_visible.png' alt='' /></td>
					<?php
						}
					else{
					?>
						<td class='td' ROWSPAN=<?php echo $result22['NB'];?>><img src='../../icone/G_invisible.png' alt='' /></td>
					<?php
					}
					?>
					<td class='td' ROWSPAN=<?php echo $result22['NB'];?>><?php echo $result1['NOM_FOURNISSEUR'];?></td>
					<td class='td' ROWSPAN=<?php echo $result22['NB'];?>><?php echo $result1['ADR_FOURNISSEUR'];?></td>
					<td class='td' ROWSPAN=<?php echo $result22['NB'];?>><?php echo $result1['TYPE_ACTIVITE'];?></td>
					<td class='td' ROWSPAN=<?php echo $result22['NB'];?>>								
						<img onclick='ModFournisseur(<?php echo $result1['ID_FOURNISSEUR'];?>);' style='cursor:pointer;' src='../../icone/N_mod_ligne.png' alt='' />
						<img style='cursor:pointer;' onclick='SupFournisseur(<?php echo $result1['ID_FOURNISSEUR'];?>);' src='../../icone/N_sup_ligne.png' alt='' />
						<img onclick='AjtContactFournisseur(<?php echo $result1['ID_FOURNISSEUR'];?>);' style='cursor:pointer;' src='../../icone/N_ajt_adr.png' alt='' />
					</td>
 
 
						<?php
 
							$requete3 = "SELECT ID_CONTACT_FOURNISSEUR,NOM_CONTACT,ADR_EMAIL,TEL_FIXE,TEL_PORTABLE
										FROM POP_CONTACT_FOURNISSEUR 
										WHERE ID_FOURNISSEUR =".$result1['ID_FOURNISSEUR'];
 
							$statement3 = oci_parse($conn, $requete3); 
							oci_execute($statement3,OCI_COMMIT_ON_SUCCESS);
 
							$cpt=0;
							while ($result3 = oci_fetch_assoc($statement3)) { 
							if($cpt != 0) //Si cpt != 0 on tombe sur les lignes sauf la première donc on crée une ligne vide
								{
								?>
								<tr>
 
 
 
							<?php
								}?>
 
									<td class="td"><?php echo $result3['NOM_CONTACT']; ?></td>
									<td class="td"><?php echo $result3['ADR_EMAIL']; ?></td>
									<td class="td"><?php echo $result3['TEL_FIXE']; ?>	</td>
									<td class="td"><?php echo $result3['TEL_PORTABLE']; ?></td>
									<td class="td">
										<img onclick="ModContactFournisseur('<?php echo $_SESSION['ID_FOURNISSEUR']; ?>','<?php echo $result3['ID_CONTACT_FOURNISSEUR'];?>');Visible('div_formulaire');" src='../../icone/N_mod_adr.png' style="cursor:pointer;" alt='' />
										<br class="br" />
										<img onclick="SuppContactFournisseur('<?php echo $_SESSION['ID_FOURNISSEUR']; ?>','<?php echo $result3['ID_CONTACT_FOURNISSEUR'];?>');Visible('div_formulaire');" src='../../icone/N_sup_adr.png' style="cursor:pointer;margin-top:10px;" alt='' />							
									</td>
 
						<?php $flag_couleur2++; $cpt++;
				} ?>
 
 
 
				</tr><?php
 
				$flag_couleur1++;
			}
			?>
			<tr class="couleur5">
				<td class='td'></td>
				<td class='td'>
					<input id="ajt_fournisseur" name="ajt_fournisseur" type="text" style="width:98%;" required />
				</td>
				<td class="td">
					<input id="adresse" name="adresse" type="text" style="width:100px;" required />
				</td>
				<td class="td">
					<input id="type_activite" name="type_activite" type="text" style="width:100px;" required />
				</td>
 
 
				<td class='td' colspan="2">
					<input border=0 src='../../icone/N_ajt_ligne.png' type=image value=submit>
				</td>
			</tr>
		</table>
	</form>
</div>

le code css de la page:

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
#form_modifier {
padding:5px;
background-color:#CCCCCC;
border: 1px solid #888888;
font-family:Segoe UI;
font-size:11pt;
color:black;
float:right;
}
 
#form_supprimer {
padding:5px;
background-color:#CCCCCC;
border: 1px solid #888888;
font-family:Segoe UI;
font-size:11pt;
color:black;
float:right;
}
 
.actif {
text-align:center;
}
 
.site {
text-align:center;
}
 
.fournisseur {
text-align:center;
}
 
.oi {
text-align:center;
}
 
.action {
text-align:center;
}
 
.bordure_gauche {
float:left;
margin-left:3%;
padding:0px 0px 5px 3%;
border-left:1px dashed #848484;
}

Et le code d'un des formulaires:

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
<?php
include("../../../connexion.php");
session_start();
 
$_SESSION['ID_FOURNISSEUR'] = $_GET['id_fournisseur'];
 
$requete1 = "SELECT NOM_FOURNISSEUR FROM POP_FOURNISSEUR WHERE ID_FOURNISSEUR = ".$_SESSION['ID_FOURNISSEUR'];
$statement1 = oci_parse($conn, $requete1); 
oci_execute($statement1,OCI_COMMIT_ON_SUCCESS);
$fournisseur = oci_fetch_assoc($statement1);
?>
<div style="float:right;width:auto;border-radius:4px;" class="couleur2">
	<form style="padding:5px;font-family:Segoe UI;font-size:11pt;color:black;" method="post">
		<fieldset class="fs couleur4" >	
			<legend class="fs_legende">Ajout d'un contact pour <br class="br" /><?php echo $fournisseur['NOM_FOURNISSEUR']; ?></legend>
 
			<div style="float:left;margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed #848484;">
				<label style="label"><b>Contact</b></label>
				<br class="br"><br>
				<label for="nom_contact" style="float:left;width:60px;padding:4px 0px;">Nom contact</label>
				<input type="text" id="nom_contact" class="input" style="width:210px;" name="nom_contact" cols="36" rows="5"></input>
				<br class="br" />
				<label for="adr_email" style="float:left;width:60px;padding:4px 0px;">Adresse email</label>
				<input type="text" id="adr_email" class="input" style="width:210px;" name="adr_email" cols="36" rows="5"></input>
				<br class="br" />
				<label for="tel_fixe" style="float:left;width:60px;padding:4px 0px;">Tel Fixe</label>
				<input type="text" id="tel_fixe" class="input" style="width:210px;" name="tel_fixe" cols="36" rows="5"></input>
				<br class="br" />
				<label for="tel_portable" style="float:left;width:60px;padding:4px 0px;">Tel Portable</label>
				<input type="text" id="tel_portable" class="input" style="width:210px;" name="tel_portable" cols="36" rows="5"></input>
 
			</div>
			<br class="br" />	
 
			<button name="ajt_contact" type="submit" class="bouton_1 couleur16" style="float: left;margin-top:10px;width:100%;padding: 5px 14px;">Ajouter</button>
			<button type='button' onclick="Retour_fournisseur();" class="bouton_1 couleur16" style="float: left;margin-top:10px;width:100%;padding: 5px 14px;">Retour</button>
		</fieldset>
	</form>
</div>

Edit : J'ai enfin trouvé la solution!!! Dans ma page principal j'ai redéfini les propriétés de mes block:

Code html :

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

1
2
3
<div id="div_formulaire2" style=" display: inline;width:70%;border-radius:4px;"></div>
			<div id="div_formulaire" style=" display: inline;margin-top:8px; width:101%"></div>
			<div id="div_fournisseur" style=" display: inline;"></div>

Aligner un tableau et un formulaire

Positionnement en CSS

Mode arborescent

Discussions similaires

Partager

Partager