Mettre un script PHP dans un div

**marc.suisse** · 08/06/2009, 07h59

Bonjour à tous

Je me prends la tête depuis un moment pour comprendre un problème que je rencontre .
Pour pouvoir agir sur les photos s'affichant , j'ai mis le code dans un div nommé partie photo selon ce code :

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>PRESENTATION</title>
       <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
 <link rel="stylesheet" media="screen" type="text/css" title="style" href="indexessai.css" />
 
   </head>
 
   <body>
   <div id="conteneur">
   <div id="imageheader" >
   <img src="presentation.jpg" alt="bannière"/>
	</div>
 
 
 
   <div id="colonneliens">
	<ul class="liens" >
		<li><a href="index.html">Accueil</a></li>
		<li><a href="presentation.php"id="actuel">Présentation</a></li>
		<li><a href="mariages.php">Mariages</a></li>
		<li><a href="services.html">Services</a></li>
		<li><a href="Contact.html">Contact</a></li>
		<li><a href="Liens.html">Liens</a></li>
	</ul> 
		<img src="rose.gif" alt="bouquet"/>
	</div>
 
<div id="corps">
	<p>L'établissement I GIARDINI D'ITALIA est un restaurant Italien qui propose entre autre la possibilité d'organiser le repas de votre mariage , baptême , fête... </p>
	<p>Notre capacité d'accueil est d'environ 120 à 150 personnes selon la configuration .</p>
<hr/>
</div>
<div id="partiephotos">
 
</div>
<div id="footer">
	<p>I GIARDINI D'ITALIA 2009</p>
</div>
</div>
</body>

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
Ainsi que le code css :
 
/* -------------------communs */
 
html , body
 
{
height:100%;
}
 
body
 
{
background:#941a1a ;
}
 
#conteneur
 
{
width:1003px;
margin-left:auto;
margin-right:auto;
min-height:100%;
margin-top:-10px;
background-image:url("repeat.PNG"); /* dégradé rouge des liens.css */
background-repeat:repeat-y;
border:3px solid black;
position:relative;
}
 
#imageheader
 
{
width:1000px;
border:1px solid white;
height:237px;
}
 
a#actuel	/* fond blanc , page actuellement affichée.css */
{
background-color:white ;
color:black;
}
 
#colonneliens
 
{
width:313px;
float:left;
position:absolute;
}
 
.liens
 
{
font-size:24px;
font-family:"Times New Roman";
color:white;
}
 
.liens a
 
{
color:white;
text-decoration:none;
}
 
.liens a:hover
 
{
color:blue;
}
 
.liens a:active
 
{
color:red;
}
 
ul li
{
margin-top:0px;
margin-bottom:10px;
list-style-type: none;
}
 
#corps
 
{
margin-left:313px;
font-size:21px;
color:white;
text-align:center;
padding-bottom:30px;
}
 
#corps h2
 
{
text-decoration:underline;
}
 
#footer
 
{
width:687px;
margin-left:313px;
clear:left;
height:30px;
text-align:center;
position:absolute;
bottom:0;
 
}
 
#footer p
 
{
color:#CCCC00;
}
 
/* -------------------présentation */
 
#partiephotos
 
{
margin-left:313px;
width:685px;
text-align:center;
padding:auto;
margin-top:10px;
min-height:300px;
border:3px solid black;
padding-bottom:20px;
}
 
.galerieminiaturespresentation
 
{
width:150px;
height:113px;
float:left;
margin-left:13px;
margin-top:10px;
border:1px solid white;
}
 
.affichagegrandeimage
 
{
border:5px ridge white;
height:450px;
width:600px;
margin-left:auto;
margin-right:auto;
}

Pour visualiser au mieux le div , j'ai mis un border autour , on peut le voir sur la capture d'écran ci-dessous

On voit donc que le border entoure les photos miniatures , ce qui est normal .

Par contre , dès que l'on clique sur une image pour afficher la grande lui correspondant , la galerie miniature n'est plus prise en compte dans le border du div partiephotos .

Donc le div conteneur ne s'agrandit pas et le footer ne prends pas la bonne place , je voudrais donc trouver une solution pour que l'image en grand et la galerie miniature soient contenues dans le border du div partiephotos .

Comprenez-vous ce qu'il se passe ?

Merci d'avance .

**nestam** · 09/06/2009, 16h00

il faut que le div partiephoto soit sur auto

**marc.suisse** · 12/06/2009, 09h42

Salut , je te remercie de ton aide

Excuses moi , je n'avais pas reçu de notification de réponse .

J'ai trouvé la solution sur un forum , je vous en fais part :

Code html :

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

1
2
3
4
5
<div id="partiephotos">
<div id="nouvellediv">
Code php 
</div>
</div>

Et mettre ceci dans le css :

Code css :

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

1
2
3
4
#nouvellediv
{
	overflow: hidden;
}

Cela marche très bien , même si je n'ai pas encore bien compris le fonctionnement exact de cette manipulation .

Pour en revenir au auto , quelles seraient les différences avec cette manipulation ?