CSS - centrer Div taille aléatoire [Résolu/Fermé]

Signaler
Messages postés
139
Date d'inscription
jeudi 12 février 2009
Statut
Membre
Dernière intervention
16 février 2012
-
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
-
Bonjour,

voila un problème ce pose... comment centrer une div quand on ne connait pas à l'avance sa taille. (la div contient un menu dont la taille diffère selon le type de l'utilisateur qui se connecte (administrateur, simple utilisateur...)
si quelqu'un a une idée...


6 réponses

Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
121
Salut,

Soit la solution de magicshark, ou alors...
Supposons que tu aies ceci :

<div id="menu_contenant">
	<div id="menu">
		...
	</div>
</div>

Tu peux donner un CSS qui ressemble à :

#menu_contenant {
width:400px;
}

#menu_contenant #menu {
margin:0 auto;
width:200px;
}


En gros, la clé c'est le margin:0 auto; qui fait un positionnement centré. Dans certains cas, un text-align:center; sur le #menu_contenant peut aider aussi, mais c'est secondaire.

Après, le #menu peut avoir la largeur qu'il veut, tant que ça n'excède pas celle du contenant.

J'espère que ça t'aide !
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 63550 internautes nous ont dit merci ce mois-ci

Messages postés
399
Date d'inscription
mardi 27 juillet 2010
Statut
Membre
Dernière intervention
6 mai 2014
16
je vois bien une solution mais c'est pas la meilleur suremant faire des div dynamique qui s'appelle soit user,admin ... et faire les taille en css
Messages postés
139
Date d'inscription
jeudi 12 février 2009
Statut
Membre
Dernière intervention
16 février 2012
3
Bon j'ai trouvé une "feinte" à mon problème qui fonctionne sous Chrome et Firefox mais pas sous IE :s ...


<?php 
if(verifAccesAdmin($_SESSION['idUnique']) || verifAccesCadre($_SESSION['idUnique'])){
?>
<body onload="javascript:document.getElementById('menu').style.marginLeft='-109px';" />
<?php 
}else{
?>
<body onload="javascript:document.getElementById('menu').style.marginLeft='-42px';" />
<?php }?>


Si quelqu'un a une idée...
Messages postés
139
Date d'inscription
jeudi 12 février 2009
Statut
Membre
Dernière intervention
16 février 2012
3
Problème résolu !!!
ajout dans css du body

 text-align: center;

et
ajout de par exemple pour que ceci s'éxécute uniquement ac IE

<!--[if IE]>
<body onload="javascript:document.getElementById('menu').style.marginLeft='-312px';" />
<![endif]-->
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
121
Ouais... Moi je te conseillerais d'utiliser un attribut style="..." dans la balise au lieu de recourir au Javascript. Ne serait-ce que parce qu'il y a quand même un bon nombre d'utilisateurs qui désactivent carrément Javascript sur leurs navigateurs, se croyant ainsi plus en sécurité... Et personnellement je déteste à mourir la fonction onload(), ça me donne de l'urticaire et je ne m'en sers qu'en dernier recours...

Ultimement c'est ton choix ! ;-)

Demande à Falcon le bouvier bernois!

Ouai il est cool Falcon je le connais