affichage d'une image réactive en css sous un menu

**criscaro** · 30/11/2006, 13h30

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 :

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
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

**MasterOfChakhaL** · 30/11/2006, 13h42

Bonjour,

Bienvenu sur les forums de developpez.com !!

Avant d'aller plus loin, je remarque ceci dans ton code:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
 
.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;
}

Coquille ou pas? tu essaie de définir une propriété "top left", a mon avis, tu voulais plutot définir "background-repeat"

Et aussi, au tout début de ton code:

Code html :

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

<meta name=cricri content=je code>

kesako??

**criscaro** · 30/11/2006, 13h52

bonjour,

en fait ma ligne devait être la suivante :

Code css :

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

background: transparent url("img/menu_parchemin.jpg") top left no-repeat;	/* arrière-plan général du menu */

mais j'ai fait tellement de modif que j'ai oublié de remettre comme suivi dans un tuto ; à l'origine, j'avais la ligne ci-dessus mais ça ne marchait pas non plus. En fait, il faudrait peut-être que j'enlève top left ?

Mais je veux une image complète et qui change de couleur lorsque je passe la souris dessus. Cette image est donc constituée des deux images comportant les couleurs différentes. Je ne sais pas si je m'exprime bien. Je peux joindre l'image éventuellement.

si j'ai tout compris top left me permet de dire où placer l'image et no-repeat parce que je veux que l'image soit la mm pour l'ensemble du menu ! enfin, je crois

quant à ça :

Code html :

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

<meta name=cricri content=je code>

, j'ai mis n'importe quoi étant donné que pour l'instant je fais simplement un exo pour faire une structure de page cohérente ! c'est tout
merci

**trotters213** · 01/12/2006, 09h12

et bienvenu,

Envoyé par criscaro

si j'ai tout compris top left me permet de dire où placer l'image et no-repeat parce que je veux que l'image soit la mm pour l'ensemble du menu ! enfin, je crois

top left, ne fait rien, il faut les séparer :

Code CSS :

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

1
2
top:la_valeur une_unité
left:la_valeur une_unité

no-repeat permet d'indiquer à ton CSS qu'il ne doit pas répéter le fond d'écran que tu veux afficher, tout simplement

**criscaro** · 02/12/2006, 12h21

salut et merci pour ta réponse

j'ai repris tte mon css, j'ai réussi à mettre mon image en fond de menu comme je le voulais et je vais sûrement encore avoir besoin de conseils.
mais j'avance !!!!

voici ce que j'ai fait :

Code css :

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

1
2
3
4
5
6
7
8
9
div#menu {
	float:left;
	width:25%;
	height:60%;
	background-image: url("img/menu_parchemin.gif"); 	/* arrière-plan général du menu */
	background-repeat: no-repeat; 
	color: #CC0000;
	font-size: 130%;
}

mais j'ai le mal de mer, à force de naviguer

affichage d'une image réactive en css sous un menu

CSS

Vue hybride

Discussions similaires

Partager

Partager