[CSS] Affichage background d'un "<div> vide"

Version imprimable

06/09/2005, 18h43
laulaurent

[CSS] Affichage background d'un "<div> vide"
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:

<div id="YYY>      </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:

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

:salut:

Je pense que cela vient du fait que tu mets :

Code:

1
2
 
display: inline;

Dans ton div.

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

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
 
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;
  }

Code:

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.

:wink:

06/09/2005, 22h59
laulaurent

Tout d'abord merci de ta réponse. :D
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 :D