utilisation de display:inline-block

CUCARACHA · 05/08/2007, 12h47

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 :

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

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 :

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

**beeboo** · 06/08/2007, 14h02

Je connais les modes de display inline et block mais le inline-block est inconnu au bataillon, essaie tout simplement block, ça doit être ça que tu cherches.

**trotters213** · 06/08/2007, 14h14

Qu'est-ce que tu cherches à faire en fait ? parce que le code que tu nous à donner fait un peu n'importe quoi

Envoyé par beeboo

Je connais les modes de display inline et block mais le inline-block est inconnu au bataillon, essaie tout simplement block, ça doit être ça que tu cherches.

Si inline-block existe par contre les 2 autres sont de la bidouille

CUCARACHA · 06/08/2007, 14h44

Salut,

Le display:inline-bloc permet d'afficher plusieurs div sur la même ligne en spécifiant la largeur de chacun d'eux alors que le display:inline ne tient pas compte de la largeur.

Voici le résultat obtenu au terme d'une longue bataille: http://ezwebagency.ezlogicmonaco.com...2_75_Page.aspx

J'ai finalement opté pour une table qui contient des divs...

++

Laurent

**trotters213** · 06/08/2007, 15h21

Des divs dans des tables c'est pas top ça

PS : il y a une erreur dans ton script asp donc on ne voit rien à l'affichage.

utilisation de display:inline-block

HTML

Discussions similaires

Partager

Partager