Mettre un script PHP dans un div
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:
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:
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
http://i86.servimg.com/u/f86/11/06/60/26/site_110.jpg
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 .
http://i86.servimg.com/u/f86/11/06/60/26/site_210.jpg
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 . :)