[Résolu] Centrer horizontalement une div (de taille dynamique) ..

Bonjour

alors voilà, j'ai une première div "bienvenue" dans laquelle j'ai une sorte de menu (seconde div) composé de boutons ( une div par bouton ) permettant d'intéragir sur l'affichage du site.

suivant l'affichage choisi ces boutons apparaissent ou disparaissent et changent d'autant la taille de la div menu. Je voudrais que cette div se centre horizontalement dans la div bienvenue, et surtout dynamiquement en fonction des divs qu'elle comprend.

Je crois que j'ai tout essayé avec les margin left/right :auto; et width en % etc...

I need help !

CSS

#bienvenue {float: left; width: 660px; padding : 0 0 0 10px; margin: 0; color:#000; line-height: 22px; text-align: center; }

#menu_affichage{float:left; width: 500px; margin-top:28px; margin-left:auto; margin-right:auto;}
#btn_1{float: left; width:92px; margin-right:1px;}
#btn_2{float:left; width:92px; margin-right:1px;}
#btn_texte {float:left;width:143px;margin-right:1px;}
#btn_moteur {float:left;width:143px;margin-right:1px;}

HTML

<div id="bienvenue">
<h1>blalbllalaalalal</h1>
Blalalalalala<br>

      <div id="menu_affichage">
<div id="btn_texte">
<a href=""img src="images/bouton_texte></a></div>
			
<div id="btn_moteur">
<a href="img src="images/bouton_moteur"></a></div>

<div id="btn_1">
 <a href="img src="images/bouton_1"></a>
</div>

<div id="btn_2">
<a href="img src="images/bouton_2"></a> 
</div>
</div>
</div>

Modifié par anatok (21 Jul 2009 - 15:25)

petite précision les boutons apparaissent via un script java, je pense pas que le prob vienne de là, vu que meme desactivé la div menu_affichage n'est pas centrée dans la div bienvenue.

Ceci devrait suffit pour centrer ton menu dans la div bienvenue :

#menu_affichage {
    margin: 0px auto;
    width:500px;
}

Et à supposer que le div parent ai un width supérieur.

Même avec l'intervention du javascript le DOM devrait s'adapter.
Modifié par moust (17 Jul 2009 - 15:23)

alors déjà merci de vous penser sur mon cas.

Gc,

je suis en train de tenter quelque chose avec ta méthode . Mes divs sont bien alignées horizontalement à l'arrivée de la page, disparaissent via javascript au body onload et au moment de leur réactivation elles apparaissent empilées comme sous le coup d'un display:block;. sur ff3 et ie7

Toujours bien centrées dans #bienvenue ceci dit Est-ce que je pourrai forcer une hauteur max à #menu_affichage qui forcerait les boutons à se repositionner les uns à coté des autres lorsqu'ils réapparaisssent.

pourquoi des divs ?
j'ai besoin et que le bouton soit dans une div pour le faire apparaitre/disparaitre via javascript et du ahref pour faire l'appel javascript.

HTML

<div id="btn_moteur">
<a href="javascript:afficheId('moteur_location');cacheId('btn_moteur')" onMouseOver="preview4.src=image7.src" onMouseOut="preview4.src=image8.src"><img src="images/bienvenue_btn_mot_a.png" alt="afficher le moteur budget" name="preview4"></a>
</div>

Je crois pas qu'il y'ait moyen de donner un id à un li n'est-ce pas ? Et c'est un sous-menu d'affichage du contenu, j'ai un autre menu de navigaiton dans le site en <ul><li>

re et bonsoir,

j'imagine que ton script se base sur un display:none/block; pour cacher/montrer tes elements . , si on met un display quelconque dans le css , le js lui de son coté va le redefinir , donc il faut aussi penser a gerer le syle qui convient via js .

un id est applicable a quasiment toutes les balises d'une page (html , head , style , link , meta , en principe pas "stylable" ne devrait pas recevoir de class ni d'id , body reste discutable et a éviter pour une compatibilité avec des navigateur dinosaures ... si l'on a doute ou une hesitation .
Li ? .. aucun souci , justement ça sert a ça (le id ), marquer ou cibler precisement un conteneur .

Maintenant , pour aller plus loin , il te faudrait mettre en ligne ta page ou nous produire un code un peu plus complet . (doctype, html , css et js associer a ton menu/souci.)

GC

Merci pour toutes les infos GC.

j'ai à peu près tout tenté dans la limite de mes connaissances pour bidouiller le javascript et lui mettre un display"inline" au réaffichage mais rien ni fait..

je laisse tomber pour l'instant je reste en float:left; avec deux boutons fixes qui sont repoussés vers la droite à l'affichage des deux autres. Le résultat est plutot propre.

En tout cas ça m'a permis d'apprendre des trucs donc tout n'est pas perdu