Centrer img dans une DIV

Résolu/Fermé

tchao57 Messages postés 583 Date d'inscription dimanche 12 avril 2009 Statut Membre Dernière intervention 15 octobre 2018 - 19 déc. 2013 à 19:14
tchao57 Messages postés 583 Date d'inscription dimanche 12 avril 2009 Statut Membre Dernière intervention 15 octobre 2018 - 20 déc. 2013 à 10:31

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.

A voir également:

Centrer div
Div c++ - Télécharger - Langages
Enlever #div/0 dans tableau croisé dynamique ✓ - Forum Excel
Fusionner et centrer excel grisé ✓ - Forum Excel
Centrer un tableau css - Forum Webmastering
Dans le document à télécharger, léa a utilisé 2 méthodes différentes pour centrer le nom des continents. lesquels sont centrés correctement ? - Forum Jeux vidéo

9 réponses

Réponse 1 / 9

Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
19 déc. 2013 à 21:29

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.

Réponse 2 / 9

tchao57 Messages postés 583 Date d'inscription dimanche 12 avril 2009 Statut Membre Dernière intervention 15 octobre 2018 42
20 déc. 2013 à 09:39

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?

Réponse 3 / 9

youra
Modifié par youra le 20/12/2013 à 09:48

non une div dans ton foreach pour que chaque image ait sa div ;) et tu leur donne une class pour ton css

Réponse 4 / 9

tchao57 Messages postés 583 Date d'inscription dimanche 12 avril 2009 Statut Membre Dernière intervention 15 octobre 2018 42
20 déc. 2013 à 10:01

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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 9

Youra87 Messages postés 47 Date d'inscription mardi 10 avril 2012 Statut Membre Dernière intervention 20 décembre 2013 11
20 déc. 2013 à 10:06

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;
}

Réponse 6 / 9

tchao57 Messages postés 583 Date d'inscription dimanche 12 avril 2009 Statut Membre Dernière intervention 15 octobre 2018 42
20 déc. 2013 à 10:12

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... :/

Réponse 7 / 9

Youra87 Messages postés 47 Date d'inscription mardi 10 avril 2012 Statut Membre Dernière intervention 20 décembre 2013 11
20 déc. 2013 à 10:16

vas voir la doc css, il existe 5 valeur différente pour le "position:" dont inherit, static, relative.

Réponse 8 / 9

tchao57 Messages postés 583 Date d'inscription dimanche 12 avril 2009 Statut Membre Dernière intervention 15 octobre 2018 42
20 déc. 2013 à 10:22

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?

Réponse 9 / 9

tchao57 Messages postés 583 Date d'inscription dimanche 12 avril 2009 Statut Membre Dernière intervention 15 octobre 2018 42
20 déc. 2013 à 10:31

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.

Discussions similaires

Utilisation des méthodes de manipulations du DOM

erreur (#DIV/0) formule MOYENNE.SI.ENS

comment remplacer un #div/0! par une cellule vide

Mise en forme d'un texte - gimp

MOYENNE excel sans #DIV

Discussions similaires

Newsletters