Discussion :

[laulaurent]

Bonjour,

Je rencontre une difficulté en CSS. Je cherche à mettre deux images comme bordure gauche et droite d'un conteneur. Je suis donc obligé d'imbriquer deux blocs div dont un est vide, les deux possédant une image en background.
Or dans le code source de mon document HTML, l'image background du "div vide" ne s'affiche pas.
J'ai essayé avec les propriétés min-width sans succès.
La seule solution que j'ai pour le moment, c'est de mettre comme code HTML :

Code :

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

<div id="YYY>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

Y aurait-il un moyen de faire plus propre ?
Pour info, voici le code css du div en question :
(la largeur de l'image background en question est de 20 pixels.)

Code :

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

1
2
3
4
5
6
7
8
9
10
 
#YYY {
	display: inline;
	min-width:20px;
	width:20px;
	margin:0;
	padding:0;
	background-image: url(bordd.gif);
	background-repeat: no-repeat;
}

Merci de votre aide

[spirou]

Je pense que cela vient du fait que tu mets :

Code :

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

1
2
 
display: inline;

Dans ton div.

Pour ton problème, j'aurais fait un truc du genre :

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
 
body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  }
 
  #bloc{
  width: 400px;
  height: 100%;   /* pour IE */
  position: relative;
  }
 
  html>body #bloc{   /* pour retablir la normale (non-compris par IE) */
  height: auto;
  } 
 
  #bordGaucheBloc{
  top: 0;
  left: 0;
  margin: 0;
  width: 20px;
  height: 100%;
  background-image: url(bordg.gif);
  position: absolute;
  }
 
  #bordDroitBloc{
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background-image: url(bordd.gif);
  position: absolute; 
  }
 
  #centreBloc{
  margin: 0 20px;
  background: green;
  }

Et

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="bloc">
 
    <div id="bordGaucheBloc"></div>
 
    <div id="bordDroitBloc"></div>
 
    <div id="centreBloc"></div>
 
  </div>

Cela, je pense devrais fonctionner.

[laulaurent]

Tout d'abord merci de ta réponse.
J'ai encore un léger problème avec cette solution, car en fait, je ne connais pas la taille de "bloc". Je m'explique :
J'ai une page de largeur fixe 800 pixels, centrée.
Sur cette page, je souhaite intégrer un menu au centre (des 800 pixels) avec une bordure gauche et droite.
Ce menu est constitué d'une liste (centrée) <ul>, de largeur inconnue, d'éléments <li> qui constituent les rubriques. Et c'est autour de cette liste, que je souhaite rajouter des bordures gauche et droite. :oops
Ta méthode est plus claire que celle que j'ai adoptée, mais je ne vois pas comment la modifier pour que ca fonctionne.
Si quelqu'un à une idée, je lui serai très reconnaissant, parce que ca fait un bon moment que je ne trouve pas de solution.

Merci