Style CSS ne s'appliquant pas
Bonjour,
Je concois un site et j'ai récupéré un style css d'une gallerie d'image. Quand je le test dans une page vierge comme présenté tout fonctionne, quand j'essaie de l'intégrer à mon site web ça se corse.
Voici le code qui fonctionne très bien si on lui fout la paix.
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Galerie d'images</title>
<style type="text/css">
/* general */
/* // here comes the goodnes */
ul#gallery, ul#gallery li{
margin:0;
padding:0;
list-style:none;
}
ul#gallery{
width:400px;
height:375px;
position:relative;
background:#e1e1e1 url(bg_preview.gif) no-repeat 50% 40%;
}
ul#gallery li{
float:left;
display:inline;
margin-top:300px;
}
ul#gallery a span{
display:none;
}
ul#gallery a:hover{
background:none;
z-index:100;
}
ul#gallery a:hover span{
position:absolute;
width:400px;
height:300px;
float:left;
top:0;
left:0;
display:block;
}
/* // goodnes */
/* // general */
</style>
</head>
<body>
<h1>Galerie d'images</h1>
<ul id="gallery">
<li>
<a href="http://cssglobe.developpez.com/">
<img src="02_1s.jpg" alt="gallery thumbnail">
<span><img src="02_1.jpg" alt="gallery image"></span>
</a>
</li>
<li>
<a href="http://cssglobe.developpez.com/">
<img src="02_2s.jpg" alt="gallery thumbnail">
<span><img src="02_2.jpg" alt="gallery image"></span>
</a>
</li>
<li>
<a href="http://cssglobe.developpez.com/">
<img src="02_3s.jpg" alt="gallery thumbnail">
<span><img src="02_3.jpg" alt="gallery image"></span>
</a>
</li>
<li>
<a href="http://cssglobe.developpez.com/">
<img src="02_4s.jpg" alt="gallery thumbnail">
<span><img src="02_4.jpg" alt="gallery image"></span>
</a>
</li>
</ul>
</body>
</html> |
Cependant si j'en recupère le style pour l'intégrer à mon fichier style.css et que j'intègre le code html dans mon appli pas moyen d'appliquer le css. Mes images s'affichent bêtement sans aucun style appliqué dessus.
Voici comment se présente mon application:
Dans mon fichier style.css j'ai ajouté ça donc
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
| ul#gallery, ul#gallery li{
margin:0;
padding:0;
list-style:none;
}
ul#gallery{
width:400px;
height:375px;
position:relative;
background:#e1e1e1 url(bg_preview.gif) no-repeat 50% 40%;
}
ul#gallery li{
float:left;
display:inline;
margin-top:300px;
}
ul#gallery a span{
display:none;
}
ul#gallery a:hover{
background:none;
z-index:100;
}
ul#gallery a:hover span{
position:absolute;
width:400px;
height:300px;
float:left;
top:0;
left:0;
display:block;
} |
Et dans mon appli:
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
| function accueil() {
$content = '<h1>Galerie d images</h1>
<ul id="gallery">
<li>
<a href="http://cssglobe.developpez.com/">
<img src="./images/02_1s.jpg" alt="gallery thumbnail">
<span><img src="./images/02_1.jpg" alt="gallery image"></span>
</a>
</li>
<li>
<a href="http://cssglobe.developpez.com/">
<img src="./images/02_2s.jpg" alt="gallery thumbnail">
<span><img src="./images/02_2.jpg" alt="gallery image"></span>
</a>
</li>
<li>
<a href="http://cssglobe.developpez.com/">
<img src="./images/02_3s.jpg" alt="gallery thumbnail">
<span><img src="./images/02_3.jpg" alt="gallery image"></span>
</a>
</li>
<li>
<a href="http://cssglobe.developpez.com/">
<img src="./images/02_4s.jpg" alt="gallery thumbnail">
<span><img src="./images/02_4.jpg" alt="gallery image"></span>
</a>
</li>
</ul>
</html>';
$this->appli->setContent($content);
} |
Donc voila en gros pas moyen d'appliquer ce style en récupérant le css dans mon fichier style.css.
Merci de bien vouloir m'aider.
http://hpics.li/09e7f46 Ce quand j'applique le code tel quel.
http://hpics.li/88bce3f Ce que ça donne quand j'intègre à mon appli.
