image et lien

Version imprimable

02/08/2005, 11h48
hebus73

image et lien

salut a tous

en fait j'ai une image qui apparai quand la souri survol le lien
ce lien est dans un div qui fait 200px de large

et je voudrai que mon image couvre la totalité du div.

Si qq'un a une idée?
02/08/2005, 11h52
ilood

Salut,

T'aurai pas un bout de code à nous proposer ? (ou un lien) Histoire de voir comment tu t'y es pris. Etant donné qu'il n'y a pas qu'une seule manière de faire ça.
02/08/2005, 11h55
djynwk

d'abord tu defini la hauteur de ta div sinon tu risque des surprise;
Et sinon tu rajoute ça a ton image: "style='width:100%'"

Mais note que si ta div n'a pas d'autre truc a contenir que ton image elle sert a rien ...

Ok

alors voici mon code :
Code:

1 2 3 4 5 6 <div class="menu_haut" > <div class="lien lien1"> <A href="corporate/sg_vitrage.php">Actualité</A> </div> </div>
et mon 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 a:hover { background: url("../img/bk.png") repeat-y; display : block; } .menu_haut { position : absolute; top : 80px; left : 0px; height : 16px; width : 100%; margin : 0; background-color : #000066; } .lien { text-align : center; width : 200px; } .lien1 { left : 0px; }
comme ca ca marche mais dès que je met un autre lien ca fai n'importe quoi, donc j'aurai bien aimé avoir une autre solution

02/08/2005, 12h00
hebus73

désolé djynwk mais ca ne marche pas; mon image apparai uniquement sur les mots du lien et non pas sur le div.

Oui je penssai que tu utilisai une balise image

Code:

1
2
3
4
5
6
 
<div class="menu_haut" >
 
<div class="lien lien1"> <A href="corporate/sg_vitrage.php">Actualité</A> </div>
 
</div>

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
 
.menu_haut
{
	position : absolute;
	top : 80px;
	left : 0px;
	height : 16px;
	width : 100%;
	margin : 0;
	background-color : #000066;
}
 
.lien
{
	text-align : center;
	width : 200px;
}
 
.lien1
{
	left : 0px;// <- sa sa ser a rien ton lien né pa absolute
}
 
.lien:hover
{
	background: url("../img/bk.png")  repeat-y;
}

g pas test mais norm sa devrai aller

02/08/2005, 12h06
hebus73

j'avai oublié le absolute, normalement il y est et la ca marche

merci

mais si j'enleve

Code:

display : block;

dans ma balise a:hover ca ne fonctionne pas ca me surligne uniquement mon texte...

tien voila un exemple qui marche...

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
 
<style type="text/css">
.menu_haut
{
   position : absolute;
   top : 80px;
   left : 0px;
   height : 16px;
   width : 10%;
   margin : 0;
   background-color : #000066;
}
 
.lien
{
   text-align : center;
   width : 200px;
}
 
.lien1
{
   left : 0px;
   
}
 
#menu .lien1 a:hover
{
   background-color: gray;
   width:100%;
} 
 
</style>
<div class="menu_haut" id='menu'>
<div class='lien1'> <A href="corporate/sg_vitrage.php">Actualité</A> </div>
<div class='lien1'> <A href="corporate/sg_vitrage.php">Actualité</A> </div>
</div>

kom sa ossi et c mem mieu...

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
 
<style type="text/css">
.menu_haut
{
   position : absolute;
   top : 80px;
   left : 0px;
   height : 16px;
   width : 10%;
   margin : 0;
   background-color : #000066;
}
 
.lien
{
   text-align : center;
   width : 200px;
}
 
.lien1
{
   left : 0px;
   width:100%;
   display:block;
}
 
#menu .lien1:hover
{
   background-color: gray;
   
} 
 
</style>
<div class="menu_haut" id='menu'>
<A class='lien1' href="corporate/sg_vitrage.php">Actualité</A>
<A class='lien1' href="corporate/sg_vitrage.php">Actualité</A>
 
</div>