affichage d'un tableau sur 2 colonne

**kate59** · 20/09/2008, 21h45

bonjour,
voila je doit créer un site de petite annonce, j'ai donc créer ma base et mit les categorie(auto,loisir...).
Je dois afficher toute les categorie sur une page pour que le client puisse choisir dans la catgeorie si il veut deposer une annonce ou consulter les annonces de cette categorie. de plus chaque categorie doit posseder un image a coté de son nom et et doit etre dans tableau arrondi.ce que j'ai fait le probleme est que il faut aussi que les categorie n 'apparaisen sur une colonne mais 2 colonne. voici ce que j ai fait donc actuellement.

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
		$liste_categorie = mysql_query('SELECT * FROM categorie_annonce');
 
		while( $categorie = mysql_fetch_assoc($liste_categorie) )
		{
 
		$body.='
			<div class="listecategorie">
 
			<div class="upperright">
			<div class="lowerleft">
			<div class="lowerright">
			<div class="listecategorieNom">';
 
 
				// strtolower($variable) = renvoi le contenu de "variable" en minuscule
				$body.='<a href="index.php?categorie='.strtolower($categorie['libelle-categorie']).'">'.$categorie['libelle-categorie'].'</a>
		</div>
		<table class="listeTableau">
 
 
				<div class="DonneSource">		
 
 
					<td><div class="listecategorieImage"><img src="images/categorie/'.strtolower($categorie['libelle-categorie']).'.gif"></div></td>
 
 
				</div>		
 
 
 
 
								<td><b><p>Passez une annonce</p> </b><b><p>Consulter une annonce</b></p>
													</td>
 
			</table>
 
		</div>
	</div>
</div>
</div>
';

et pour le css:

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
.listecategorie
{
 
	width: 380px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	background-color: #B6FF00;
}
 
.listecategorieNom
{
	border-bottom: 1px solid Black;
	text-align: left;	
	text-indent: 10px;
		background-color: GREEN;
}
 
.listecategorieNom a
{
	color: Black;
	font-size: 18px;
	font-family: cursive;
	font-weight: bold;
}
 
.listecategorieNom a:hover
{
	color: red;
	font-size: 18px;
	font-family: cursive;
	font-weight: bold;
}
 
.listecategorieImage
{
	margin: 6px;
	width: 130px;
	padding: 5px;
}
 
.listecategorieDonnees
{
 
	text-align: left;
	font-family: cursive;
	font-size: 15px;
}
 
.listecategorieDonneesSource 
{	
	float: right;
	margin-top: 40px;
	margin-right: 36px;
}
h1
{
 color: purple;
   font-family: serif, "monotype corsiva", "Times New Roman", Times, arial;
   text-align: center;
  }
  td /* Toutes les cellules des tableaux... */
{
 
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
 
} 
 
 
h2
{
COLOR: red;
font-family: serif, "Arial Black", "Times New Roman", Times, arial;
   text-align: center;
   font-size: 16px;
   }
   table
   {
   background-color: #B6FF00;
   }
.upperright{
	background-image : url('images/hautdroit.gif');
	background-repeat : no-repeat;
	background-position : top right;
}
 
.lowerleft{
	background-image : url('images/basgauche.gif');
	background-repeat : no-repeat;
	background-position : bottom left;
}
 
.lowerright{
	background-image : url('images/basdroit.gif');
	background-repeat : no-repeat;
	background-position : bottom right;
	padding : 3% 3% 3% 3%;
}

quelqu'un peut il m'aider:
voici une capture d'ecran cela vous aidera peut etre a mieux comprendre.
merci de votre futur aide.

**htr999** · 21/09/2008, 00h33

il faudrait diviser la largeur de l'affichage en 2 et d'appliquer à ta ".listecategorie"

Code :

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

float: left

comme cela, t'auras 2 catégories sur une ligne et ça passera automatiquement à la ligne pour la catégorie suivante.

pour régler un bug d'affichage éventuel sur IE, il faudrait faire un compteur sur modulo 2 et d'ajouter un '<br />' quand il faudra aller à la ligne.

a+

**kate59** · 21/09/2008, 19h29

merci beaucoup de ton aide cela fonctionne maintenant la liste est sur 2 cases mais les catégorie sont collé l une a l autre j ai essayer de décoller avec un padding mais ca ne fonctionne pas.voila le résultat.

**htr999** · 21/09/2008, 22h38

essaie plutôt avec un

Code :

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

margin-right: 10px;

a+

**kate59** · 22/09/2008, 12h55

rebonjour,
merci pour tout tes conseils malheureusement apres avoir modifier la structure du site avec div head puis div conteneur puis div body et enfin div footer le float que j ai mit fait remonter mon pied de page en haut et donc la liste se retrouve dans le vide voici l'exemple:page de structure de chaque page que j appelle a toute les pages:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
 
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="<?php echo $description; ?>" />
		<meta name="keywords" content="<?php echo $keywords; ?>" />
		<meta name="subject" content="<?php echo $subject; ?>" />
		<meta name="author" content="" />
		<meta name="revisit-after" content="10 days" />
		<meta name="robots" content="index, follow" />
		<meta name="sitename" content="idealparutions.fr" />
			<link rel="shortcut icon" href="gifs/icone.ico" />  
			<link href="<?php echo $host; ?>../style.css" type="text/css" rel="stylesheet" />
 
		<?php if(isset($js)) { echo $js; } ?>
 
		<title>Ideale Parution: <?php echo $title; ?></title>
	</head>
	<body>
<?php if(isset($fakea)) { echo "\t\t<div id=\"fake\">\n\t\t\t<p>".$fakea."</p>\n\t\t</div>\n"; } ?>
		<div id="conteneur">
			<h1 id="header">
			</h1>
 
 
			<?php if($menu) { include("menu.php"); } ?>
 
 
			<div id="contenu">
				<?php echo $body; ?>
			</div>
		<div id="footer">
			<p>site réalisée par Gaborit Elodie</p>
				</p>
			</div>
	</div>
	</body>
</html>

cette page s'appele base.php
enfin ma page d'index:

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
<?php
include("include/session.php");
 
 
 
		$description = "";
		$keywords = "";
		$subject = "";
		$title = "";
		$fakea = "";
		$menu = false;
 
		$body = '';
 
 
 
 
 
		$liste_categorie = mysql_query('SELECT * FROM categorie_annonce');
 
		while( $categorie = mysql_fetch_assoc($liste_categorie) )
		{
 
		$body.='
			<div class="listecategorie">
 
			<div class="upperright">
			<div class="lowerleft">
			<div class="lowerright">
			<div class="listecategorieNom">';
 
 
				// strtolower($variable) = renvoi le contenu de "variable" en minuscule
				$body.='<a href="index.php?categorie='.strtolower($categorie['libelle-categorie']).'">'.$categorie['libelle-categorie'].'</a>
		</div>
		<table class="listeTableau">
 
 
				<div class="DonneSource">		
 
 
					<td><div class="listecategorieImage"><img src="images/categorie/'.strtolower($categorie['libelle-categorie']).'.gif"></div></td>
 
 
				</div>		
 
 
 
 
								<td><b><p>Passez une annonce</p> </b><b><p>Consulter une annonce</b></p>
													</td>
 
			</table>
 
		</div>
	</div>
</div>
</div>
 
 
 
 
 
		}
 
';
 
 
include("include/base.php");
?>

et ensuite ma page css:

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
 
body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "helvetica", sans-serif ;
	background : #606060;
	cursor:url(gifs/curseur1.cur);
 
}
 
div#conteneur
{
	width: 900px ;
	margin: 0 auto ;
	text-align: left ;
	border: 5px solid black ;
	background: #7FC9FF ;
}
 
h1#header
{border: 1px solid black ;
	height: 200px ;
	background: url(images/banniere.png) no-repeat left top ;
	margin: 0 ;
 
}
 
h1#header a
{
	width:170px ;
	height: 100px ;
	display: block ;
	background: url(images/title.gif) no-repeat ;
	position: relative ;
	left: 450px ;
	top: 1px ;
	text-indent: -5000px ;
}/* On donne les mêmes dimensions au lien, chose
 possible grâce à la propriété display: block ; qui transforme le lien
  en élément de type block, auquel on peut donner des propriétés de taille.
   On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
/* Le text-indent négatif est fait pour pouvoir ne
 cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
  exploitable pour les syntèses vocales */
 
 
ul#menu
{
	height: 60px ;
	margin: 0 ;
	padding: 0 ;
	background: url(images/bg_menu.jpg) repeat-x 0 -25px ;
	list-style-type: none ;
}
/* On donne une hauteur au menu, correspondant a
 la taille de l'image utilisée en fond, on met ensuite l'image de fond
  avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
ul#menu li
{
	float: left ;
	text-align: center ;
}/* On rend les li en flottant pour pouvoir les
 afficher horizontalement, on cache les puces, et on centre le texte */
 
ul#menu li a
{
	width: 130px ;
	line-height: 25px ;
	font-size: 1.2em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	border-right: 2px solid #dea ;
}/* C'est sur les liens que le gros du travail est
 effectué, largeur, hauteur de ligne, taille de police, graisse de police,
  espacement des lettres, couleur, bordure et decoration du texte. 
  Nous pouvons dimensionner les a grâce à la propriété display: block ; */
 
ul#menu li a:hover
{
	background: url(images/bg_menu3.jpg) repeat-x 0 0 ;
}/* Et pour finir on décale l'image de fond au passage
 de la souris pour laisser aparaître l'état survolé de l'image, 
 voir le tutoriel sur les roll over pour plus de détails */
 
div#contenu
{
	padding: 0 25px 0 100px ;
	background: url(bg_page.gif) no-repeat 30px 30px ;
}
 
div#contenu h2
{
	padding-left: 2px ;
	line-height: 55px ;
	font-size: 1.4em ;
	background: url(images/personnage.gif) no-repeat left bottom ;
	color: red ;
	border-bottom: 1px solid red;
}
 
div#contenu h3
{
 
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #9b2 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;
}
 
div#contenu p
{border: 2px solid black ;
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}
div#gifs p
{
	float:center ;
}
 
 
div#contenu a
{
	color: #8a0 ;
}
 
div#contenu a:hover
{
	color: #9b2 ;
}
 
 
 
#footer
{
	height: 44px;
	background: blue;
	text-align: center;
	padding-left: 50px;
 
}
pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}
 
 
pre span
{
	color: #560 ;
}
 
pre span.comment
{
	color: #b30000 ;
}
 
 
.listecategorie
{
 
	width: 380px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	background-color: #B6FF00;
}
 
.listecategorieNom
{
	border-bottom: 1px solid Black;
	text-align: left;	
	text-indent: 10px;
		background-color: GREEN;
}
 
.listecategorieNom a
{
	color: Black;
	font-size: 18px;
	font-family: cursive;
	font-weight: bold;
}
 
.listecategorieNom a:hover
{
	color: red;
	font-size: 18px;
	font-family: cursive;
	font-weight: bold;
}
 
.listecategorieImage
{
	margin: 6px;
	width: 130px;
	padding: 5px;
}
 
.listecategorieDonnees
{
 
	text-align: left;
	font-family: cursive;
	font-size: 15px;
}
 
.listecategorieDonneesSource 
{	
	float: right;
	margin-top: 40px;
	margin-right: 36px;
}
h1
{
 color: purple;
   font-family: serif, "monotype corsiva", "Times New Roman", Times, arial;
   text-align: center;
  }
  td /* Toutes les cellules des tableaux... */
{
 
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
 
} 
 
 
h2
{
COLOR: red;
font-family: serif, "Arial Black", "Times New Roman", Times, arial;
   text-align: center;
   font-size: 16px;
   }
   table
   {
   background-color: #B6FF00;
   }
.upperright{
	background-image : url('images/hautdroit.gif');
	background-repeat : no-repeat;
	background-position : top right;
}
 
.lowerleft{
	background-image : url('images/basgauche.gif');
	background-repeat : no-repeat;
	background-position : bottom left;
}
 
.lowerright{
	background-image : url('images/basdroit.gif');
	background-repeat : no-repeat;
	background-position : bottom right;
	padding : 3% 3% 3% 3%;
}

j'ai bon regarder le css je ne comprend pourquoi il remonte mon pied de page car ma structure semble juste voici ce que j obtient en visuel.

**12monkeys** · 22/09/2008, 20h05

Bonjour

Ton code doit être, dans cette section, vierge de tout code généré coté serveur : php notamment, pour mieux comprendre : http://www.developpez.net/forums/a17...isation-forum/

Pour en revenir à ton problème : les éléments en float sortent du flux normal et donc n'influent plus sur la hauteur du conteneur (sauf avec IE ce qui est une mauvaise interprétation du comportement prévu par les spécifications). Pour régler ce problème tu peut utiliser la propriété clear.

Places par exemple une ligne horizontale au bas de tes floats mais à l'intérieur de leur conteneur :

Code :

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

1
2
3
4
5
6
7
<div class="conteneur">
  <p style="float:left;">contenu</p>
  <p style="float:left;">contenu</p>
  <p style="float:left;">contenu</p>
 
  <hr style="clear:both" />
</div>

Le hr est un exemple pour l'explication, il faut ensuite l'adapter au mieux...

**kate59** · 22/09/2008, 21h13

merci pour ton aide j ai bien vu ton idée les categorie se trouve bien a present sur le site et non hors du site mais un pb m'interpelle meme en appliquant
<p style="float:left;"></p> a listecategorie la liste reste sur une colonne alors que je souhaiterai quelle soit sur 2. alors que pour moi le float:left devrai suffire voici donc ce que j'ai modifier merci pour le hr j avais pas penser a ça.

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
$liste_categorie = mysql_query('SELECT * FROM categorie_annonce');
 
		while( $categorie = mysql_fetch_assoc($liste_categorie) )
		{
 
		$body.='<div class="conteneur">
				<p style="float:left;">
  				</p>
				<hr style="clear:both" />
 
 </div>
 
			<div class="listecategorie"><p style="float:right;">
  				</p>					
 
			<div class="upperright">
			<div class="lowerleft">
			<div class="lowerright">
			<div class="listecategorieNom">
 
 ';
 
				// strtolower($variable) = renvoi le contenu de "variable" en minuscule
				$body.='<a href="index.php?categorie='.strtolower($categorie['libelle-categorie']).'">'.$categorie['libelle-categorie'].'</a>
		</div>
		<table class="listeTableaucategorie">
 
 
				<div class="DonneSourcecategorie">		
 
 
					<td><div class="listecategorieImage"><img src="images/categorie/'.strtolower($categorie['libelle-categorie']).'.gif"></div></td>
 
 
				</div>		
 
 
 
 
								<td><b><p>Passez une annonce</p> </b><b><p>Consulter une annonce</b></p>
													</td>
 
 
			</table>
 
		</div>
	</div>
</div>
 
</div>
';
}

merci de ta reponse.

**12monkeys** · 22/09/2008, 23h35

Bis repetita :

Envoyé par 12monkeys

Ton code doit être, dans cette section, vierge de tout code généré coté serveur : php notamment, pour mieux comprendre : http://www.developpez.net/forums/a17...isation-forum/

En guise de rappel : le HTML, le XHTML et le CSS sont des langages de mise en forme du document. Ce ne sont en aucune façon des langages de programmation. Ils sont figés, c'est à dire qu'une fois le document chargé dans le navigateur, ces langages ne répondent à aucune action de l'utilisateur sur le contenu de la page.

Suite à ce rappel, je voudrais porter à votre attention que ces forums ne doivent contenir que le code affiché par le navigateur. En effet, les codes PHP ou tout autre langage dynamique ne servent qu'à générer le corps de votre page et donc votre problème ne pourra être résolu qu'en étudiant le code interprété par le navigateur. De ce fait, avant de poser votre question merci d'épurer votre code de tout langage (serveur ou client).

affichage d'un tableau sur 2 colonne

Tableau en CSS

Discussions similaires

Partager

Partager