Problème d'affichage de ma pagination (sortir d'une div float)

**shadypierre** · 18/02/2009, 03h39

Bonjour à tous, j'ai un petit problème au niveau de mes div qui rend mon affichage non conforme à mes souhaits, j'ai beau tripatouiller mon code CSS et mes DIV rien n'y fait, je commence par deux petit screen afin que vous puissiez situé le problème :

Affichage des articles avec pagination

Affichage des articles avec pagination

Mise en évidence de mes div

Comme vous pouvez le voir, mon problème viens de l'affichage de ma pagination. Chaque article lu est affiché dans un div #produit (le fichier CSS suit

) qui est définit comme flottante ) gauche. Je comprend bien qu'il est normal que mon texte vienne s'écrire a la suite mais moi je voudrais simplement revenir a la ligne en gros.
J'espère avoir réussi à vous exposer mon soucis

, sinon n'hésitez pas à me poser des questions

Mon CCS épuré

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
div#contenu { 
	background:url('images/contenu.jpg') repeat-y right; 
	overflow:auto;
	width:800px;
}
 
/* div du div menu */
div#menu {
    float:left;
    width:174px;
}
 
/* style du contenu */
div#corp {
    margin-left:174px;
    padding-right:20px;
    padding-left:10px;
}
 
/* block du titre du contenu */
.ctitre {
	height:30px;
	padding-top:5px;
    background-image:url('images/ctitre.jpg');
    background-repeat:no-repeat;
	font-size:20px;
	text-align:center;
}
 
/* block du texte du contenu */
.ctexte {
	padding-bottom:20px;
	font-family:verdana;
}
 
/* block de la pagination du contenu */
.cpagination {
	padding-bottom:10px;
	font-family:verdana;
	font-size:10px;
	text-align:center;
}
 
/* style de la div produit */
div#produit  {
	float:left;
	width:183px;
	height:150px;
	padding-bottom:8px;
	padding-top:8px;
	padding-right:15px;
	text-align:center;
	text-decoration:none;
}

Mon code HTML épuré

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
<html>
<head>
	<title>ShAdY Commerce | categorie</title>
	<link title="defaut" type="text/css" rel="stylesheet" href="style.css" media="screen" />	
</head>
<body>
<div id="all">
    <div id="header"></div>
    <div id="contenu">
		<div id="menu">
			<div class="mrecherche"></div>
			<?php include("menu.inc.php"); ?>
        </div>
 
		<div id="corp" class="ctitre">Categorie <?php echo $_GET['cat'];?></div>
        <div id="corp" class="ctexte">
		<?php
		/////////////////////////////////////////////////////////////
		// -- AFFICHAGES DES PRODUITS -------------------------------
		/////////////////////////////////////////////////////////////
		//
		$mysql_result = lstProdDispoCat($cat,$premiereEntree,$articleParPage);
 
		// boucle pour afficher les différents produit dispo
		while ($prod = mysql_fetch_array($mysql_result))
			{
			echo '
			<div id="produit">
				<a href=produit.php?cat='.$cat.'&ref='.$prod[0].' >'.$prod[1].'<br/>
				<img src="articles/'.$cat.'/'.$prod[3].'" border="0"  width="120" height="114"></a><br/> 
				<i>'.$prod[4].'€</i>
			</div>';
			}
		/////////////////////////////////////////////////////////////
		?>
		</div>
		<div id="corp" class="cpagination">
		<?php
		/////////////////////////////////////////////////////////////
		// -- LISTE DES PAGES ---------------------------------------
		/////////////////////////////////////////////////////////////
		//
		echo ' <a href="categorie.php?cat='.$cat.'&marque='.$marqueRecherche.'&page='.$i.'">'.$i.'</a> ';
		/////////////////////////////////////////////////////////////
		?>
		</div>
	</div>
 
    <?php include("footer.inc.php"); ?>
 
</div>
 
</body>
</html>

**shadypierre** · 18/02/2009, 03h44

En faite en expliquant mon problème j'ai moi même (il me semble) trouvé la solution!
C'est en saisissant le titre que j'ai compris qu'il me fallait simplement sortir de mon float, et je me suis souvenue de la propriété clear: both;

A l'affichage ça me semble ok!

Merci à tous

**shadypierre** · 18/02/2009, 15h40

Finalement un léger soucis persiste, mais je pense que celui-ci provient de la conception même de mon site et qu'il n'est pas réglable, mais je me tourne tout de même vers vous pour m'éclairer.
Je n'avais pas vu mais lorsque mon menu est long la pagination ce retrouve tout en bas, et non juste en dessous de mes articles, ce qui n'est pas réellement pratique

Mon CSS mis à jour

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
div#contenu { 
	background:url('images/contenu.jpg') repeat-y right; 
	overflow:auto;
	width:800px;
}
 
/* div du div menu */
div#menu {
    float:left;
    width:174px;
}
 
/* style du contenu */
div#corp {
    margin-left:174px;
    padding-right:20px;
    padding-left:10px;
}
 
/* block du titre du contenu */
.ctitre {
	height:30px;
	padding-top:5px;
    background-image:url('images/ctitre.jpg');
    background-repeat:no-repeat;
	font-size:20px;
	text-align:center;
}
 
/* block du texte du contenu */
.ctexte {
	padding-bottom:20px;
	font-family:verdana;
}
 
/* block de la pagination du contenu */
.cpagination {
	clear:both;
	padding-bottom:10px;
	font-family:verdana;
	font-size:10px;
	text-align:center;
}
 
/* style de la div produit */
div#produit  {
	float:left;
	width:183px;
	height:150px;
	padding-bottom:8px;
	padding-top:8px;
	padding-right:15px;
	text-align:center;
	text-decoration:none;
}

Problème d'affichage de ma pagination (sortir d'une div float)

CSS

Vue hybride

Discussions similaires

Partager

Partager