Formatter un SPAN comme on formatte un DIV

**santaflam** · 28/10/2010, 18h55

Développeurs Bonjour !

La seule manière que j ai trouvée pour créer une liste survolable ( avec effet HOVER sur tte la zone, y compris une image en bckground) c est d' englober le tout par une balise <a>.

Or il m a été dit que cet élement Inline ne peut contenir de DIV.
J ai donc remplacé les DIV par des SPAN, et j obtiens le code suivant.

Mais est-ce légal de formatter un SPAN de cette manière avec des POSITION ABSOLUTE ??

(La DOCTYPE: XHTML 1.0 strict)

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...
 
<style>
 
#surv_engi
{
background: url(./images/engi_desi_home.png) no-repeat 0 30px;
position: relative;
width:380px;
height:150px;
margin-top: 20px;
}
 
.lien_home
{
position: absolute ;
left: 0 ;
top:0 ;
width: 380px ;
height: 150px ;
text-decoration: none ;
color : #000000 ;
}
 
.lien_home:hover
{
background: url(./images/home_hoveur.png) 0 0 no-repeat;
}
 
 
.text_arti
{
position: absolute ;
top: 30px ;
left: 110px ;
font: 70% verdana, arial, sans-serif;
line-height: 1.5;
}
 
.titr_arti
{
position: absolute ;
font: 70% verdana, arial, sans-serif;
top: 5px ;
left: 6px ;
border-bottom: 1px solid #000000;
letter-spacing: 1px;
word-spacing: 5px;
}
 
.read_more_1
{
	font: 60% verdana, arial, sans-serif;
	position:absolute;
	bottom: 10px;
	right: 25px;
}
 
</style>
 
...
 
<div id="surv_engi">
<a href='<?php translate("index.php?choix=1");?>' class="lien_home">		
			<span class="titr_arti">
				<?php echo HOME_TITR_ENGI ?>
			</span>
			<span class="text_arti">
				<?php echo HOME_TXT_ENGI ?>
			</span>
			<span class="read_more_1">
				<?php echo HOME_READMORE ?>
			</span>
</a>
</div>
...