Discussion :

[Palca]

Bonjour,
je dois créer une page xhtml/css à partir d'une image (donc dimensions fixes), que j'aimerais centrer dans la page, pour cela j'utilise ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
#page
{
  top: 5px;
  width: 838px;
  height: 896px;
  margin: auto;
  background: url("images/background.jpg") no-repeat;
}
 
#div-topall
{
  border: 1px solid red;
  position: absolute;
  top: 150px;
  left : 50%;
  margin-left: -410px;
  width: 816px;
  height: 138px;
  overflow: auto;
}
 
#div-topleft
{
  border: 1px solid red;
  position: absolute;
  top: 150px;
  left : 50%;
  margin-left: -410px;
  width: 480px;
  height: 138px;
  overflow: auto;
}
 
#div-topright
{
  border: 1px solid blue;
  position: absolute;
  top: 150px;
  left : 50%;
  margin-left: 74px;
  width: 330px;
  height: 138px;
  overflow: auto;
}

J'ai donc mon image centrée et mes divs où insérer le contenu parfaitement placés, mais mon problème intervient lorsque la largeur de l'écran est inférieure à celle de l'image : utilisant le pourcentage pour positionner mes divs, je me retrouve à avoir le "100%" de ma page inférieur à la largeur de mon image, d'où décalage des divs.

J'aimerais donc savoir s'il existe une autre solution, sachant que je suis de toute façon contraint d'utiliser un positionnement absolu pour faire correspondre mes blocs de contenu avec le fond de l'image.

Merci d'avance.

[Erwan31]

Bonjour,
tout d'abord le top: 5px; de #page ne sera pas appliqué puisque ton bloc n'est pas positionné (absolute, fixed ou relative).
Pour quoi mettre des overflow auto à tout tes div?
Le positionnement absolue est le dernier choix à faire puisqu'il sort tout du flux normal et entraine d'autre problèmes au niveau du texte...

Tu aurais un exemple en ligne ou en image?

[Palca]

Le top pour le div de page c'est un résidu de test, aucune importance.
Les overflow c'est pour ne pas que le contenu dépasse du cadre (je dois respecter l'image de fond), là encore aucune importance vis-à-vis de mon problème.

Je sais que le positionnement absolu n'est pas évident à manipuler mais je n'ai pas le choix, comme je l'ai indiqué dans mon post mes divs doivent se positionner suivant l'image de fond.

Désolé je n'ai pas d'exemple en ligne, je teste en local là.

Enfin au final ma seule question c'est de savoir comment centrer un div sans utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
left: 50%;
margin-left: ...;

Si j'arrive à faire ça je n'aurai plus de problème.

[Erwan31]

A priori, pas de solution à ton problème si tu veux conserver le positionnement absolue: soit tu centres via des marge latéral auto (margin: 0 auto) des blocs en flux normal (position static ou relative) soit
tu utilises ta méthode qui est problématique si tu cibles aussi du 800X600 mais aussi en cas de diminution du viewport (zone d'affichage).

Le mieux serait que tu fournisses au minimum la totalité du code HTML et CSS
et que tu expliques ce que tu veux obtenir ;-)

[didou518]

Bonjour Palca, je me retrouve un peu dans le même cas que toi :
j'ai des divs a position : absolute pour permettre une superposition et j'aimerais centrer le tout dans ma page.
J'étais effectivement parti sur la même méthode que toi, mais lorsque l'on réduit le viewport toutes les parties de gauche disparaissent sans pouvoir les afficher.
A droite on a bien par contre le scrollbar qui permet de récupérer le reste.
Voilà si tu trouves une solution je suis preneur. Si j'en trouves une je te dirais ça.

[didou518]

Voilà si tu cherches toujours j'ai trouvé une solution correcte :
Tu met tous tes divs à position absolute dans un div "conteneur" et comme attributs tu lui colle :

position : relative;
width : XXXpx;
margin : 0 auto;

Le seul inconvénient étant d'avoir la taille de tes divs pour remplir le width mais visiblement tu travaille en tailles fixées.
En espérant que ça t'aide.