float IE vs FFX emuler un tableau

Version imprimable

1 pièce(s) jointe(s)

Je suis encore tombé dans le panneau de l'ordre de floats :(

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>gfd</title>
 
 
<style type="text/css">
html, body{ width:100%;}
div {
	border: solid 1px;
	height:20px;
	display:block;
	position:relative;
	}
.col1{width:100px;}
.col2{width:250px;}
.col3{width:80px;}
 
 
.l { float:left;}
.br {clear:right;}	
.t {border-top: solid 2px;	}
.lb {border-left: solid 2px;}
.rb {border-right: solid 2px;}
.b {border-bottom: solid 2px;}
 
</style>
 
 
</head>
 
<body>
<div class='lb t l col1'>colonne 1</div><div class='t l col2'>colonne 2</div><div class='t col3 br rb'>colonne 3</div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br  rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br  rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br  rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br rb'></div>
<div class='lb b l col1'></div><div class='b l col2'></div><div class='b col3 br rb'></div>
</body>
</html>

Voir le resultat d'affichage en image jointe ...
Pourquoi ffx inverse-t-il les divs et en conserve-t-il pas dans l'ordre du flux ?

08/06/2010, 09h23
Bisûnûrs

Tu n'as pas de float sur la col3, c'est normal ? Il faudrait lui mettre un float:left et rajouter un clear:both sur col1.

Code:

1
2
3
4
5
6
7
8
9
 
.l { float:left;}
.br {clear:right;}	
.t {border-top: solid 2px;	}
.lb {border-left: solid 2px;
     clear:both;}
.rb {border-right: solid 2px;
     float:right;}
.b {border-bottom: solid 2px;}

???
c'est pire ...

Code:

1
2
3
4
5
6
7
8
9
10
 
.l { float:left;}
.br {float:left;
     clear:right;}	
.t {border-top: solid 2px;	}
.lb {border-left: solid 2px;
     clear:both;}
.rb {border-right: solid 2px;
     }
.b {border-bottom: solid 2px;}

ok sous FFX mais du coup KO sous IE :(

08/06/2010, 09h45
pop_up

en ajoutant un overflow:auto sur ta classe col3, ça a l'air de fonctionner (testé sous FF et IE8)

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>gfd</title>
 
 
<style type="text/css">
html, body{ width:100%;}
div {
	border: solid 1px;
	height:20px;
	display:block;
	}
.col1{width:100px;}
.col2{width:250px;}
.col3{width:80px;}
 
 
.l { float:left;}
.br {clear:right;
     overflow:auto;}	
.t {border-top: solid 2px;	}
.lb {border-left: solid 2px;
     clear:both;}
.rb {border-right: solid 2px;
     }
.b {border-bottom: solid 2px;}
 
</style>
 
 
</head>
 
<body>
<div class='lb t l col1'>colonne 1</div><div class='t l col2'>colonne 2</div><div class='t col3 l br rb'>colonne 3</div>
<div class='l col1 lb'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
<div class='lb b l col1'></div><div class='b l col2'></div><div class='b col3 l br rb'></div>
</body>
</html>

Tu dois etre en mode compatible ... ?
le overflow auto ne change rien chez moi maintenant je suis OK sous FFX mais encore KO sosu IE

08/06/2010, 10h24
Bisûnûrs

On peut connaitre la finalité de ce truc là ? Parce que comme ça, si tu veux régler le problème sur tous les navigateurs, il suffirait que tu englobes l'ensemble de tes div pas un autre qui prend pour largeur la somme ..blabla et qui ferait donc 438px de large.

(au passage, ma méthode fonctionnait sur FF 3.6 et IE8, mais pas IE en mode affichage de compatibilité, donc ce serait bien de préciser sur quelle(s) version(s) de IE tu veux que ça fonctionne)
08/06/2010, 10h28
SpaceFrog

le but est simplement d'emuler un tableau en css crossbrowser
08/06/2010, 11h01
Bisûnûrs

Et englober d'un div conteneur ne serait pas la solution ? Sinon tu peux toujours, pour chaque ligne mettre un conteneur avec un clear:both, sans précision de largeur.

j'ai tenté avec un conteneur global sans succès
le contenue de ligne individuel fonctionne:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>gfd</title>
 
 
<style type="text/css">
html, body{ width:100%;}
div {
	border: solid 1px;
	height:20px;
	display:block;
	}
span {border:0;
	clear:both;
	}	
.col1{width:100px;}
.col2{width:250px;}
.col3{width:80px;}
 
 
.l { float:left;}
.br {clear:right;
     overflow:auto;}	
.t {border-top: solid 2px;	}
.lb {border-left: solid 2px;
     clear:both;}
.rb {border-right: solid 2px;
     }
.b {border-bottom: solid 2px;}
 
</style>
 
 
</head>
 
<body>
<span>
<div class='lb t l col1'>colonne 1</div><div class='t l col2'>colonne 2</div><div class='t col3 l br rb'>colonne 3</div>
</span>
<span>
<div class='l col1 lb'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
</span>
<span>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
</span>
<span>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
</span>
<span>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
</span>
<span>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
</span>
<span>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
</span>
<span>
<div class='lb b l col1'></div><div class='b l col2'></div><div class='b col3 l br rb'></div>
</span>
 
</body>
 
</html>

Merci FIllot

08/06/2010, 11h21
SpaceFrog

petit souci annexe ...
comment faire le border collapse ??
il ne fonctionne pas sur les divs ?
08/06/2010, 11h28
Bisûnûrs

Pourtant avec un seul conteneur :
http://josselin.willette.free.fr/cod...ces/table-css/

Et tu mets des div dans des span ..?!

Sinon le border collapse ne fonctionne pas sur des div en effet, il faut faire comme tu l'as fait, des bordures juste là où il y a besoin.
08/06/2010, 11h36
SpaceFrog

en lui précisant un width ...
08/06/2010, 12h12
Bisûnûrs

Citation:

Envoyé par Bisûnûrs

tu englobes l'ensemble de tes div pas un autre qui prend pour largeur la somme ..blabla et qui ferait donc 438px de large

Ben ouais. :aie:
Mais en général, tu précises une largeur à ta table aussi.
08/06/2010, 12h43
SpaceFrog

mouaip... pas besoin avec le span par ligne ^^

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>gfd</title>
 
 
<style type="text/css">
html, body{ width:100%;}
div {
	border: solid 1px;
	height:20px;
	display:block;
	position:relative;
	overflow:auto;
	}
.col1{width:100px;}
.col2{width:250px;}
.col3{width:80px;}
 
 
.l { float:left;}
.t {border-top: solid 2px;	}
.lb {border-left: solid 2px;}
.rb {border-right: solid 2px;}
.b {border-bottom: solid 2px;}
 
</style>
 
 
</head>
 
<body>
<div class='lb t l col1'>colonne 1</div><div class='t l col2'>colonne 2</div><div class='t col3 br rb'>colonne 3</div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br  rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br  rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br  rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br rb'></div>
<div class='lb b l col1'></div><div class='b l col2'></div><div class='b col3 br rb'></div>
</body>
</html>

08/06/2010, 14h44
SpaceFrog

:cry:
tout simplement un div sans float fait tout seul le clear qu'il faut

joli Serge :ccool: