28172 sujets

CSS et mise en forme, CSS3

Centrer contenu d'un DIV dans une DIV

Bonjour

Je me permets de poster ce message parce que là je bloque un peu en ayant essayé de faire le tour depuis plusieurs jours... j'aurais besoin de votre aide sur un petit point...

Je n'arrive pas à centrer horizontalement un DIV dans ma page...

Voici ce que m'affiche mon code...
upload/60352-01.png

Voici ce que je voudrais...
upload/60352-02.png

Voici mon code :


<div id='container'><div id='result'>
<?php
// Une boucle en php
echo "<figure class='effect-julia'><img src='" . $photo . "' width='310' height='207' border='0'/><figcaption><div class='datetype'><BR><span class='dateimg'>".$date_affich1."</span> <span class='dateimg'>".$text1."</span></div><div class='infoslayer'><span class='infosimg'>".$text03."</span></div><a href='"."news.php?num_news=".$row['num_news']."'></a></figcaption></figure>";
?>
</div></div>


Et voici mon CSS :

#container {
} 
#result {
	position: relative;
	margin: 0 auto;
	padding: 8;
	max-width: 100%;
	list-style: none;
	text-align: center;
}

#result figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 8px;
	min-width: 310px;
	max-width: 310px;
	max-height: 207px;
	text-align: center;
	cursor: pointer;
}

#result figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 1;
}


Quelqu'un aurait une idée de là où ça coince ?

Merci d'avance
Modifié par johnWayne (04 Nov 2015 - 11:39)
Bonjour John Wayne et bienvenue sur le forum (et content que tu ne sois pas mort en fait Smiley ravi )

Un simple :
#container {
  width: 994px;
  margin: 0 auto;
}

... devrait suffire.

EDIT :
Attention, il y a malgré tout, beaucoup de chose inutiles à supprimer, ou à faire attention dans ton code, comme :
- Le padding:8 : Chrome ne le prend même pas en compte, précise l'unité, ou vire-le.
- Le max-width, min-width sur le même élément => width ?
- Le position:relative un peu partout (surtout sur un élément en flottant) ?
- Le list-style: none sur une div (anciennement ul je suppose)
...
Modifié par SolidSnake (04 Nov 2015 - 14:27)
Bonjour

:) oui je suis de retour Smiley smile

Merci de ta réponse...
Effectivement on mettant le code que tu m'as donné ça marche... ça centre...
Par contre, avant de l'inclure j'avais un petit comportement qui me plaisait bien... Je m'explique... En modifiant la taille de ma fenêtre ça réorganisait automatiquement mon ensemble de photos en les faisant passer à la ligne par exemple si je raccourcissais la taille de ma fenêtre... Genre un peu responsive design... Y aurait il possibilité de garder ce "comportement" et en centrant le tout automatiquement dans ma page ?

Merci..
Merci SolidSnake ça marche nickel...
J'ai corrigé d'autre chose dans mon code du coup pour l'épurer et enlever les choses qui servaient à rien... merci de ton aide... je pense que je vais devoir revoir deux trois trucs dans ma compréhension des DIVs et CSS...

J'en profite pour vous poser une autre question...

upload/60352-Capturedan.png

Je fais afficher en javascript une série de photos depuis instagram directement dans un site... en gros dans un bandeau horizontal non scrollable... Lorsque je modifie ma taille écran ça ne touche pas la taille des photos... Mais par exemple, lorsque je rétrécis la taille, les photos vont "à la ligne"... Comme j'ai imposé un height à mon div on ne les voit pas... et ça m'affiche un "espace" à droite de la dernière photo affichée (comme sur l'image en turquoise)...
Ce que j'aimerais c'est que ça m'affiche la photo passée à la ligne à la suite des autres à droite...une sorte de overflow qui m'affiche la moitié de l'image par exemple si la taille écran est plus petite... Mais surtout pas de "renvoi à la ligne"...

Je sais pas si je suis très clair...

Voici mon code HTML... 
<div id="instagramcontainer"><div id="instagram"></div></div>


Voici mon code dans le javascript...
$("#instagram").append("<div class='greed'><figure class='effect-truc'><a target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.low_resolution.url +"' /></a></div></div>");


Et le CSS
#instagramcontainer {
	position:relative;
	float:left;
	width:100%;	
	height:152px;
	margin:0px;
	overflow:hidden;
	background: #3085a3;
}
#instagram {
	width:100%;	
	height:152px;
}
.greed {
	margin: 0px auto;
	padding: 0px;
}
.greed figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin:0px;
	width: 152px;
	height: 152px;
	text-align: center;
	cursor: pointer;
}

.greed figure img {
	min-height: 100%;
	max-width: 100%;
}


si vous pouvez m'aider aussi là dessus... Je vous file l'intégrale de mes films !!!! Smiley smile

Merci...

[/i][/i]
Modifié par johnWayne (04 Nov 2015 - 16:00)
Bonjour,

Il te faut comprendre pourquoi tes images basculent à la ligne...

Alors pourquoi ? Parce tes images sont en flottant, et restera sur la ligne uniquement si la longueur du parent (i.d. #instagram) permet de les contenir.
Mais vu que sa longueur est relative à la taille de la fenêtre (width:100% sur lui et son parent), quand tu resize ta fenêtre les images passent à la ligne, normal...

Donc pour contrer ça, il faut que la longueur de ton conteneur soit AU MOINS égal à la longueur de tous tes éléments à l'intérieur.

Je le ferai en JS comme ici, après là c'est dynamique, mais si tes images ne changent jamais de taille (152px) tu peux faire ton calcul en dur.
Idem si tu as toujours le même nombre d'images.
Sujet clos
Aller à