Discussion :

[miniBob]

Bonsoir à tous !

j'aurais voulu savoir comment je pouvais intercaler dans une liste ul/li une image que j'ai confectionné.

Je vous joint une image afin que vous compreniez mieux ce que j'essaie de faire :



et je gère la liste au niveau du HTML/CSS de cette façon :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<ul id="navigation">
   <li><a href="#">Accueil</a></li>
   <li><a href="#">L association</a></li>
   <li><a href="#">Adhérer</a></li>
   <li><a href="#">Galerie</a></li>
   <li><a href="#" target="_blank">Forums</a></li>
   <li><a href="#">Liens</a></li>
   <li><a href="#">Contact</a></li>
</ul>

et

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
 
#navigation
{
   margin:0;
   padding:0;
}
 
#navigation li 
{
   display:inline;
   padding:0;
   margin:0;
}
 
#navigation a:link, #navigation a:visited 
{
   padding-right: 20px;
   text-transform: uppercase;
   color: #EEEBE4;
   text-decoration: none; 
}
 
#navigation a:hover 
{
   color: #EEEBE4;
   text-decoration: underline;
}

et c'est l'image :

Code :

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

<img src="html/images/menu-sep.png" />

que je voudrais intercaler entre les différents UL.

Merci pour votre aide.

Amicalement. Florian.

[devyan]

Bonjour,

tu peux par exemple ajouter l'image à la déclaration css des li en image de fond...

Code :

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

1
2
3
4
5
6
7
8
#navigation li 
{
   display:inline;
   padding:0;
   margin:0;
   background: url(html/images/menu-sep.png) right center no-repeat;
}

devyan.