Centrer un div sans largeur fixe

Question

Pages :

maniT4c

25 Dec 2006 à 12:24

Voila tout est dans le titre.
J'aimerais réussir a centrer un div dont la largeur est variable.

Benjamin D.C.

25 Dec 2006 à 12:54

Bonjour! Smiley nimp

Qu'entends-tu par largeur variable? Parce que ceci fonctionne naturellement, mais je suppose que ce n'est pas ce que tu cherches:

div {width:80%; margin:0 auto;}

maniT4c

25 Dec 2006 à 13:08

non le but c'est que la largeur de mon div s'adapte a son contenu ...
de la même manière qu'un div en float:left par exemple.
Mais qu'il soit en plus centré.

fvsch

25 Dec 2006 à 23:11

maniT4c a écrit :
non le but c'est que la largeur de mon div s'adapte a son contenu ...
de la même manière qu'un div en float:left par exemple.
Mais qu'il soit en plus centré.

Dans ce cas, on aura besoin du mode d'affichage inline-block (avec un display: inline-block, donc). Malheureusement, il n'est pas correctement supporté par les deux principaux navigateurs à l'heure actuelle (Internet Explorer et Firefox).

J'ai bien peur que ce ne soit impossible...

Christian Le Bouler

26 Dec 2006 à 01:25

maniT4c a écrit :
Voila tout est dans le titre.
J'aimerais réussir a centrer un div dont la largeur est variable.

Salut,

je répond à ta question et je te laisse la reformuler pour qu'elle ait un sens au moins pour toi...

La réponse est très simple.

J'appelle l'élément adaptable et centrable : <element_a_centrer>

html


<parent_element_a_centrer>

<element_a_centrer>
...
</element_a_centrer>

</parent_element_a_centrer>

css


parent_element_a_centrer {
text-align:center;
}

element_a_centrer {
display:inline;
}

Et voilà, jusqu'à plus ample informé la solution est très bonne et répond parfaitement à ta question.

Maintenant à toi Smiley cligne

maniT4c

26 Dec 2006 à 08:36

g essayé en utilisant display:inline; mais mon div ne s'adapte pas à au texte qu'il contien (les bordure sont les unes sur les autres). De plus le texte de mon div est centré et ce n'est pas ce que je veux.

Moi je voudrais le même comportement que
margin:0 auto;
width:100px;

mais sans avoir à préciser la largeur.

Benjamin D.C.

26 Dec 2006 à 10:44

Bonjour,

Juste au passage:

clb56 a écrit :

"J'appelle l'élément adaptable et centrable"
"jusqu'à plus ample informé"

J'ai parfois franchement du mal à comprendre le sens de tes phrases... Ne le prends pas mal, mais je pense que tu gagnerais beaucoup à écrire simplement, sans rechercher à faire des effets de style que tu ne maîtrise pas. Ce n'est pas une aggression personnelle, juste un conseil pour que tes solutions — souvent judicieuses par ailleurs — soient mieux comprises et puissent être intégrées par ceux qui en besoin.

Bonnes fêtes sinon Smiley ravi

fvsch

26 Dec 2006 à 14:49

maniT4c a écrit :
Moi je voudrais le même comportement que
margin:0 auto;
width:100px;

mais sans avoir à préciser la largeur.

Bon, je dis peut-être une bêtise, mais ça me semble impossible à l'heure actuelle.
Au fait, pourquoi serait-il impossible de donner une largeur fixe ?

Benjamin D.C.

26 Dec 2006 à 15:47

mpop a écrit :
pourquoi serait-il impossible de donner une largeur fixe ?

Oui ça j'avoue que j'ai moi aussi beaucoup de mal à comprendre... Smiley hum

Mateo

16 Jan 2007 à 23:41

mpop a écrit :

pourquoi serait-il impossible de donner une largeur fixe ?
Oui ça j'avoue que j'ai moi aussi beaucoup de mal à comprendre...

[quote=Benjamin D.C.]Oui ça j'avoue que j'ai moi aussi beaucoup de mal à comprendre...

J'ai exactement le même problème: je souhaiterais centrer un div (à l'intérieur d'un autre) dont je ne connais pas à l'avance la largeur.
Pourquoi je ne connais pas la largeur? Car la largeur du div en question s'adapte en fonction du contenu. Par exemple dans mon cas, suivant la police trouvée (j'utilise en priorité Lucida Grande, puis Verdana, puis sans-serif) la largeur n'est pas la même. Elle peut aussi changer si l'utilisateur décide d'afficher son texte en plus gros…

Vu que je débute, je n'ai pas trouvé d'autre solution que de présupposer une largeur fixe (en prenant comme référence la police Verdana, en taille normale). J'appelle ça "de l'arrache" Smiley cligne

.

Au passage, j'ai une autre question: est-il possible d'empêcher l'agrandissement du texte par l'utilisateur à l'intérieur d'un div donné? En effet, à cause de la largeur fixe que j'impose à mon div, si l'utilisateur agrandit le texte, ça "déborde"… Smiley decu

PS: tiens, c'est bizarre, mes quotes imbriquées ne marchent pas. Où me suis-je planté?
Modifié par Mateo (16 Jan 2007 - 23:47)

ghost

17 Jan 2007 à 01:31

Bonjour,

Pour empêcher l'agrandissement du texte par l'utilisateur ce n'est pas (heureusement) possible ! Par cotre tu peux essayer de fixer la taille de don bloc en em, il devrait être proportionnel à la taille de la police.

Sinon avec un peu de php tu dois pouvoir approcher de plus près cette taille en fonction du contenu, mais bon c'est beaucoup pour finalement encore quelque chose d'approximatif.

___seb

17 Jan 2007 à 13:48

salut,

Je ne sais pas si c'est ce que tu cherches mais, il suffit simplement de spécifier les marges horizontales :


	div {margin:0 200px;
	background:#eee;
	border:1px dotted green;
	}

Là j'ai utilisé des pixels mais c'est surement plus pertinent avec des em ou des %.

exemple

Mateo

17 Jan 2007 à 15:28

ghost a écrit :
Bonjour,

Pour empêcher l'agrandissement du texte par l'utilisateur ce n'est pas (heureusement) possible !

Merci pour ton aide!

Ben c'est quand même embêtant dans certains cas. Dans mon cas, il s'agit du texte de mes "boutons-onglets", du coup dès qu'on agrandit le texte, ça déborde et une ligne en plus apparaît… Mais vu que je débute, je ne fais peut-être pas les choses comme il faut…

Voici 2 copies d'écran pour bien montrer le problème. La première image est le cas "normal", la deuxième est le cas où l'utilisateur a agrandit le texte. Je n'ai pas encore d'hébergement, je ne peux donc pas vous montrer une version en ligne. Je mets quand même en bas le code HTML et le CSS (n'hésitez pas à me dire à quel point mon code est mauvais! Smiley cligne

)

[Edit]Je n'arrive pas à placer deux images différentes dans mon post. J'en rajoute donc un pour vous montrer le cas où "ça bugge"…

Si je donne une largeur plus grande au div contenant les boutons afin d'éviter le débordement, ceux-ci n'apparaissent plus centrés Smiley decu

Bref, je patauge un peu Smiley cligne

ghost a écrit :
Par cotre tu peux essayer de fixer la taille de don bloc en em, il devrait être proportionnel à la taille de la police.

Si je donne une largeur en em, le div n'est plus centré. Smiley decu

ghost a écrit :
Sinon avec un peu de php tu dois pouvoir approcher de plus près cette taille en fonction du contenu, mais bon c'est beaucoup pour finalement encore quelque chose d'approximatif.

Je dois utiliser du JSP… Peut-être y-a-t'il une solution en JavaScript?

Fichier HTML (layout/defaultLayout.html)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Test</title>

	<link rel = "stylesheet" type="text/css" href="../css/defaultLayout.css"/>

</head>
<body>

	<div id = "header">
		<!-- Here comes the header -->
		<!-- The image is in the CSS file -->
	</div>

	<!-- Here comes the tab menu -->
	<div id = "tab-menu">

		<!-- Left corner of the tab menu -->
		<div id = "tabs-left-corner"></div>

		<div id = "tabs-right">
			<ul>
				<li id="first-tab"><a href="#">Home</a></li>
				<li><a href="#">Curing</a></li>
				<li><a href="#">Measurements</a></li>
				<li id="current-left"><div id="current-right"><div id="middle"><a>Lab Materials</a></div></div></li>
				<li><a href="#">My Operations</a></li>
				<li><a href="#">My Files</a></li>
			</ul>
		</div>
	</div>

	<div id = "main">
		<div id = "content-border">
			<!-- Here comes the content -->
			<div id="content">
				<p>
					Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablabla<br/>
					Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablabla<br/>
					Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablabla<br/>
					Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablabla<br/>
					Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablabla<br/>
				</p>
				<p>
					Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablabla<br/>
					Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablabla<br/>
					Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablabla<br/>
				</p>
			</div>
		</div>
	</div>
	<div id="bottom-left-border"></div> 
	<div id="bottom-right-border"></div>

	<div id = "footage">
		<!-- Here comes the footage -->
	</div>
	<p><a href="http://validator.w3.org/check?uri=referer"><img
		src="http://www.w3.org/Icons/valid-xhtml10"
		alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
	</p>
</body>
</html>

Fichier CSS (css/defaultLayout.css) - non encore testé sous IE, ça risque de bugger sous le browser de Microsoft…


* {
	margin: 0;
	padding: 0;
}

#header {
	width: 100%;
	height: 150px;
	background: url("../images/logo.jpg") no-repeat scroll center;
}

body {
	width: 90%;
	margin: auto;
	margin-top: 5px;
	margin-bottom: 20px;
	min-width: 610px; /*Has to be 40px more than tab-menu ul width in order the tabs to be centered with Verdana*/
	max-width: 1000px;
}

/* @group Tab menu */

/* @group Menu bar */

#tab-menu * {
	height: 34px;
}

#tabs-left-corner {
	background: url(../images/tab-left-corner.gif) no-repeat left;
	width: 12px;
	float: left;
}

#tabs-right {
	background: url(../images/tab-right.gif) no-repeat right;
}

#tab-menu ul {
	list-style: none;
	margin: auto;
	width: 570px; /*Has to be 570px in order the tabs to be centered with Verdana*/
}

/* @end */

/* @group Tabs */

#tab-menu li {
	float: left;
	padding-left: 11px;
	padding-right: 10px;/* padding-right = padding-left + 1 in order the text to be centered (with separator, which is 2px width) */
	background: url(../images/tab-separation.gif) no-repeat left;
}

#tab-menu li#first-tab {
	background: none; /* Hide first separation */
}

#tab-menu a {
	color: #525252;
	font: 0.9em/34px "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	text-decoration: none;
	text-shadow: #fff 0px 1px 1px;
}

#tab-menu li#current-left {
	background: url(../images/selected-tab-left.gif) no-repeat;
	padding: 0 0 0 1px;
}

#tab-menu li#current-left #current-right {
	background: url(../images/selected-tab-right.gif) right;
	padding-right: 10px;
	padding-left: 10px;
}

#tab-menu li#current-left #current-right a {
	cursor: default;
	color: #666;
	text-shadow: #fff 0px 1px 1px;
}

#tab-menu #middle {
	background: url(../images/cursor.gif) no-repeat center bottom;
}

#tab-menu li > a:hover {
	color: gray;
}

#tab-menu #current-left + li  {
	background-image: none; /* Remove separation after the selected tab (wich already include its own separation) */
}

/* @end */

/* @end */

/* @group Main Content */

#content-border {
	background: url(../images/main-left-border.gif) repeat-y left;
	padding-left: 3px; /* in order to display the border */
}

#content {
	text-indent: 1em;
	background: #fff url(../images/main-right.gif) repeat-y right;
	padding: 20px 20px 7px;
}

/* @end */

#bottom-left-border {
	background: url(../images/bottom-left-corner.gif) no-repeat;
	float: left;
	width: 13px;
	height: 13px;
}

#bottom-right-border {
	background: url(../images/bottom-right.gif) no-repeat right;
	height: 13px;
}

Modifié par Mateo (17 Jan 2007 - 15:46)

Mateo

17 Jan 2007 à 15:32

Cas où ça bugge:

[Edit]Bon, ben ça marche pas, je ne peux pas poster deux images différentes on dirait… Smiley decu

Modifié par Mateo (17 Jan 2007 - 15:34)

Mateo

17 Jan 2007 à 15:48

___seb a écrit :
salut,

Je ne sais pas si c'est ce que tu cherches mais, il suffit simplement de spécifier les marges horizontales :
	div {margin:0 200px;
	background:#eee;
	border:1px dotted green;
	}
Là j'ai utilisé des pixels mais c'est surement plus pertinent avec des em ou des %.

exemple

Merci de m'aider.

Mes marges sont actuellement en auto, si je les passe en %, ça ne centre plus, car la largeur de ma page est variable en fonction de la taille de la fenêtre.

Je crois que je vais passer en largeur fixe, parce-que c'est trop le b***el…

gcyrillus

Modérateur

17 Jan 2007 à 19:50

bonjour,

pour centrer un div et qu'il prennent la taille de son contenu sans specifier de largeur , il faut faire usage du display:table; de façon a ce qu'a l'affichage il se comporte comme un tableau .

Pour IE , c'est autre chose , comme il ne comprends pas le display:table; on joue sur un autre plan avec un compromis plus ou moins acceptable. ou on laisse faire le comportement block par defaut.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>XHTML 1.0 Strict</title>
<style type='text/css'>
div {
display:table;
margin:auto;
border:1px solid;
}
</style>

 <!--[if IE ]>
<style type="text/css">
div {
display:inline-block;
min-width:1%;
width:auto!important;
width:1%;
white-space:nowrap;
}

</style>
<![endif]--> 
</head>
<body>
<div> <p>paragraphe de section
yuuyu
kli</p></div>
</body>
</html>

Pour forcer l'elargissement , plusieurs choix , :
une taille fixe , (plus besoin de faire des bidouilles , au choix , pixels , em , pourcentage).

ou la bidouille IE avec un


width:1%;
white-space:nowrap;  /* ou white-space:pre; */

Maintenant reste le cas de IE7 .... alors faire le Smiley decu

toujours dans les commentaires conditionnels .


min-width:1%;
width:auto!important;
width:1%;

En bref , IE empeche de faire les choses proprement une fois de plus ...

GC

Mateo

18 Jan 2007 à 16:39

gcyrillus a écrit :
bonjour,

pour centrer un div et qu'il prennent la taille de son contenu sans specifier de largeur , il faut faire usage du display:table; de façon a ce qu'a l'affichage il se comporte comme un tableau .

Grand merci! Ça marche (presque) nickel… tout du moins sous Firefox et Safari.
Par contre lorsque l'on agrandit le texte:
- sous Safari, ça ne déborde plus Smiley smile

mais l'alignement vertical (middle) ne marche plus
- sous Firefox par contre, ça continue à déborder. Je ne comprends pas pourquoi car je n'impose plus de largeur fixe à mon div Smiley confus

gcyrillus a écrit :
Pour IE , c'est autre chose , comme il ne comprends pas le display:table; on joue sur un autre plan avec un compromis plus ou moins acceptable. ou on laisse faire le comportement block par defaut.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>XHTML 1.0 Strict</title>
<style type='text/css'>
div {
display:table;
margin:auto;
border:1px solid;
}
</style>

  
</head>
<body>
<div> <p>paragraphe de section
yuuyu
kli</p></div>
</body>
</html>
Pour forcer l'elargissement , plusieurs choix , :
une taille fixe , (plus besoin de faire des bidouilles , au choix , pixels , em , pourcentage).

ou la bidouille IE avec un
width:1%;
white-space:nowrap;  /* ou white-space:pre; */

Malgré le hack ça ne marche pas Smiley decu

et comme j'ai du mal à comprendre la "logique" d'IE, je ne sais pas trop ce qu'il faut faire…

[Edit]Voici le rendu:

gcyrillus a écrit :
Maintenant reste le cas de IE7 .... alors faire le toujours dans les commentaires conditionnels .
min-width:1%;
width:auto!important;
width:1%;
En bref , IE empeche de faire les choses proprement une fois de plus ...

GC

Je n'ai pas pu tester car on m'a dit que si j'installais IE7, ça effacerait IE6 Smiley eek

Merci encore pour votre aide
Modifié par Mateo (18 Jan 2007 - 19:52)

Benjamin D.C.

18 Jan 2007 à 17:10

Mateo a écrit :
Je n'ai pas pu tester car on m'a dit que si j'installais IE7, ça effacerait IE6

Effectivement, mais il existe des solutions... Smiley cligne

Mateo

18 Jan 2007 à 19:51

Benjamin D.C. a écrit :
Effectivement, mais il existe des solutions...

Un grand merci, je cherchais quelque chose comme ça car il permet d'installer également les vieilles versions d'IE Smiley smile

Mateo

18 Jan 2007 à 21:08

Bon, ça avance Smiley smile

En fait, je n'avais pas bien compris le hack IE: je l'appliquais au div conteneur (celui dont on a modifié le display en table) au lieu de l'appliquer aux éléments contenus Smiley rolleyes

.

Ce reste à faire:
- essayer de centrer mon div sous IE
- enlever le petit espace qui apparaît entre mon coin gauche et mon premier bouton-onglet
- enlever le séparateur qui apparaît juste après le premier bouton-onglet sélectionné, que je cache normalement sous les autres navigateurs avec:

#tab-menu #current-left + li  {
	background-image: none; /* Remove separation after the selected tab (wich already include its own separation) */
}

Voilà un screenshot de ce que ça donne sous IE6 pour l'instant:

Pages :

Sujet clos

Questions générales et questions de débutants

Centrer un div sans largeur fixe