utilisation de display:inline-block
Salut,
J'ai pu utiliser avec succès le display:inline, en revanche, le display:inline-block semble avoir un comportement total aléatoire...
J'ai bien noté qu'il fallait utiliser
Code:
1
2
3
4
|
display: -moz-inline-block;
display: -moz-inline-box;
display: inline-block; |
pour obtenir du cross platform mais je n'arrive pas à faire ce que je veux, à savoir ça :
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
80
81
82
83
84
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<title>Test</title>
<style type="text/css">
html{
height:100%;
width:100%;
}
body{
margin:0;
height:100%;
width:100%;
}
#tblEnveloppe{
height:100%;
width:100%;
border:solid 2px cyan;
position:relative;
}
#tdLeftBorder{
width:auto;
background-image:url(http://www.ezlogicfrance.com/ClientsFolder/37307/images/squelette/fondgauche.png);
background-position:right bottom;
background-repeat:no-repeat
}
#tdRightBorder{
width:auto;
background-image:url(http://www.ezlogicfrance.com/ClientsFolder/37307/images/squelette/fonddroit.png);
background-position:left bottom;
background-repeat:no-repeat
}
#tdMain{
/* fixe la hauteur minimum de la page */
width:800px;
height:748px;
}
#divRightBorder{
width:auto;
background-image:url(/ClientsFolder/37307/images/squelette/fonddroit.png);
background-position:left bottom;
background-repeat:no-repeat
}
#divMain{
/* Zone "contenu" */
vertical-align:top;
height:100%;
position:relative;
}
.box{
/* just for fun */
width:50px;
width:50px;
vertical-align:middle;
text-align:center;
border:1px dashed orange;
display:block;
}
</style>
</head>
<body>
<table id="tblEnveloppe" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="tdLeftBorder">
<div class="box">Left</div>
</td>
<td id="tdMain">
<div id="divMain">
hello
<p>coucou</p>
<div style="position:absolute;left:40px;top:50px;width:100px;height:50px;">Positionné</div>
</div>
</td>
<td id="tdRightBorder">
<div class="box">Right</div>
</td>
</tr>
</table>
</body>
</html> |
Je crois qu'il y a un moment ou le purisme doit laisser ça place au sens pratique... Je n'ai pas l'impression que nos derniers navigateurs soient prêts pour totalement se passer des tables...
Notez, qu'il est possible que je ne connaisse pas la technique, en conséquence, si vous la connaissez, n'hésitez pas...
++
Laurent
