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,

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

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

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

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

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.

09/02/2011, 11h50	#3
thipie132 Invité de passage Pierre Thiaville Inscription : mars 2010 Messages : 7 Détails du profil Informations personnelles : Nom : Pierre Thiaville Informations forums : Inscription : mars 2010 Messages : 7 Points : 0 Points : 0	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?
	00

09/02/2011, 21h42	#6
thipie132 Invité de passage Pierre Thiaville Inscription : mars 2010 Messages : 7 Détails du profil Informations personnelles : Nom : Pierre Thiaville Informations forums : Inscription : mars 2010 Messages : 7 Points : 0 Points : 0	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?
	00

09/02/2011, 23h24	#8
thipie132 Invité de passage Pierre Thiaville Inscription : mars 2010 Messages : 7 Détails du profil Informations personnelles : Nom : Pierre Thiaville Informations forums : Inscription : mars 2010 Messages : 7 Points : 0 Points : 0	J'ai peur de ne pas avoir compris... Il faut que je copie ce code sur chacune de mes pages???
	00

10/02/2011, 20h51	#9
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	oui, sauf à faire un type de fichier javascript, comme le include en PHP.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email