Discussion :

[noOneIsInnocent]

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 :

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

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">&nbsp;</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 :

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

[ridan]

salut isma4

tu peux essayer :

Code :

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

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

[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

[ridan]

salut isma4

petite erreur de ma part :

Code :

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

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 :

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

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

j'espère que cela va marcher

[noOneIsInnocent]

merci je testerai ça ce soir en rentrant chez moi et je te tiens au courant
merci encore
a+

[noOneIsInnocent]

bon ben ça nemarche toujours pas là j'avoue que je ne vois pas ce qui pourrait faire que ça marche

[bartrik]

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

Code :

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

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

mais

Code :

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

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

directement à partir de la racine du site.
Verifie, on ne sait jamais

[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 .... 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

[noOneIsInnocent]

comme promis voici les codes qui marchent


HTML

Code :

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

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 :

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
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 ...