Menu avec image en background css

**thipie132** · 07/02/2011, 11h23

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.

Mon CSS :

Code css :

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

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 !

**NoSmoking** · 07/02/2011, 19h44

Bonjour,

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

**thipie132** · 09/02/2011, 11h50

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?

**thipie132** · 09/02/2011, 11h59

mon code :

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

**NoSmoking** · 09/02/2011, 20h08

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

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

**thipie132** · 09/02/2011, 21h42

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?

**NoSmoking** · 09/02/2011, 22h27

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

**thipie132** · 09/02/2011, 23h24

J'ai peur de ne pas avoir compris...
Il faut que je copie ce code sur chacune de mes pages???

**NoSmoking** · 10/02/2011, 20h51

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

Menu avec image en background css

CSS

Discussions similaires

Partager

Partager