Difficulté avec le positionnement des blocs en absolute [Fait]

**WA007** · 22/11/2007, 01h54

Écoutez voila mon problème,

Je vien de me mettre au CSS, et jessai d'adapter un design parfaitement.
Voila que tout fonctionne sauf un truc !

Je vous laisse voir ce qui louche, Le footer se met par dessus mon millieu

Jessai de mettre le footer toujours aligner avec le millieu !

Voici mon code complet

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/stylev1.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<div style="position:absolute; left:0px; top:0px; width:1000px; height:700px;">
    <div style="position:absolute; left:0px; top:0px; width:1000px; height:147px;">
        <img id="datexcam_01" src="images/datexcam_01.gif" width="1000" height="147" alt="" />    </div>
    <div style="position:absolute; left:0px; top:147px; width:251px; height:186px;">
        <img id="datexcam_02" src="images/datexcam_02.gif" width="251" height="186" alt="" />
    </div>
    <div style="position:absolute; left:251px; top:147px; width:748px; height:186px;">
        <img id="datexcam_03" src="images/datexcam_03.gif" width="748" height="186" alt="" />
    </div>
    <div style="position:absolute; left:999px; top:147px; width:1px; height:186px;">
        <img id="datexcam_04" src="images/datexcam_04.gif" width="1" height="186" alt="" />
    </div>
    <div style="background-image: url(images/datexcam_05.gif); position:absolute; left:0px; top:333px; width:1000px;">
 
    </div>
    <div id="interface" style="position:absolute; left:0px; top:512px; width:1000px; height:188px;">
        <img id="datexcam_06" src="images/datexcam_06.gif" width="1000" height="188" alt="" />    </div>
</div>
 
</body>
</html>

CSS

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
 
 
body
{
   width: 760px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-color:#252525;
}
#interface
{
    left:0px;
    top:0px;
    width:1000px;
    height:700px;
    position: absolute;
}

Ça m'aiderais bcp un petit coup dmain

Merci !!!!

Merci de m'aidez j'ai meme pas eu encore une réponce

**Kerod** · 23/11/2007, 19h14

C'est à cause de tout tes position mis en absolute. Des mauvaises tailles ce qui fait que certains blocs se chevauchent.

Il faut revoir le positionnement en gros.

**WA007** · 24/11/2007, 17h44

Oauis mais c'est tout images ready qu"il a cree ce code generer automatiquement !

Sinon yaurais un tutorial que jpourrais lire pour justement placer ca comme il ce doit !

Merci d'avance !