Discussion :

[PierreBTSIG]

voici mon site : http://nakat.power-heberg.be/pierre/
Comme vous pouvez le voir sur la page d'accueil, il y a des information dans des cadres. Le problème est que lorsqu'il y a trop de texte dans ces cadres, les autres cadres en dessous ne descendes pas, il se superposent !!

Aidez moi svp

code 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
 
/*Cadres***************************************************************************************************************************************************************************/
#Cadre/*Contient les cadres de présentation (avec les bords arrondis)*/
{
	position: relative;
	width: 370px;
	margin-left: 5px;
	background: #cccccc;
}
#CadreNews
{
	position: absolute;
	top: 285px;
	left: 390px;
	width: 370px;
	margin-left: 5px;
	background: #cccccc;
}
#titreCadre /*Titre du conteneur saviez vous*/
{
	height: 21px;
	width: 150px;
	margin-left: 20px;
	font-family: comic sans ms, sans-serif;
	padding-top: 2px;
	margin-bottom: -2px;
	font-size: 14px;
	text-align: center;
	color: black;
	font-weight: bold;
	background: url("/pierre/images/Textures/titreCadre.gif") no-repeat;
}
#titreCadreNews /*Titre du conteneur saviez vous*/
{
	position: absolute;
	top: 264px;
	left: 390px;
	height: 21px;
	width: 150px;
	margin-left: 20px;
	font-family: comic sans ms, sans-serif;
	padding-top: 2px;
	margin-bottom: -2px;
	font-size: 14px;
	text-align: center;
	color: black;
	font-weight: bold;
	background: url("/pierre/images/Textures/titreCadre.gif") no-repeat;
}
/* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basgauche, #basdroit
{
height: 10px;
width: 10px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}
/* propriétés spécifiques à chaque coin */
#hautgauche{background: url("/pierre/images/Textures/hautgauche.gif");}
#hautdroit{float: right; background: url("/pierre/images/Textures/hautdroit.gif");}
#basgauche{background: url("/pierre/images/Textures/basgauche.gif");}
#basdroit{float: right; background: url("/pierre/images/Textures/basdroit.gif");}
 
#svtitre
{
	color: white;
	font-family: comic sans ms, sans-serif;
	font-size: 14px;
	margin-left: 2px;
	color: #e9e9e9;
	width: 360px;
	height: 20px;
	padding-left: 4px;
	background: url("/pierre/images/Textures/cadre.gif") no-repeat;
}
#svdescription
{
	position: relative;
	height: 110px;/*Cette taille permet d'avoir une taille minimum sous IE, le bloc concerné pourra quand même s'agrandir si le texte dépasse cette taille.
				Cependant, cette astuce ne fonctionne pas sous Firefox il faut donc utilisé html>body #corps qui lui ne fonctionne QUE sous Firefox (pas sous IE)*/
}
html>body> #svdescription
{
	height: auto;
	min-height: 110px;
}
#svdescr
{
	float: right;
	width: 270px;
}
#image
{
	position: absolute;
    margin: 4px;
	border-style: solid;
	border-width: 1px;
	border-color: red;
}
#image:hover
{
	z-index: 4;
}
/*****************************************************************************************************************************************************************************************/

code HTML PHP

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
<div id="titreCadre">
		Le saviez-vous ?
	</div>
	<div id="Cadre">
	<div id="hautdroit"></div><div id="hautgauche"></div>
	<?php
	while ($saviezvous = mysql_fetch_array($requete))
	{?>
		<div id="svtitre">
			<?php echo stripslashes($saviezvous['sv_titre']) ?>
		</div>
		<div id="contenu">
			<div id="svdescription"> <?php
				if ($saviezvous['sv_img'] != "") //Si il y a une image 
				{ 
					?> <img src="./images/accueil/saviezvous/<?php echo $saviezvous['sv_img'] ?>" height="75" width="75" id="image"> <?php
				}
				else
				{ 
					?> <img src="./images/NoImg.gif" height="75" width="75" id="image"> <?php
				} ?>
				<div id="svdescr">
					<?php echo stripslashes($saviezvous['sv_descr']); ?>
				</div>
			</div>
		</div> <?php
	}?>
	<div id="basdroit"></div><div id="basgauche"></div>
	</div><!-- Fin du conteneur saviez vous --><?php

[tim974]

Les positions absolues, c'est le mal! Le probleme vient surement de la!

[Bovino]

http://www.developpez.net/forums/sho...d.php?t=577150
C'est la même chose : tu fixes le height, mais tu n'indiques pas que faire du texte éventuellement en trop... (propriété overflow).