Centrer img dans une DIV
Résolu
Bonsoir à tous.
Je suis confronté à un petit souci que j'ai du mal à résoudre. J'ai besoin de centrer une image dans une DIV mais impossible...
Voici mon code PHP de la page index.php:
Et le CSS associé:
Actuellement, l'image reste en haut à gauche et le code HTML qui en ressort (vu avec FIREBUG) indique une position ABSOLUTE de l'image...
Si vous avez des suggestions ce sera avec plaisir.
Merci à tous.
Je suis confronté à un petit souci que j'ai du mal à résoudre. J'ai besoin de centrer une image dans une DIV mais impossible...
Voici mon code PHP de la page index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fit: 1, pause: 3, random: true
});
});
</script>
<link rel="stylesheet" href="styles/dynamicslides.css" type="text/css" media="screen" />
</head>
<body>
<?php
$directory = 'images/slideshow';
try {
// Styling for images
echo "<div id=\"myslides\">";
foreach ( new DirectoryIterator($directory) as $item ) {
if ($item->isFile()) {
$path = $directory . "/" . $item;
echo "<img src=\"" . $path . "\"/>";
}
}
echo "</div>";
}
catch(Exception $e) {
echo 'No images found for this slideshow.<br />';
}
?>
</body>
</html>
Et le CSS associé:
body
{
background-color: blue;
width: 800px;
text-align: center;
margin: 0 auto;
}
#myslides {
background-color: yellow;
width: 600px;
height: 400px;
margin: 0 auto;
text-align: center;
}
img {
max-width: 200px;
max-height: 300px;
margin: 0 auto;
}
Actuellement, l'image reste en haut à gauche et le code HTML qui en ressort (vu avec FIREBUG) indique une position ABSOLUTE de l'image...
Si vous avez des suggestions ce sera avec plaisir.
Merci à tous.
9 réponses
-
Bonsoir.
Si le style position:absolute; est sur ton éléments, c'est surement ton script cycle qui le rajoute si toutes tes images ont la même tailles, fixe la taille sur #myslides, et à la limite tu peut toujours ajouter une autre div par dessus pour mettre le style que tu voulais à la base. -
Bonjour Nhay et merci de ta réponse.
En effet, c'est bien le script cycle qui ajoute le style automatiquement. Je l'ai commenté et le style a disparu.
Par contre, mes images n'ont pas la même taille, c'est aléatoire.
Tu me dis d'ajouter une autre DIV par dessus #myslides c'est bien ça? -
non une div dans ton foreach pour que chaque image ait sa div ;) et tu leur donne une class pour ton css
-
Merci youra pour ta réponse.
Je ne maitrise pas PHP, je me contente de modifier au coup par coup. Pourrais-tu me filer le bout de code à modifier s'il te plais?
Merci -
la balise <div> est du html donc elle vas dans le echo, et elle encadre ta balise image, tu lui rajoute une class et du css :
foreach ( new DirectoryIterator($directory) as $item ) {
if ($item->isFile()) {
$path = $directory . "/" . $item;
echo "<div class='bridebra'><img src=\"" . $path . "\"/></div>";
}
}
css
.bridebra{
text-align: center;
} -
OK c'est fait. La class se met bien à toutes les images mais le style généré en HTML reste toujours en position:absolute et les images restent en haut à gauche... :/
-
vas voir la doc css, il existe 5 valeur différente pour le "position:" dont inherit, static, relative.
-
Le problème vient du script cycle comme la dit Nhay. Il créer une position:absolute pour les images automatiquement, je pense que c'est à cet endroit la qu'il faut modifier, mais je ne vois pas trop où.
Dans le plugin jquery.cycle.all.min.js peut être? -
OK c'est bon j'ai trouvé...
C'était bien au niveau du plugin jquery.cycle.all.min.js.
J'ai modifié les lignes correspondantes aux position:absolute en position:relative
Et maintenant j'ai l'effet escompté.
Merci beaucoup pour votre aide et à Nhay pour m'avoir mis sur la piste du script cycle.
