[Résolu] Eviter que width:auto prenne 100%

Bonjour,

Je suppose que la question a déjà été abordée, en parcourant les forums je n'ai pas trouvé de réponse ciblant exactement mon problème.

J'essaie de centrer horizontalement des div dans un div positionné en left.

Ex:

<div class="global">
    <div class="title"></div>
    <div class="options">
        <div id="option1" class="option"></div>
        <div id="option2" class="option"></div>
        <!--
           ..... 
        <div id="optionN" class="option"></div>
         -->
    </div>
</div>

title et options sont positionnés en left, les optionN également. Le nombre d'options peut varier de 1 à 3.

Ce que je voudrais c'est centrer les optionN dans options quelque soit le nombre d'options.

Pour ce faire, je tente de fixer la largeur de title et de options, mais ça ne suffit pas. Je rajoute donc un calque supplémentaire :

<div class="global">
    <div class="title"></div>
    <div class="options">
        <div class="centrage">
            <div id="option1" class="option"></div>
            <div id="option2" class="option"></div>
            <!--
             ..... 
            <div id="optionN" class="option"></div>
            -->
        </div>
    </div>
</div>

Et voici les propriétés CSS :

.global {width:100%; margin:0 auto; text-align:center; overflow:hidden;}
.global .title {float:left; width:170px;}
.global .options {float:left; width:720px; margin:0 auto; text-align:center; overflow:hidden;}
.global .options .centrage {display:inline-block; width:auto; min-width:235px; margin:0 auto; text-align:center; overflow:hidden; clear:both;}
.global .options .option {float:left; width:235px; margin:0 auto; text-align:center; cursor:pointer;}
.global .options .option div {float:left;}

Sauf que le width:auto; de centrage prend 100% de la largeur de options au lieu d'adapter sa largeur en fonction du contenu, c'est à dire en fonction du nombre d'options avec une largeur de 235px.

Le display:inline-block corrige le problème dans Firefox 3 uniquement et je sais que son utilisation est déconseillée.


Une idée ? je m'arrache les cheveux sur ce genre de problème et n'avance pas sur le reste

Merci,


A+ benjamin.
Modifié par bd.webdev (27 Feb 2009 - 15:02)

Pour commencer, le centrage avec les margin auto, ne fonctionne que si l'élément à un width. Ensuite le sélecteur .option dans le CSS ne ciblera PAS option1 et option2. Il faut les définir tous.

Donc :

<div class="global">
    <div class="title"></div>
    <div class="options">
        <div class="option1"></div>
        <div class="option2"></div>
    </div>
</div>

.global {width:100; margin:0 auto; text-align:center; overflow:hidden;}
.global .title {float:left; width:170px;}
.global .options {float:left; width:720px; margin:0 auto; text-align:center; overflow:hidden;}
.global .options .option1, .global .options .option2 {float:left; width:235px; margin:0 auto; text-align:center; cursor:pointer;}
.global .options .option1 div, .global .options .option2 div {float:left;}

Devrait fonctionner.

Le plus simple étant bien évidement de nommer tous tes div "option" plutôt que "option+num", ça ne changera pas grand chose).

Salut bd.webdev et bienvenue,

bd.webdev a écrit :
Je suppose que la question a déjà été abordée, en parcourant les forums je n'ai pas trouvé de réponse ciblant exactement mon problème.

J'essaie de centrer horizontalement des div dans un div positionné en left.

Le moteur de recherche de la section Apprendre donne pourtant des résultats intéressants .

bd.webdev a écrit :
Je rajoute donc un calque supplémentaire

Tiens ! Un heureux utilisateur de Dreamweaver ? Lire : Quelle est la différence entre un DIV et un «calque» ?

Sinon, au-delà de ta question, quelques remarques en vrac :
* l'élément DIV n'est pas le seul qui existe ! Voir http://openweb.eu.org/articles/respecter_semantique .

* en particulier à la place d'un class="title" on s'attendrait plutôt à un vrai titre.

sépare tes class dans ton css
Modifié par flattazor (27 Feb 2009 - 11:11)

Hello Laurie-Anne,

Laurie-Anne a écrit :
Le plus simple étant bien évidement de nommer tous tes div "option" plutôt que "option+num", ça ne changera pas grand chose).

Je suppose que l'id sert ensuite à un traitement JavaScript (vu le code on dirait bien une appli web). Je dirais plutôt qu'il faudrait commencer par utiliser le bon élément (pas DIV donc) et le cibler plus globalement.

Par exemple :

html:

<div class="global">
    <h2>titre</h2>
    <ul class="options">
        <li id="option1"></li>
        <li id="option2"></li>
    </ul>
</div>

css:

.global .options li { ... }

Modifié par Heyoan (27 Feb 2009 - 11:16)

@Laurie-Anne :

a écrit :

Ensuite le sélecteur .option dans le CSS ne ciblera PAS option1 et option2. Il faut les définir tous.

J'ai fait un edit entre temps pour corriger, je n'ai pas collé mon code exacte pour simplifier et j'avais fait une tite erreur

Je regarde ce que tu me donnes, fais quelques tests puis un retour, merci


@Heyoan :

a écrit :
Tiens ! Un heureux utilisateur de Dreamweaver langue ? Lire : Quelle est la différence entre un DIV et un «calque» ?

Raté, je n'utilise aucun wysiwyg j'ai horreur de ça, de plus j'ai fait un abus de langage et je suis au courant des différences.

a écrit :
* en particulier à la place d'un class="title" on s'attendrait plutôt à un vrai titre.

Alors comme dit plus haut, c'est un exemple de code pas le vrai, le nom du div n'est pas "title".

Je ne suis pas là pour troller, mais je ne suis pas venu non plus pour qu'on me prenne de haut, je n'ai pas de temps à perdre avec ça. Donc l'idéal est de sauter directement à :

a écrit :
Sinon, au-delà de ta question, quelques remarques en vrac :

le reste du message n'ayant que peu d'intérêt, merci. Après si je me trompe de sentiment je m'en excuse.


A+ benjamin.

@Heyoan:

Bonne idée les <li> je vais faire quelques test avec ça aussi

bd.webdev a écrit :
Je ne suis pas là pour troller, mais je ne suis pas venu non plus pour qu'on me prenne de haut, je n'ai pas de temps à perdre avec ça.

Est-ce que c'est "te prendre de haut" de te dire que ton code n'est pas sémantique ?

Si tu penses que oui tu t'es trompé de forum puisque Alsacréations est justement dédié aux Standards et à l'accessibilité.

C'est pour ça que je précisais que je me trompais peut-être de sentiment

Je suis assez actif sur d'autres fofo et je suis trop habitué à des messages qui visent d'abord à te descendre puis ensuite en deux lignes d'essayer de répondre à ta question, c'est pour ça que je tente de freiner ça desuite

Ce sont des exemples, je vais faire un effort pour éviter les ambiguités comme une classe "title" car c'est impossible avec ces quelques lignes de comprendre la sémantique globale de la page en question hein, et ma question ne porte pas la dessus de toute manière.

Après tu as raison, si vraiment j'étais ignorant tes remarques auraient pu m'aider à améliorer certaines choses, mais ce n'est pas le cas.

Je test les <li> en ligne pour voir, je reviens

Merci,

a+ benjamin.

bd.webdev a écrit :
Je suis assez actif sur d'autres fofo et je suis trop habitué à des messages qui visent d'abord à te descendre puis ensuite en deux lignes d'essayer de répondre à ta question, c'est pour ça que je tente de freiner ça desuite

C'est comme moi. Depuis que ma femme (brune) m'a quitté je me méfie des femmes (brunes). Mes amis me disent que je suis parano mais bien sûr je ne les crois pas !

bd.webdev a écrit :
C'est pour ça que je précisais que je me trompais peut-être de sentiment

No problemo.

Alors,

J'ai transformé le code pour m'approcher de ta proposition, j'ai donc :

<div class="global">
    <h3>libellé</h3>
    <ul class="options">
        <li id="option1" class="option">du contenu</li>
        <li id="option2" class="option">du contenu</li>
    </ul>
</div>

CSS :

.global {overflow:hidden; width:100%; height:25px; margin:0 auto; text-align:center; padding:0;}

.global h3 {float:left; padding:0 20px 0 20px; margin:0; font-size:14px; text-align:left;}
.global .options {float:left; width:720px; margin:0 auto; text-align:center; padding:0; list-style-type:none;}
.global .options .option {display:inline; float:left; width:235px; margin:0 auto; text-align:center; padding:0;}

J'obtiens donc le même résultat qu'avant en plus léger.
Maintenant comment centrer tout ça comme je le souhaitais au départ, sachant que tous les float:left; semblent obligatoires ici pour obtenir le bon résultat.


Merci.

Même après relecture je n'ai pas bien compris le résultat auquel tu voulais parvenir. Un petit schéma serait le bienvenu (notamment pour voir ce qui doit se passer avec un nombre important d'options et donc un retour à la ligne).

Sinon, comme je te disais plus haut, il est inutile de rajouter une class option à tes LI puisque tu peux les cibler directement avec .global .options li { ... }

En fait si, j'ai besoin d'identifier une classe pour les LI.

En fait je souhaite obtenir une liste de choix horizontale, similaire à un groupe radio, mais sans radio.

http://img9.imageshack.us/img9/9376/alsathread40232.th.jpg

Je voudrais la même chose mais "Vous souhaitez" à gauche, et les boutons de choix alignés au centre, qu'il y en ait 1, 2 ou 3.

Le className changera en fonction de l'option sélectionnée ou non, mais peu importe, tout est sur la classe option pour le moment.

Le nombre maximum de choix possible est de 3.

Tu vois donc que le problème est tout con

Le code de sortie exacte est :

<div id="fm-search">
	<div class="typetransac">	    
		<h3>Vous souhaitez</h3>
  		<ul class="buttons">						  		
			<li id="buy" class="button" onclick="">
		  		<a href="" onclick="return false;" onmousedown="" class="active">
					<span class="button-text">Acheter</span>
				</a>		  					  			
		  	</li>		  	
		  	<li id="rent" class="button" onclick="">
		  		<a href="" onclick="return false;" onmousedown="" class="active">
					<span class="button-text">Louer</span>
				</a>
		  	</li>		  		
	  	</ul>
  	</div>
        <! -- suite du code -->
</div>

et les styles associés sont maintenant :

#fm-search {
	position:absolute; top:212px; left:0;
	width:898px;
	margin:0 auto; text-align:center;
	color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal;
}
#fm-search .typetransac {
	overflow:hidden;
	width:100%; height:25px;
	margin:0 auto;	
	text-align:center;
}
#fm-search .typetransac h3 {float:left; padding:0 20px 0 20px; margin:0; font-size:14px; text-align:left;}
#fm-search .typetransac .buttons {float:left; width:720px; margin:0 auto; text-align:center; padding:0; list-style-type:none;}
#fm-search .typetransac .buttons .button {display:inline; float:left; width:235px; margin:0 auto; text-align:center; padding:0;}

/* Boutons type transaction */
#fm-search .active, #fm-search .inactive {
	display:block;
	cursor:hand;
	cursor:pointer;
	text-decoration:none;
	height:25px;
	width:235px;	
	margin:0 auto;		
}

#fm-search .active { background:transparent url('../../images/fm-search/fm-search-type-checked.png') no-repeat left top; }
#fm-search .inactive { background:transparent url('../../images/fm-search/fm-search-type-unchecked.png') no-repeat left top; }

#fm-search .active .button-text, #fm-search .inactive .button-text {
	font-size:14px; color:#000000; text-decoration:none; 
	display:block;	
	padding:0 0 0 30px;	
	text-align:left;
	line-height:1;
}

#fm-search .active .button-text {font-weight:bolder;}

C'est plus clair ?


A+ benjamin.

bd.webdev a écrit :
C'est plus clair ?

Yep ! Et du coup je ne vois aucune contre-indication à utiliser les correctifs d'inline-block proposés dans cet aritcle.

Oui mais ça pose un problème.

Cette solution ne fonctionne que si je passe le float des LI à none, dans Firefox (> 3) aucun problème, or IE ne tient pas compte de la largeur des LI si je ne conserve pas une valeur de float, donc ici float:left

En fait IE me centre bien le bouzin, mais il ne les affiche pas en ligne (côtes à côtes), je n'obtiens donc qu'une seule option centrée, les autres sont certainements dessous.
Modifié par bd.webdev (27 Feb 2009 - 14:00)

bd.webdev a écrit :
IE ne tient pas compte de la largeur des LI si je ne conserve pas une valeur de float, donc ici float:left

Ce qui est logique puisque le float implique un display: block

bd.webdev a écrit :
En fait IE me centre bien le bouzin, mais il ne les affiche pas en ligne (côtes à côtes), je n'obtiens donc qu'une seule option centrée, les autres sont certainements dessous.

Je ne vois pas pourquoi donc je te mets mon test :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
.global {
	height:25px; 
	margin:0 auto; 
}

.global h3 {
	float:left; 
	padding:0 20px 0 20px; 
	margin:0; 
	font-size: 1em; 
	text-align:left;
}

.global .options {
	float:left; 
	width:720px; 
	margin:0 auto; 
	padding:0; 
	list-style-type: none;
	background: blue;
	text-align: center;
}

.global .options li {
    /* Indispensable */
    display: -moz-inline-stack; /* Pour Firefox 1-2 */
    display: inline-block; /* Écrase la valeur précédente si le navigateur comprend inline-block */

    /* Cosmétique */
    background: yellow;
	width: 235px;
	border: 1px black solid;
	text-align: center;
}
</style>

<!--[if lte IE 7]>
<style type="text/css" media="screen">
.global .options li {
    /* Indispensable */
    display: inline;

    /* HasLayout -- peut faire doublon avec une autre propriété,
       mais autant l'indiquer pour être sûr que le bloc aura le layout. */
    zoom: 1;
}
</style>
<![endif]-->
</head>
<body>
<div class="global">
    <h3>libellé</h3>
    <ul class="options">
        <li id="option1"><a href="#">du contenu</a></li>
        <li id="option2"><a href="#">du contenu</a></li>
    </ul>
</div>
</body>
</html>

Oui j'ai testé avec un commentaire conditionnel et effectivement c'est ok.

Maintenant je dois réfléchir à comment intégrer ça, les balises style qui se baladent ça ne me plait pas. Je vais voir pour deux feuilles de styles (une propre à IE).

Jusqu'à maintenant je n'ai jamais eu besoin de les séparer, j'utilisais des Hack dans les styles directement.

C'est vraiment de l'énergie gaspillée encore une fois....


Merci pour ton aide,

A+ benjamin.

bd.webdev a écrit :
Merci pour ton aide,

You're welcome !