Discussion :

[razorlok]

Bonjour à tous,

je me casse la tête sur la création d'un menu étirable en CSS.
Le menu est aligné à gauche. J'ai une image arrondie avant les premiers onglets, les onglets, une image fermant le menu et sur la même ligne, j'aimerais pouvoir répéter une image jusqu'à la limite droite du conteneur.

Je n'arrive pas à afficher l'image à répéter. Il doit manquer un élément CSS.

Voici une image explicative :


Mon code CSS du menu :

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
 
 
#nav_g {
	position:relative;
	float:left;
    background-image:url(ouverture_menu);
	width:6px;
	height:25px;
}
 
 
#custommenu_items {
	display: block;
  	float: left;
    background-image:url(image_menu);
    background-repeat:repeat-x;
	height:25px;
}
 
#nav_d {
	position:relative;
	float:left;
    background-image:url(fermeture_menu);
	width:19px;
	height:25px;
}
 
#nav_repeat {
	position:relative;
	float:left;
    background-image:url(image_a_repeter);
	width:19px;
	height:25px;
}
 
#nav_fin {
	position:relative;
	float:right;
    background-image:url(image_de_cloture);
	width:7px;
	height:25px;
}

[Chris_Dupasquier]

Hello,

Je ne sais pas si j'ai tout compris,

Pistes à explorer :

La largeur du conteneur
Le #nav-repeat n'a pas de background-repeat


A+

[NoSmoking]

Bonjour,
la structure HTML serait un plus

[razorlok]

En fait, j'ai réussi mentalement et techniquement à résoudre le problème.
J'ai simplement appliqué l'image à répéter en tant que background de la première div du menu, puis j'ai rajouté les autres background avec un z-index par dessus