Centrer img dans une DIV [Résolu/Fermé]

Signaler
Messages postés
592
Date d'inscription
dimanche 12 avril 2009
Statut
Membre
Dernière intervention
15 octobre 2018
-
Messages postés
592
Date d'inscription
dimanche 12 avril 2009
Statut
Membre
Dernière intervention
15 octobre 2018
-
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:

<!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

Messages postés
838
Date d'inscription
vendredi 2 novembre 2012
Statut
Membre
Dernière intervention
17 décembre 2015
120
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.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Messages postés
592
Date d'inscription
dimanche 12 avril 2009
Statut
Membre
Dernière intervention
15 octobre 2018
37
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
Messages postés
592
Date d'inscription
dimanche 12 avril 2009
Statut
Membre
Dernière intervention
15 octobre 2018
37
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
Messages postés
47
Date d'inscription
mardi 10 avril 2012
Statut
Membre
Dernière intervention
20 décembre 2013
5
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;
}
Messages postés
592
Date d'inscription
dimanche 12 avril 2009
Statut
Membre
Dernière intervention
15 octobre 2018
37
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... :/
Messages postés
47
Date d'inscription
mardi 10 avril 2012
Statut
Membre
Dernière intervention
20 décembre 2013
5
vas voir la doc css, il existe 5 valeur différente pour le "position:" dont inherit, static, relative.
Messages postés
592
Date d'inscription
dimanche 12 avril 2009
Statut
Membre
Dernière intervention
15 octobre 2018
37
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?
Messages postés
592
Date d'inscription
dimanche 12 avril 2009
Statut
Membre
Dernière intervention
15 octobre 2018
37
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.