Page 1 sur 1
Centrage d'un élément en position absolue ... [Résolu]
Publié : 24 nov. 2006, 19:44
par 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 :
... 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.
Publié : 25 nov. 2006, 02:47
par 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)
Re: Centrage d'un élément en position absolue ou vice-vers
Publié : 25 nov. 2006, 05:33
par Alan
Nicosmos a écrit :
> 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)
Publié : 25 nov. 2006, 09:14
par Nicosmos
Mongo Bob a écrit :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 a écrit :Nicosmos a écrit :
> 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
).
Publié : 25 nov. 2006, 10:54
par 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.
Publié : 25 nov. 2006, 18:44
par Nicosmos
OK j'ai vu ton site, overflow:hidden, ça marche.
Oui désolé, j'ai utilisé la technique de Alan, parceque
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