Bonjour IamFred,
Ce n'est pas que tu n'avais pas bien expliqué, c'est plutôt que tu buttes sur un aspect de CSS2 qui déroute souvent
C'est la notion de
bloc conteneur initial et de référent pour un élément positionné.
Tu sais déjà que tu peux positionner librement un élément à l'aide de la position absolue, en indiquant ses "coordonnées" à l'aide de top, left, etc. Il est alors "sorti du flux", c'est à dire presque totalement libéré des contraintes imposées par les éléments dans lequel il est placé : tu peux le mettre où tu veux à l'écran (ou même en dehors de celui-ci).
Mais ses coordonnées dans quoi ?
Un élément en position absolue se "positionne" en fonction de ses coordonnées dans une certaine zone d'affichage qui lui sert de référence. Il y a deux cas possibles :
- ton élément est placé dans un élément parent (direct ou indirect) qui est lui-même positionné (position:absolute, position:relative, position:fixed, peu importe) : c'est la zone d'affichage de ce parent positionné qui va servir de référence. C'est le seul cas où le parent d'un élément positionné a une influence sur celui-ci.
- ton élément n'a pas de parent positionné : il est complètement sorti du flux, et la zone de référence va être le
bloc conteneur initial de la page, c'est à dire, en simplifiant largement, l'écran du navigateur.
(ça va, jusque là ?
Continuons, alors.)
Tes deux images en position absolue sont dans le deuxième cas (elles n'ont pas de parent positionné) : elles vont se placer selon les valeurs de
top et de
left par rapport au conteneur initial, et donc par rapport à la fenêtre d'affichage du navigateur. Autrement-dit, le centrage que tu appliques à
body à l'aide de ses marges ne peut pas avoir d'influence sur ces images : elles ont été sorties du <body>.
Pour visualiser ceci, utilise cet version un peu enrichie de ton exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
[b]html {
background-color: red;
}[/b]
body {
width: 760px;
margin: auto;
[b]background-color: yellow;[/b]
}
#en_tete {
width: 760px;
}
.logo {
position:absolute;
left:0px;
}
.photo {
position:absolute;
left: 352px;
}
-->
</style>
</head>
<body>
<div id="en_tete">
<div class="logo"><img src="logo.png" alt="logo" /></div>
<div class="photo"><img src="photo.png" alt="photo" /></div>
</div>
[b]<p>Contenu en flux de body</p>[/b]
</body>
</html>
J'ai ajouté un contenu non positionné et une couleur d'arrière plan à ton élément body, pour que le centrage apparaisse.
J'ai ajouté également une couleur d'arrière-plan à l'élément
<html>, pour que le dernier point important se voit bien :
ce n'est pas <body> qui crée le conteneur initial. Dans le détail, ce n'est pas non plus <html>, en fait, mais une boîté créée par le navigateur de manière à contenir l'élément <html> qui est l'élément racine du document (Là, CSS2 devient assez tortueuse).
Solution ?
Simplement dire au navigateur que tes éléments positionnés ne doivent pas prendre le conteneur initial comme référence, mais plutôt le <body> centré :
body {
width: 760px;
margin: auto;
[b]position: relative;[/b]
}
Le fait d'avoir une position relative ne change en rien la place d'un élément, mais cela lui donne la capacité d'être le référent pour ses enfants positionnés...
Modifié par Laurent Denis (13 Aug 2005 - 06:36)
.
un nombre)px;" mais ça empêche de centrer ma page... 
!! C'est vraiment gentil d'avoir pris le temps de m'aider comme ça !
