1 pièce(s) jointe(s)
Formatter un SPAN comme on formatte un DIV
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:
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>
... |
L effet désiré en pièce jointe.
Merci.
