Bonjour aussi,
jansoz a écrit :
Sur le fond, c'est le même, et les résultats des deux codes sont presque identiques; le dernier résout le problème que j'avais posté. Mais est-ce quelqu'un peut m'expliquer les technicités de ces deux codes?
Humm... alors on va dire ça comme ça:
Le premier utilise une technique «classique» pour le positionnement horizontal
et vertical d'un bloc de dimensions (hauteur et largeur) fixes en pixels. Cette technique passe par l'utilisation de dimensions fixes, donc, et du positionnement absolu. On utilise les propriétés de coordonnées
left et
top avec la valeur 50%, ce qui place le coin haut gauche du bloc pile au centre de la page. Puis on fait remonter le bloc de la moitié de sa hauteur avec un
margin-top négatif (équivalent à la moitié de la hauteur du bloc), et un
margin-left négatif (équivalent à la moitié de la largeur du bloc. Typiquement, cette technique ressemble donc à ceci:
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 300px;
margin-top: -150px; /* moitié de la hauteur */
margin-left: -250px; /* moitié de la largeur */
Cette technique est mauvaise, il ne faut pas l'employer. Il pose de gros problèmes notamment lorsqu'on travaille avec un conteneur de taille importante (dans mon exemple c'est 500x300, mais souvent on voudra faire un conteneur de taille plus respectable, par exemple 900px de large et 600px de haut). Si la zone de visualisation du navigateur est moins grande que le bloc, les parties qui dépassent ou du moins certaines d'entre elles ne seront pas visibles du tout, à cause du positionnement absolu.
Si cela ne te semble pas clair, il faut de toute urgence
réviser les bases du positionnement en CSS, à partir du tutoriel proposé sur Alsacréations et des trois articles proposés par Openweb, notamment.
Enfin,
le code que tu cites en premier est une modification barbare de cette technique. On peut y noter:
- une utilisation du positionnement fixe à la place du positionnement absolu (pas compris pourquoi, sauf si le but était de rendre une mauvaise technique pire encore...), et l'utilisation du positionnement relatif (?) à priori pour IE6;
- une valeur pour
top de 23% (??) et une marge supérieure en pourcentages (???).
Ces modifications me semblent très maladroites, et j'aurais du mal à en expliquer l'utilité...
Quant au deuxième code que tu présentes, il correspond uniquement à un centrage horizontal. On utilise la valeur "auto" pour placer le conteneur au centre de son parent (à priori l'élément BODY). À partir du moment où un bloc a une largeur déterminée (
width: quelquechose), il peut être placé:
- à gauche avec un
margin-left: 0; margin-right: auto;
- à droite avec un
margin-left: auto; margin-right: 0;
- au centre avec un
margin-left: auto; margin-right: auto.
Cela correspond à la technique utilisée dans la toute première partie de ce tutoriel:
http://web.covertprestige.info/test/39-centrage-bloc-vertical-horizontal.html
Tutoriel que je t'indiquais dans cette intervention que je t'invite à relire à l'occasion:
http://forum.alsacreations.com/topic-4-37676-1.html#p271667
PS: pourrais-tu corriger ton message ci-dessus pour faire ressortir correctement le code cité? Il s'agit d'utiliser les balises [ code] et [ /code] (sans espace après le crochet ouvrant). Merci d'avance.
Modifié par Florent V. (26 Oct 2008 - 01:56)
