affichage d'une image réactive en css sous un menu
bonjour,
tout d'abord, je suis débutante ...;) donc merci par avance de votre aide, du temps que vous allez me consacrer (peut-être) et de vos explications.
voici mon problème :
je suis en train de créer une structure de page pour un site que je dois remanier. Elle comporte :
- en tête (plus tard avec image à gauche + titre et sous titre centrés)
- contenu avec
corps de page scrollable (c'est fait)
menu avec une image réactive au passage de la souris (ça coince)
- pied de page
Je me suis inspirée pour cela de nombreux tutos trouvés sur le net et j'ai passé plus de 2h hier soir à visiter le forum sans trouver de réponse à la question suivante :
mon image ne s'affiche pas sur la page, que ce soit sur IE (oups, avec IE 7, y a plus rien) ou Fx (elle s'affiche bien si je l'appelle directement donc ça n'est pas un problème d'image mais sûrment un pb de code CSS mais je ne trouve pas mon erreur !
voic ce que j'ai fait :
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
| <html>
<head>
<title>ceci est la base<title/>
<meta name=cricri content=je code>
<style type="text/css">
body {
margin:0;
height: 100%;
}
.entete {
background-image: url("img/petite_etoile.jpg");
height: 30%;
}
.contenu {
height: 70%;
background-image: url("img/petite_etoile.jpg");
}
.menu {
float: left;
width: 50px;
height: 100%;
color: #ffffff;
}
.ul, li { /* utilisation de liste pour le menu */
list-style-type: none; /* suppression des puces de liste */
margin:0;
padding:0;
}
.ul {
position: absolute; /* positionnement pour IE5 et IE5.5 */
top: 50px;
left: 20%;
background: transparent url("img/menu_parchemin.jpg");
top left: no-repeat; /* arrière-plan général du menu */
width: 160px;
padding-top: 57px;
text-align: center;
}
.li {display: inline;} /* correction pour IE5 et IE5.5 */
.li a { /* dimensions et définitions des boutons */
display: block; /* mise en block de <a> pour lui donner des dimensions */
height: 30px;
width: 160px;
color: #660000;
font-size: 20px;
font-family: "black chancery", georgia, serif;
text-decoration: none;
line-height: 25px; /* hauteur de ligne pour éviter les paddings */
}
.li a:hover {
color: #fff;
background: transparent url("img/menu_parchemin.jpg") top left no-repeat;
}
a.menu1:hover { /* décalage de l'arrière-plan pour chaque bouton */
background-position: 0% -327px;
}
a.menu2:hover {
background-position: 0% -357px;
}
a.menu3:hover {
background-position: 0% -387px;
}
a.menu4:hover {
background-position: 0% -417px;
}
a.menu5:hover {
background-position: 0% -447px;
}
a.menu6:hover {
background-position: 0% -477px;
}
a.menu7:hover {
background-position: 0% -507px;
}
.centre {
margin-left: 100px;
overflow: auto;
}
.frame { /* zone scrollable avec 2 blocs*/
margin-left: 0px;
width: auto;
height: 600px;
overflow: auto;
}
.pied {
background-image: url("img/petite_etoile.jpg");
height: 30%;
}
.bloc1 {
background-color: blue;
height: 500px;
}
.bloc2 {
background-color: green;
height: 500px;
margin-top: 20px;
}
</style>
<div class="entete"><H2>TITRE DE NIVEAU 2</H2></div>
<div class="contenu">
<div class="menu">
<ul>
<li><a id="menu1" title="menu1" accesskey="1" href="#">Accueil</a></li>
<li><a id="menu2" title="menu2" accesskey="2" href="#">henner</a></li>
<li><a id="menu3" title="menu3" accesskey="3" href="#">meladius</a></li>
<li><a id="menu4" title="menu4" accesskey="4" href="#">presentation</a></li>
<li><a id="menu5" title="menu5" accesskey="5" href="#">journal</a></li>
<li><a id="menu6" title="menu6" accesskey="6" href="#">betisier</a></li>
<li><a id="menu7" title="menu7" accesskey="7" href="#">antre</a></li>
</ul>
</div>
<div class="frame">
<div class="centre">
<div class="bloc1">bla bla bla bla bla bla bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla</div>
<div class="bloc2">bli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli blibli bli bli</div>
</div>
</div>
</div>
<div class="pied">ceci est le pied de page ceci est le pied de page ceci est le pied de page ceci est le pied de page ceci est le pied de page</div>
<head/>
<body>
<body/>
<html/> |
voili, voilou ! c'est sûrement un problème avec ul et li mais je ne vois pas quoi, j'ai fait plusieurs essais pas très satisfaisants jusqu'à maintenant. Si quelqu'un a une idée et les explications surtout !!!
à vous lire
