[XHTML] Problème de superposition en CSS
Bonjour à tous !
Je viens de me mettre aux feuilles de style et au XHTML
strict, et j'ai un petit soucis... :mrgreen:
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:
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> |
