Centrage d'un élément en position absolue ... [Résolu]

[Nicosmos]

Hello

Je n'arrive pas à centrer le bloc "iTout" de cette page : http://nicosmos66.free.fr/vrac/ipodpro/.

Ou plutôt si, j'arrive à le centrer avec :

Code : Tout sélectionner

margin-left: auto;
margin-right: auto;

... mais sans le "position: absolute;" qui me permet que le haut et le bas du bloc sois collés au haut et au bas de la page ...



Donc, double question :
> Comment centrer un élément qui est en position: absolute; ?
> Ou comment remplacer position: absolute; pour toucher les bords de la page un élément centré avec les margin ?



Les CSS

Voilà, et merci d'avance
Nico.

[Mongo Bob]

Ca marche aussi pour un bloc en position relative, tu la fais comme ça, ta propriété de "iTout" et ça va centrer (vois les 2 dernières lignes) :

Code : Tout sélectionner

#iTout {
     background: #FFFFFF;
     background-image: url(images/fond.png);
     width: 680px;
     margin-top: 0px;
     margin-bottom: 0px;
     position: absolute;
     left: 50%;
     margin-left: -340px;
}

Décalage gauche de 50% + une marge gauche négative de la moitié de la largeur du bloc.
Et merci Raphaël Goetter (bouquin CSS2)

[Alan]

> Ou comment remplacer position: absolute; pour toucher les bords de la page un élément centré avec les margin ?

Salut Nicomos,

Il s'agit d'une fusion des marges (avec la marge supérieur du titre h1).

Il est possible d'éviter cette fusion en ajoutant en ajoutant par exemple overflow: hidden; à #iTout, ou encore un minimum de padding supérieur. Également possible de remplacer la marge supérieur du H1 par du padding.

La positionnement absolu permet effectivement aussi d'empêcher cette fusion, ceci dit cela revient un peu à utiliser un marteau-pilon pour écraser une mouche. (le fait de créer un nouveau contexte de formatage bloc empêche la fusion)

[Nicosmos]

Ca marche aussi pour un bloc en position relative, tu la fais comme ça, ta propriété de "iTout" et ça va centrer (vois les 2 dernières lignes) :

Code : Tout sélectionner

#iTout {
     background: #FFFFFF;
     background-image: url(images/fond.png);
     width: 680px;
     margin-top: 0px;
     margin-bottom: 0px;
     position: absolute;
     left: 50%;
     margin-left: -340px;
}

Décalage gauche de 50% + une marge gauche négative de la moitié de la largeur du bloc.
Et merci Raphaël Goetter (bouquin CSS2)

> Ou comment remplacer position: absolute; pour toucher les bords de la page un élément centré avec les margin ?

Salut Nicomos,

Il s'agit d'une fusion des marges (avec la marge supérieur du titre h1).

Il est possible d'éviter cette fusion en ajoutant en ajoutant par exemple overflow: hidden; à #iTout, ou encore un minimum de padding supérieur. Également possible de remplacer la marge supérieur du H1 par du padding.

La positionnement absolu permet effectivement aussi d'empêcher cette fusion, ceci dit cela revient un peu à utiliser un marteau-pilon pour écraser une mouche. (le fait de créer un nouveau contexte de formatage bloc empêche la fusion)

Ok ! Merci beaucoup !
Je vais tester les deux solutions, et je verrais ce qui me va le mieux (et nottament celle qui marche le mieux avec IE ).

[Mongo Bob]

Ben, dis-nous quoi avant de mettre "Résolu", parce que je me suis demandé après s'il y avait pas un pb avec "ma" soluce avec l'affichage IE, ce qui me gêne là, c'est que #Itout contient d'autres blocs et les paramètres de ces blocs en positionnement etc... pourraient interférer, et j'ai eu un comportement zarbi de IE sur mon site en essayant après de centrer ainsi un bloc qui en contenait un autre.
Auquel cas, le ou les blocs contenus devraient peut-être aussi être positionnés en absolu, bref faudrait que je voie ça...



OK j'ai vu ton site, overflow:hidden, ça marche.

[Nicosmos]

OK j'ai vu ton site, overflow:hidden, ça marche.

Oui désolé, j'ai utilisé la technique de Alan, parceque

Code : Tout sélectionner

left: 50%;
margin-left: -340px; 

j'aurais bien vite oublié pourquoi j'avais mis çà

parce que je me suis demandé après s'il y avait pas un pb avec "ma" soluce avec l'affichage IE

Apparemment, les deux marchaient parfaitement sous IE