28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Encore un post sur le centrage d'un div dans un div.
Mon cas :

<div class="body">
	<div class="centre">
		<ul>
			<li>blah1</li>
			<li>blahblahblah2</li>
			<li>blahblah3</li>
			<li>blah4</li>
			<li>blahblahblahblahblahblahblahblahblahblahblahblah5</li>
		</ul>
	</div>
</div>


je veux centrer le div "centre" dans le div body qui prend la largeur maximum du text contenu dans le div centre. Le problème est que le div "centre" n'a jamais une largeur fixe du coup je ne sais pas comment le centrer par rapport au body.

Voici le Css que j'ai commencé :

	body {
		background-color:gray;
	}
	.body {
		background-color:white;
		width:768px;
		position:absolute;
		left:50%;
		margin-left:-384px;
		border:1px solid black;
		padding:10px;
		text-align:center;
		
	}
	.centre {
		margin: 0 auto;
		text-align:left;
		background-color:green;
		border:1px solid red;
		width-min:50%;
		max-width:100%;
	}

Donc je veux centrer le div vert avec une largeur dynamique en fonction du contenu.

L'aperçu de ce que j'ai :
upload/37216-centrerdiv.png

En esperant avoir été clair, c'est pas forcement evident à expliquer Smiley smile
Modifié par jash (04 Apr 2011 - 17:24)
C'est le div.center que tu veux centrer ou le contenu de ce div (soit, en l'occurrence, le <ul>) ?


à plus,

éric
Bonjour,

Une petite erreur, non :
width-min:50%;

==>
min-width:50%;


Et en ajoutant un display: table; à .centre (ça risque de déborder)?

Cordialement
Modifié par lddsoft (04 Apr 2011 - 18:18)
padding-top a écrit :
C'est le div.center que tu veux centrer ou le contenu de ce div (soit, en l'occurrence, le &lt;ul&gt;) ?


à plus,

éric


Oui c'est le div.center que je veux centrer. J'ai mis le ul dans le div car il est susceptible que par la suite j'ai d'autres éléments que le ul dans ce div.center.

En effet @lddsoft c'était bien une petite erreur de ma part, c'est bien min-width:50%; qu'il fallait lire.
Avec le display:table j'ai ce qu'il me faut Smiley smile Merci @lddsoft.

Edit : En faite, dans mon test unitaire en .html ca fonctionne, je transpose mon test unitaire en .aspx, et ca fonctionne plus, j'ai du mal à comprendre pourquoi...
Modifié par jash (05 Apr 2011 - 09:32)
Bonjour,

jash a écrit :
Avec le display:table j'ai ce qu'il me faut Smiley smile Merci @lddsoft.

Edit : En faite, dans mon test unitaire en .html ca fonctionne, je transpose mon test unitaire en .aspx, et ca fonctionne plus, j'ai du mal à comprendre pourquoi...


Je ne pense pas que le navigateur se pose la question de l'extension.

Si tu passes en aspx, tu l'as surement mit dans une page déjà existante ( chargement dynamique via cms peut-être ). Les doctype sont-ils les mêmes entre ton .html et ton .aspx ?
n3k0 a écrit :
Bonjour,



Je ne pense pas que le navigateur se pose la question de l'extension.

Si tu passes en aspx, tu l'as surement mit dans une page déjà existante ( chargement dynamique via cms peut-être ). Les doctype sont-ils les mêmes entre ton .html et ton .aspx ?


Oui, c'est un aspx que je code dans un layouts de Sharepoint. J'ai appliqué la même dtd pour les 2 (le test unitaire et l'aspx dans SharePoint). C'est pour ca que j'ai du mal à comprendre pourquoi j'ai un affichage différent entre les 2. Mais bon, c'est à moi d'investiguer maintenant pour trouver la cause Smiley smile

Merci pour l'aide.
Bonjour,

J'essayais de faire presque la même chose. Centrer une div de taille dynamique contenant des éléments en "float left" à l'intérieur.

Mais ça en marche pas sous ie6 et ie7. Ça reste aligné à gauche.

Quelqu'un aurait une solution?
Bonjour, il serait plus judicieux d'ouvrir un nouveau sujet concernant ton problème. De plus, on donnant le maximum d'information, tu as plus de chance d'avoir de l'aide. (codes ou page en ligne) Smiley cligne