Magazine Humeur

Centrer un élément dont on ne connait pas la taille

Publié le 22 janvier 2009 par Ekilio

Bonjour les gens !

J'ai été confronté aujourd'hui au boulot à un petit problème : J'avais un tableau (qui affichait effectivement un tableau de données, pas pour mettre en forme mon design !) qui pouvait contenir un nombre variable de colonnes. Du fait de la variabilité du nombre et du contenu de ces colonnes, je ne pouvais pas utiliser les astuces classiques pour centrer l'élément, puisque je ne connaissais pas sa largeur.

Donc j'ai utilisé un petit script en javascript tout simple. Je suis passé par des marges négatives (les marges automatiques n'étant pas recalculées autrement), et j'ai utilisé javascript pour recalculer mes marges en fonction de la taille réelle de l'élément :

<script type="text/javascript">
var largeur = $('grilleProgramme').clientWidth;
var marge = Math.floor(((largeur - 899) / 2) * -1);
$('grilleProgramme').style.marginLeft = marge + 'px';
</script>

Pour rappel, j'utilise prototype, donc $() corresponds à document.getElementByID(). Le 899 dans le script corresponds à la taille du conteneur de ma table. Le but est donc de récupérer la taille de la table "grilleProgramme", de lui enlever la taille qui est de toutes façons dans le design de base, et de diviser par deux ce qu'il reste. Et enfin, de décaler du nombre obtenu, vers la gauche.

Voila voila

:)


Retour à La Une de Logo Paperblog