Bonjour à tous.
J'expose rapidement mon problème, j'ai une image de fond de taille fixe (dans un div englobant de taille fixe) et je souhaite placer avec précison des div transparents par dessus. J'ai donc pensé à position absolute. Seulement la taille du fond étant fixe, sur des grandes résolutions il y aura des (ou une) marge de chaque côtés (ou un seul), si je laisse la position absolute les div se placent par rapport à la page et non pas au div englobant, donc mes divs sont tout décalés.
Une autre solution est de laisser le body à gauche, mais avoir le site tout à gauche et une marge à droite est assez moche.
Solution que j'ai adoptée pour IE vu que mon idée avec position relative marchait pas du tout.
Je croyais que c'était bon pour firefox avec position relative seulement j'ai plusieurs div à placer, et le second se place relativement en tenant compte de la position du div précédent (j'ai dû retirer la largeur du premier div à la position top du second etc...). J'ai quand même réussi à faire fonctionner le tout en compensant les positions, même si je suppose que c'est très bancal...
Seulement j'ai des liens "ancres" dans la page, et un clic décale tous mes div en dehors de l'écran vers le haut.
Y'aurait-il une solution plus propre pour placer tous mes divs relativement à mon div englobant et pas autre chose ?
et quitte à rêver, un moyen de faire fonctionner ça sous IE ?
des extraits :
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
45
46
47
48
49
50
51 div#fond { width:1000px; height:650px; /position:absolute; /left:0px; overflow:hidden; margin:auto !important; background-image:url(../img/fond.jpg); } div#menu { position:relative !important; position:absolute; top:162px; left:92px; width:835px; height:34px; overflow:hidden; vertical-align:middle; margin: 0px; } div#principal { position:relative !important; position:absolute; top:186px !important; top:220px; left:90px !important; width:385px; height:430px; overflow:auto; margin: 0px; } div#actu { position:relative !important; position:absolute; top:-244px !important; top:220px; left:540px; width:385px; height:250px; overflow:auto; margin: 0px; }
Partager