Menu avec image en background css

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

Voici mon problème :

Je souhaite créer un menu texte et avec une image en background (ex : http://www.chocolats-bouvier.fr)

Mon problème est que je ne veux pas que cette image soit dans le body (comme dans l'exemple) mais en relation avec l'url sur laquelle je suis.

Voila mon problème :
mon image ne s'affiche que de la largeur de mon texte alors que je voudrais que mon image prenne tout l'espace en dessous du menu (940px) et s'alligne à gauche.

http://www.developpez.net/forums/att...1&d=1297074158

Mon CSS :
Code:

1 2 3 4 5 6 #access a { color: #ff7b00; background-image:url(<a href="http://blog-patisserie-jean-luc.fr/wp-content/themes/twentyten-pat/images/bd3.jpg);" target="_blank">http://blog-patisserie-jean-luc.fr/w...ages/bd3.jpg);</a> background-repeat:no-repeat; height: 140px; }
Aidez moi svp je suis vraiment dans la galère.

Merci d'avance !

07/02/2011, 19h44
NoSmoking

Bonjour,

Citation:

Aidez moi svp je suis vraiment dans la galère.

pourquoi il fait de meilleurs patisserie que toi??

tu peux toujours t'inspirer de ce que j'ai mis ICI
09/02/2011, 11h50
thipie132

Lol, pas de meilleurs pâtisserie mais je trouve qu'il a un bon site.

Tu peux aller voir sur mon site http://blog-patisserie-jean-luc.fr
J'ai mis en place ton code.

Cependant, j'aimerais que l'image reste en dessous lorsque je la survole. Pour le moment, elle n'apparait que quand je suis sur un titre.

Je vais par la suite mettre une image dans la zone de chaque titre, comment est ce que je peux faire pour que cette image reste une fois que j'ai cliqué sur le lien?

mon code :

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
<style type="text/css">
* {
  font-family : Verdana, Arial;
}
#titre {
  width : 600px;  
  margin : auto;  
}
#conteneur {
  font-size : 13px;
  position : relative;
  border : 1px solid #e0e0e0;
  width : 600px;
  height : 250px;
  margin : auto;
  padding : 5px;
  display: block;
}
#conteneur li {
  cursor : pointer;
display: block;
float: left;
}
#conteneur .info {
  top : 30px;
  left : 0px;
  width : 600px;
  height : 150px;
  border : 1px solid #f0f080;
  background-color : red;
  padding : 5px;
}
#conteneur li div {
  display : none;
}
#conteneur .where{
  position : absolute;
  color : #e0e0e0;
  font-weight : bold;
  background-color : black;
  border : 1px solid #e0e0e0;
}
#conteneur li:hover div {
  position : absolute;
  display : block;
background: green;
}
</style>
</head>
<body>
 
<div id="conteneur">
  <div class="where info">Zone Info...</div>
  <ul>
    <li><div class="info"><b>Titre 1</b><hr>Bonjour de la ligne 1</div><a href="http://blog-patisserie-jean-luc.fr/category/actualite/">Ligne 1</a></li>
    <li>-<div class="info"><b>Titre 2</b><hr>Bien le bonjour de la ligne 2</div>Ligne 2</li>
    <li>-<div class="info"><b>Titre 3</b><hr>Les informations de la ligne 3</div>Ligne 3</li>
  </ul>
 
</div>
 
<b>Attention</b> :
<br><i>ne fonctionne pas sur IE6</i>

Citation:

Cependant, j'aimerais que l'image reste en dessous lorsque je la survole. Pour le moment, elle n'apparait que quand je suis sur un titre.

dans ce cas il faut oublier le CSS pur, une dose homéopathique de javascript est nécessaire.

Le principe est simple, au survol d'un intitulé de menu, on change la src de l'image qui est affichée en dessous.
Ci dessous un exemple de ce que cela peut donner

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image sur mouseover</title>
<style type="text/css">
* {
  font-family : Verdana, Arial;
}
#conteneur {
  font-size : 13px;
  position : relative;
  border : 1px solid #e0e0e0;
  width : 800px;
  height : 400px;
  margin : auto;
  padding : 5px;
}
#titre {
  width : 600px;
  margin : auto;
}
#div_menu {
  margin : auto;
  width : 600px;
  padding : 1px;
  border : 1px solid #8a4b08;
}
#div_menu_lien {
  width : 100%;
  min-height : 30px;
  background-color : #f7be81;
}
#div_menu_lien a {
  color : #000;
  text-decoration : none;
  font-size : 13px;
  font-weight : bold;
  line-height : 30px;
  width : 100px;
  padding-left : 5px;
  display : block;
  float : left;
}
#div_menu_lien a:hover {
  color : #fff;
  background-color : #8a4b08;
}
#div_menu_image {
  background-color : #f0f0f0;
  height : 170px;
}
#img_menu {
  width : 100%;
  height : 100%;
}
</style>
<script type="text/javascript">
function showImage(num){
  var tImg = [];
  var i = 0;
  tImg[i++] = "image_menu_1.jpg";
  tImg[i++] = "image_menu_2.jpg";
  tImg[i++] = "image_menu_3.jpg";
  tImg[i++] = "image_menu_4.jpg";
  var oImg = document.getElementById('img_menu');
  if( oImg){
    oImg.src = tImg[num];
    oImg.alt = tImg[num];
  }
}
</script>
</head>
<body>
<div id="conteneur">
  <div id="titre">
    <h2>Show Image sur mouseover</h2>
  </div>
  <div id="div_menu">
    <div id="div_menu_lien">
      <a href="#" onmouseover="showImage(0);">Menu #1</a>
      <a href="#" onmouseover="showImage(1);">Menu #2</a>
      <a href="#" onmouseover="showImage(2);">Menu #3</a>
      <a href="#" onmouseover="showImage(3);">Menu #4</a>
    </div>
    <div id="div_menu_image">
      <img id="img_menu" src="image_fond_menu.jpg" alt="">
    </div>
  </div>
</div>
</body>
</html>

je t'ai mis une touche de cacao !!!!

09/02/2011, 21h42
thipie132

ok ca marche nikel merci beaucoup.

Dernière question....
Comment est ce que je peux faire pour que l'image liée au menu 1 remplace l'image de fond (ou se superpose dessus) quand je suis sur le lien de menu 1?
09/02/2011, 22h27
NoSmoking

Citation:

Envoyé par thipie132

Dernière question....
Comment est ce que je peux faire pour que l'image liée au menu 1 remplace l'image de fond (ou se superpose dessus) quand je suis sur le lien de menu 1?

dans ta page correspondant au menu #1, tu mets, en dur, dans la src de l'image l'image que tu souhaites, dans la page correspondant au menu #2...etc...
09/02/2011, 23h24
thipie132

J'ai peur de ne pas avoir compris...
Il faut que je copie ce code sur chacune de mes pages???
10/02/2011, 20h51
NoSmoking

oui, sauf à faire un type de fichier javascript, comme le include en PHP.