Discussion :

[fabrice88]

bonjour,
j'essai de positionner en bas 2 div qui se trouvent dans un div.

je souhaiterai optenir ça :


mais j'obtien ça :


mon css donne cela :

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
 
/* CSS rubrique PPS */
 
div#cadrepps {
	width:555px;
	background-image: url(../images/fd-pps.png);
	height: 100px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
	background-repeat: no-repeat;
	overflow: visible;
	}
div#descpps {
	position: relative;
	width:365px;
	height: 100px;
	float: left;
	padding-right: 10px;
	padding-left: 10px;
	font-size: 10px;
	margin-top: 10px;
		}
div#imgpps {
	float : left;
	width : 100px;
	height:100px;
	color: #FFFFFF;
	background-image: url(../images/ecran.png);
	background-repeat: no-repeat;
	position: relative;
	margin-left: 10px;
	margin-top: 10px;
 
}
 
div#urlpps {
	position: relative;
	float:right;
	width:50px;
	height:65px;
	color: #FFFFFF;
	padding: 0;
	}
div#cadrebas {
	clear:both;
	width:555px;
	height:20px;
	background-color:#000000;
	}
.lienurl a:link {color: red ;}
.lienurl a:hover {border: 1px solid #000000; color: #00FBFF}
.lienurl a:visited {color: white ;}
 
div#cadreinfo {
	float:left;
	background-color:#006698;
	bottom:0;
	border: 1px solid #FFFFFF;
	width:365px;
	background-position: right bottom;
		}

et mon code html/php donne ç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
<div id="cadrepps">
	<div id="imgpps">
	<img src="../images/pps/"  width="100" height="75"/>
	</div>
		<div id="descpps">
		nom
		<p>description</p>
			  <div id="cadreinfo">
			  date |propos&eacute; par nompost				  
			  </div>
		</div>
 
		<div id="urlpps">
		<a href="../images/pps/"><img src="../images/@.png" width="45" height="32" /></a><br />
	    <a href="../images/pps/"><img src="../images/download.png" width="45" height="32" /></a>
		</div>
</div>

Pourriez vous m'aider a placé les div ou a corrigé mon css afin que le résultat soit celui de la premiere image ?
J'arrive pas a faire en sorte que ma balise urlpps et cadre info soit tout en bas de la balise cadrepps
j'imagine que mon css et mon code peuvent etre amélioré et corrigé donc je suis preneur pour tout conseils.
Merci

[blueice]

Ne sachant pas à quoi correspond urlpps et cadreinfo au niveau du design, dur dur, poste un lien plutôt...

[fabrice88]

ok j'ai mis en ligne la page sur laquelle je travail actuellement.
Les PPS photos Vosges
Merci pour votre aide

[blueice]

Commence par virer le cadre en fond de div et remplace par une bordure.
Ensuite le fait de positionner en float risque de faire dépasser le cadre si le texte est pas suffisamment long et haut. Donc voit pour donner au cadrepps une hauteur minimale suffisante.

[devyan]

Commence par virer le cadre en fond de div et remplace par une bordure.
Ensuite le fait de positionner en float risque de faire dépasser le cadre si le texte est pas suffisamment long et haut. Donc voit pour donner au cadrepps une hauteur minimale suffisante.

Il suffit d'annuler le float après pour "forcer le dimensionnement.
Avec par exemple: <br style="height:0px; float:none; clear:both;"/>

yan.

[blueice]

Il suffit d'annuler le float après pour "forcer le dimensionnement.
Avec par exemple: <br style="height:0px; float:none; clear:both;"/>

Arf j'avais oublié, en fait il y a une autre technique que j'ai trouvé il suffit de rajouter un overflow:auto sur le cadre et hop plus de problème

[devyan]

Arf j'avais oublié, en fait il y a une autre technique que j'ai trouvé il suffit de rajouter un overflow:auto sur le cadre et hop plus de problème

overflow: auto risque de te faire apparaître desscrollbars à un moment ou un autre non ?