[div] background image

Version imprimable

Bonjour à tous

voilà mon petit problème

j'avais un site http://ismaberrada1.free.fr qui utilisait les tableaux pour la mise en page
cette methode n'etant pas optimum j'ai voulu utiliser des div à la place des tableaux:
ce qui donne ceci, pour l'instant
http://ismaberrada1.free.fr/index1div.html

j'ai une image en background qui n'apparaît pas du tout dans la nouvelle version et je me creuse la tête depuis quelques temps et je ne vois pas pourquoi je n'ai pas l'effet escompté

Cette image est celle du milieu en dessous de la bande bleu du header...

voilà un morceau de code

HTML:
Code:

1 2 3 4 5 6 7 8 <div> <div class="ombregauche"><img src="Im_Perso\ombre-bandeau-g.gif" width="183px" height="19px" alt="" title=""/></div> <div><img src="Im_Perso\p.gif" width="1px" height="1px" alt="" title=""/></div> <div id="ombremilieu"> </div> <div class="ombredroite"><img src="Im_Perso\ombre-bandeau-d.gif" width="183px" height="19px" alt="" title=""/></div> </div>
et pour le css
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 div.ombregauche{ width: 183px; height: 19px; left: 0px; top:0px; position:relative; overflow: visible; float: left; } div.ombredroite{ width: 183px; height: 19px; top:0px; position:relative; overflow: visible; float: right; top:0px; } div#ombremilieu{ width: 1px; height: 1px; background-image: url('..\Im_Perso\ombre-bandeau-bg.gif'); background-repeat: repeat; position: relative; overflow: visible; }
merci d'avance pour votre aide

salut isma4 :)

tu peux essayer :

Code:

1
2
3
4
5
6
7
div#ombremilieu{ 
   width: 1px; 
   height: 1px; 
   background: url('..\Im_Perso\ombre-bandeau-bg.gif') repeat; 
   position: relative; 
   overflow: visible; 
}

23/10/2004, 22h30
noOneIsInnocent

salut ridan

tout d'abord merci pour t'être penché sur mon prob...je commençais à desesperer ...;-)

ben j'ai essayé ta solution et ça ne marche pas :cry:
25/10/2004, 17h23
ridan
salut isma4 :)

petite erreur de ma part :
Code:

1 2 3 4 5 6 7 #ombremilieu{ width: 1px; height: 1px; background: url('..\Im_Perso\ombre-bandeau-bg.gif') repeat; position: relative; overflow: visible; }
et dans ton code html :

Code:

<div id="ombremilieu"> </div>

j'espère que cela va marcher :wink:
25/10/2004, 17h31
noOneIsInnocent

merci je testerai ça ce soir en rentrant chez moi et je te tiens au courant
merci encore
a+
25/10/2004, 20h22
noOneIsInnocent

bon ben ça nemarche toujours pas :cry: là j'avoue que je ne vois pas ce qui pourrait faire que ça marche
26/10/2004, 08h27
bartrik

J'ai regarder ton site de plus pres et je note deja que l'URL des images n'est pas de type

Code:

url('..\Im_Perso\ombre-bandeau-bg.gif');

mais

Code:

url('\Im_Perso\ombre-bandeau-bg.gif');

directement à partir de la racine du site.
Verifie, on ne sait jamais
26/10/2004, 09h14
noOneIsInnocent

en fait j'ai résolu une partie de mon problème ,cette fois-ci l'image en background apparaît bien(j'ai oublié de mettre à jour le code sur mon site => vous ne verrez pas les changements)

mais j'ai un autre souci; entre mon image ombre-bandeau-g.gif (c'est l'image de gauche) et l'image en background il y a un espace vide
dans l'ancienne version j'avais aussi ce problème
donc j'avais mis une image p.gif de 1px*1px qui suffisait largement.

j'essaie de remettre cette image dans un div juste après l'image de gauche ombre-bandeau-g.gif mais l'image n'apparaît pas et l'espace blanc est par consequent toujours là ...

j'ai un autre probleme ...j'ai oublié mon code chez moi .... :oops: et je n'ai donc rien à vous proposer actuellement .... je vais continuer à chercher et si je ne trouve pas je mettrais un autre post

en tout cas je mettrais la solution ce soir concernant l'image en background ...je pense que cela peut servir à d'autre personnes

merci à tous

comme promis voici les codes qui marchent

HTML

Code:

1
2
3
4
5
6
7
8
9
 
 
<div class="header"></div>
<div id="contimg">
   <div class="ombregauche"><img src="..\Im_Perso\ombre-bandeau-g.gif" width="183px" height="19px" alt="" title=""/></div>
    <div id="ombrep"><img src="..\Im_Perso\p.gif" width="1px" height="1px" alt="" title=""/></div>
    <div id="ombremilieu"></div>
    <div class="ombredroite"><img src="..\Im_Perso\ombre-bandeau-d.gif" width="183px" height="19px" alt="" title=""/></div>
</div>

CSS

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
42
43
44
45
46
47
48
49
50
 
 
div.ombregauche{
	width: 183px;
	height: 19px;
	left: 0px;
	float: left;
	position: relative;
	top:0px;
}
div.ombredroite{
	width: 183px;
	height: 19px;
	top: 40px;
	float: right;
	position: absolute;
	right: 0px;
}
#ombrep{
	width: 1px;
	height: 1px;
	top: 40px;
	position: absolute;
	left: 184px;
	overflow: auto;
}
 
#ombremilieu{
	width: 70%;
	height: 1px;
	background-image: url('ombre-bandeau-bg.gif');
	background-repeat: repeat-x;
	top:0px;
	position: relative; 
  	overflow: visible;
	left: 0px;
 
}
#contimg{
	width: 100%;
	height: 19px;
}
 
div.header{
	height: 40px;
	width: 100%;
	background-color: #2F9CDA;
	top: 0%;
 
}

j'obtiens le resultat voulu
sauf que l'image p.gif ne s'affiche pas ...