Menu et image

Version imprimable

04/02/2013, 22h21
userparis

Menu et image

Bonsoir à tous,

voila je me lance dans la création de site web et j'aimerai essayer d'apprendre a faire des sites avec un beau design.

En allant de site en site je trouve qu'il y en a de très beau.

une technique que j'aimerai apprendre ce sont le menu d'un site sous forme d'images, comment est-ce réalisable techniquement ?

Comme ça a première vu je dirais qu'on mettrais une image en background d'un div. Mais ca c'est réalisable pour un menu figé dont le div aura des tailles avec les propriété width et height et par conséquent l'image sera elle aussi de taille fixe.

Par contre est-réalisable pour la création d'un menu avec un contenu aléatoire (en nombre de lien du menu) et en terme de longueur de chaque lien qui pourrait etre variable. Les données d'un lien du menu proviendrais d'une base de donnée donc leur longueur est variable.

Merci a tout ceux qui voudront bien m'éclairer.

bon courage dans vos développements.
05/02/2013, 12h38
raydenprod
Bonjour,

Oui c'est faisable il faut que tu découpes ton image de background en 3 à savoir 1 image à gauche (qui contiendra partie gauche du bouton)
1 image(qui peut s'étirer sur la largeur) en milieu qui contiendra le texte et enfin 1 image de droite (qui contiendra la droite du bouton).

exemple :
Code:

1 2 3 4 5 6 7 <ul> <div style="background: url('image1');"></div> <li style="background: url('image2');"> contenu du bouton <li> <div style="background: url('image3');"></div> </ul>
ceci est une version simplifiée et pas très propre mais c'est pour que tu comprennes
05/02/2013, 12h49
userparis

Bonjour raydenprod, merci pour ta réponse.

Je vois l'astuce en étirant l'image du centre.

Par contre, tu ne crées que deux div dans ton exemple, un à gauche l'autre à droite, pas pour contenir le <li> du centre, c'est normal ?

voici le code crée et ça ne fonctionne pas, il y a un écart vertical entre l'image centre et les images du haut et du bas, voici le code HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
<body>
<div id="container" class="ImgDiv">
	<div id="Menu">
		<div id="BtImgHaut"></div>
			<ul>
			<li class="BtImgCentre">dkjsfkjhdsfjkdhsfjkhdjfkdskhfjkdshdkjsfkjhdsfjkdhsfjkhdjfkdskhfjkdshdkjsfkjhdsfjkdhsfjkhdjfkdskhfjkdsh </li>
			</ul>
		<div id="BtImgBas">div bas</div>
	</div>
</div>
</body>

code css :

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
#container{
margin-left:300px;
border: solid 2px black;
width:300px;
word-wrap: break-word;
}
 
#Menu{
margin-left:10px;
width:260px;
height:27px;
word-wrap: break-word;
border: solid 2px blue;
}
 
#BtImgHaut{
margin-left:20px;
margin-top:0px;
padding-top: 0px;
width:260px;
height:27px;
border: solid 2px red;
background: url(boutonHaut.jpg)  ;
 
}
 
.BtImgCentre{
margin-left:0px;
margin-top:0px;
padding-top: 0px;
width:260px;
border: solid 2px black;
background: url(boutonCentre.jpg)  ;
 
}
 
#BtImgBas{
margin-left:20px;
margin-top:0px;
padding-top: 0px;
width:260px;
height:35px;
background: url(boutonBas.jpg)  ;
 
border: solid 2px brown;
 
}

peu etre qu'il faut enlever les <li> et créer un div central a l'image des deux autres ?

si t'as une idée, je suis preneur, merci

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Famille Rebaud" />
<meta name="Keywords" content="html, css"/>
<meta name="Owner" content="Jean-Francois Rebaud"/>
<meta name="author" content="Jean-Francois Rebaud"/>
<title>flux9</title>
<style type="text/css">
#container{
margin-left:300px;
width:300px;
word-wrap: break-word;
}
 
#Menu{
margin-left:10px;
width:260px;
height:27px;
word-wrap: break-word;
}
 
#BtImgHaut{
width:260px;
height:27px;
border: solid 2px red;
background: url(boutonHaut.jpg)  ;
 
}
 
.BtImgCentre{
margin-left:0px;
margin-top:0px;
padding-top: 0px;
width:260px;
border: solid 2px black;
background: url(boutonCentre.jpg)  ;
 
}
 li{
 list-style-type: none;
 }
#BtImgBas{
 
width:260px;
height:35px;
background: url(boutonBas.jpg)  ;
 
border: solid 2px brown;
 
}
</style>
</head>
<body>
<div id="container" class="ImgDiv">
	<div id="Menu">
		<ul>
		<div id="BtImgHaut"></div>
		<li class="BtImgCentre">dkjsfkjhdsfjkdhsfjkhdjfkdskhfjkdshdkjsfkjhdsfjkdhsfjkhdjfkdskhfjkdshdkjsfkjhdsfjkdhsfjkhdjfkdskhfjkdsh </li>
		<div id="BtImgBas">div bas</div>
		</ul>
	</div>
</div>
</body>
 
 
</body>
</html>

voilà comment fiare pour un bouton vertical

05/02/2013, 14h31
userparis

OK je vois que tu as enlevé les margin et padding des div haut et bas et que tu as rajouter un style aux balises <li>Je teste ce soir pour te dire si l'ecart entre le contenu de <li> et les div du haut et du bas a disparu.

Merci à ce soir
05/02/2013, 22h03
userparis

J'ai testé le code et ça marche :) et j'ai compris le principe qui est en plus assez simple. Résolu.

Merci