Menu et image

**userparis** · 04/02/2013, 22h21

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.

**raydenprod** · 05/02/2013, 12h38

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

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

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

**userparis** · 05/02/2013, 12h49

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 ?

**userparis** · 05/02/2013, 13h59

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

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

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 :

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

**raydenprod** · 05/02/2013, 14h13

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

**userparis** · 05/02/2013, 14h31

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

Menu et image

CSS

Vue hybride

Discussions similaires

Partager

Partager