[XHTML] Problème de superposition en CSS

**julienlepage** · 18/05/2007, 11h46

Bonjour à tous !

Je viens de me mettre aux feuilles de style et au XHTML
strict, et j'ai un petit soucis...

Comme vous pouvez le constater à l'adresse suivante :
http://www.alternative145.com/test/indextest.php
le titre "Bienvenue sur ALTERNATIVE145.COM" est à
moitié bouffé par un petit rectangle blanc.
Bon, le rectangle blanc, il sert : il masque le fond bleu
du cadre principal à cet endroit-là.
Mais ce que je ne comprend pas, c'est que j'appelle
le titre après le cadre, pourtant, il s'affiche en dessous.

Je me suis dit que c'était un problème de couche.
Donc j'ai changé le z-index. D'abord du titre seul en
mettant une grande valeur (genre 100), puis en en
mettant aussi une petite au cadre blanc, mais rien à
faire !

Je fais donc appel à vos lumières en espérant que
l'un d'entre vous auras une solution !

Merci d'avance !

Je te met le code de la page :
(le cadre blanc qui m'embête est le premier des "Deux
minis cadres blancs")

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<!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" xml:lang="fr" lang="fr">
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <meta http-equiv="Content-Language" content="fr" />
 
          <title>ALTERNATIVE 145 - Site personnel de Julien Lepage</title>
 
          <!-- MISE EN PAGE -->
          <style type="text/css">
               body {                     /* Page */
                    background-color:#FFFCDC; font-size:0px;
                    font-family: Verdana, "Lucida Grande", Lucida, Tahoma, "Trebuchet MS", Arial, Geneva, Helvetica, sans-serif;
               }
               .corps {                /* Corps de la page */
                    background-color:#CAD6FF;
                    position:absolute;
                    width:692px;
                    top:164px;
                    left:64px;
                    height:500px;
               }
               .titre {
                    position:absolute;
                    left:80px;
                    top:-40px;
                    width:350px;
                    height:60px;
                    font-size:16px;
                    font-weight:bold;
                    text-align:center;
                    line-height:30px;
               }
               .cadre {                /* Grand cadre blanc */
                    background-color:#FFFFFF;
                    position:absolute;
                    width:440px;
                    top:236px;
                    left:260px;
                    height:420px;
                    padding-right:20px;
                    padding-left:20px;
                    font-size:14px;
                    line-height:20px;
                    text-align:justify;
                    overflow:auto;
               }
               A:link {text-decoration: none ; color=#000000}
               A:visited {text-decoration: none ; color=#000000}
               A:active {text-decoration: none ; color=#000000}
               A:hover {text-decoration: underline ; color=#000000}
          </style>
     </head>
     <body link="#000000" vlink="#000000" alink="#000000">
          <!-- Trois images du haut -->
          <div style="position:absolute; left:50px;  top:10px; "><img src="/images/bhg.png"  alt="" width="260" height="154" /></div>
          <div style="position:absolute; left:310px; top:10px; "><img src="/images/bh.png"   alt="" width="200" height="154" /></div>
          <div style="position:absolute; left:510px; top:10px; "><img src="/images/bhd.png"  alt="" width="260" height="154" /></div>
          <!-- Deux images des côtés -->
          <div style="position:absolute; left:50px;  top:164px;"><img src="/images/cote.png" alt="" width="14"  height="500" /></div>
          <div style="position:absolute; left:756px; top:164px;"><img src="/images/cote.png" alt="" width="14"  height="500" /></div>
          <!-- Trois images du bas -->
          <div style="position:absolute; left:50px;  top:664px; "><img src="/images/bbg.png"  alt="" width="260" height="131" /></div>
          <div style="position:absolute; left:310px; top:664px; "><img src="/images/bb.png"   alt="" width="200" height="131" /></div>
          <div style="position:absolute; left:510px; top:664px; "><img src="/images/bbd.png"  alt="" width="260" height="131" /></div>
          <!-- Logo -->
          <div style="position:absolute; left:165px; top:65px;"><a href="/index.php"><img src="/images/logo.png" alt="" width="468" height="60" border="0" /></a></div>
          <!-- Fond bleu -->
          <div class="corps"></div>
          <!-- Trois images du haut du cadre violet -->
          <div style="position:absolute; left:250px;  top:134px; "><img src="/images/ahg.png"  alt="" width="175" height="102" /></div>
          <div style="position:absolute; left:425px;  top:134px; "><img src="/images/ahb.png"  alt="" width="150" height="11" /></div>
          <div style="position:absolute; left:575px;  top:134px; "><img src="/images/ahd.png"  alt="" width="175" height="102" /></div>
          <!-- Deux images des côtés -->
          <div style="position:absolute; left:250px;  top:236px; "><img src="/images/acote.png"  alt="" width="9" height="420" /></div>
          <div style="position:absolute; left:741px;  top:236px; "><img src="/images/acote.png"  alt="" width="9" height="420" /></div>
          <!-- Trois images du bas du cadre violet -->
          <div style="position:absolute; left:250px;  top:656px; "><img src="/images/abg.png"  alt="" width="175" height="102" /></div>
          <div style="position:absolute; left:425px;  top:747px; "><img src="/images/ahb.png"  alt="" width="150" height="11" /></div>
          <div style="position:absolute; left:575px;  top:656px; "><img src="/images/abd.png"  alt="" width="175" height="102" /></div>
          <!-- Deux minis cadres blancs -->
          <div style="background-color:#FFFFFF; position:absolute; left:425px; top:146px; width:150px; height:90px; "></div>
          <div style="background-color:#FFFFFF; position:absolute; left:425px; top:656px; width:150px; height:90px; "></div>
 
          <!-- Grand cadre blanc -->
          <div class="cadre">
               <div class="titre">
                    BIENVENUE SUR<br/>
                    <font color="#FF3333">ALTERNATIVE</font><font color="#0044FF">145</font><font color="#009900">.COM</font>
               </div>
               Test.
          </div>
 
          <!-- Copyright -->
          <div style="position:absolute; left:440px; top:765px; font-size:10px">- Julien Lepage 2007 -</div>
 
     </body>
</html>

**Deallyra** · 18/05/2007, 11h48

Je ne dirais que ça pour commencer...

**Deallyra** · 18/05/2007, 11h50

Ben non en fait, je dirais plus...
Euh... le bienvenue... Il est où exactement?
Sinon, centres ta page...

**julienlepage** · 18/05/2007, 11h53

Oups ! Désolé !

mon Bienvenue, se trouve dans le corps
présenté comme suit :

Code :

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

1
2
3
4
5
 
<div class="titre">
BIENVENUE SUR<br/>
<font color="#FF3333">ALTERNATIVE</font><font color="#0044FF">145</font><font color="#009900">.COM</font>
</div>

**Deallyra** · 18/05/2007, 11h55

Tu sais, les balises... c'était pour que tu édit ton premier post

**Deallyra** · 18/05/2007, 11h56

pssst!
sur ta page... le bienvenue... pas dans ton code

**julienlepage** · 18/05/2007, 11h58

Aaaah !

Eh bien, il se trouve à cette adresse :
http://www.alternative145.com/test/indextest.php

On le voit, à moitié caché par le bandeau blanc en
haut de la page. Juste au dessus de "test".

**Deallyra** · 18/05/2007, 12h02

XD... l'adresse tu l'avais déjà donnée seulement, il n'est pas à moitié bouffé mais il l'est entièrement donc pour savoir où il se trouve...

**julienlepage** · 18/05/2007, 12h05

Chez moi je le vois à moitié caché, que ce soit
sous Firefox ou sous IE.
Agrandie la taille de la police, tu le verras dépasser.

Enfin sinon, il est centré dans la zone blanche juste
au dessus du mot "Test".

Et le soucis est que cette zone de texte devrait être
au dessus de la zone blanche, et pas en dessous
comme c'est le cas ici.
Et même pire : en fait, j'ai le fond de ma page, blanc
cassé. Par dessus, j'ai le cadre principal (bleu), sur
lequel j'ai mon cadre blanc.
Le message de bienvenue, qui doit être au-dessus de
tout ça est non seulement en dessous du cadre blanc,
mais aussi en dessous du cadre bleu !