Comment avoir des div sur une même ligne sans utiliser float, tout en conservant les possibilités de contrôler les dimensions du div ? (avec display:inline, elles disparaissent)
Version imprimable
Comment avoir des div sur une même ligne sans utiliser float, tout en conservant les possibilités de contrôler les dimensions du div ? (avec display:inline, elles disparaissent)
Tu as essayé <SPAN> ? C'est l'équivalent de <DIV>, mais par défaut c'est pas géré comme un paragraphe. Cela dit, en fonction des attributs CSS les deux peuvent avoir le même comportement.
le span ne respecte pas les contrôles de dimensions (width par exemple).Citation:
Envoyé par TigrouMeow
Pour quelle raison ne veux-tu pas recourir au float?
Quelle mise en page souhaites-tu obtenir?
Tu as aussi le positionnement absolu qui te permet de "mettre des div sur une même ligne" mais à utiliser dans des cas bien spécifiques.
Je ne peux pas recourir au float, car j'utilise déjà du float pour les div parents (et les imbrications de float c'est n'importe quoi surtout avec du clear).Citation:
Envoyé par Candygirl
Sinon, je ne vois pas comment utiliser le positionnement pour mettre des divs de tailles non prédéfines les uns à la suite des autres sur une même ligne.
Perso j'imbrique souvent des float et je ne rencontre en général pas de problème insurmontable même si c'est parfois un peu prise de tête ;)Citation:
Envoyé par Sergejack
Citation:
Envoyé par Candygirl
Citation:
Envoyé par Candygirl
Deux colonnes 1 et 2, côte à côte, occupant 50% de l'espace disponible chacune.
1 | 2
dans 1, 3 colonnes A B C sur une même ligne, leur hauteur est variable, leur largeur : 1/3 de 1. Toujours dans 1, une ligne D sous A, B, C.
ex :
1
AABBCC
AAB-CC
AA--CC
----CC
DDDDDD
DD
même topo dans 2.
Compatible IE/FireFox
Encore une petite question:Citation:
Envoyé par Sergejack
Lorsque tu dis 1/3, tu dois donner des dimensions en % parce que le conteneur est extensible ou tu connais les dimensions et tu peux donc "calculer" toi-même le tiers en question pour les spécifier en pixels (ce qui évite de ce prendre la tête avec le calcul des % sur IE) ? (vu ton conteneur 1 qui prend le 50% de la place à disposition j'imagine que le % est requis mais je préfère m'en assurer pour éviter de complexifier au cas où ;))
Citation:
Envoyé par Candygirl
Les tailles sont relatives.
Je ne veux (et ne peux pas) considérer de calculs tels que "1 = 50%, A = (1/3) de 1 => A = 16.6%.
D'ailleurs les nombres et les mesures que j'ai donné, ne servent que d'exemples.
ok mais dur de donner une solution vraiment efficace sans connaître la donnée exacte du problème puisque cela va varier selon le cas.Citation:
Envoyé par Sergejack
Le premier problème rencontré va être le calcul des % sur IE. IE fait automatiquement un arrondi mathématique sans chercher à respecter les 100%. Du coup 2 éléments en 50% côtes à côtes passent correctement pour autant que l'espace à disposition dans le parent soit un nombre paire. Dans le cas contraire, il y aura 1px de trop; IE considera qu'il n'a pas la place de les mettre côtes à côtes et ils passeront l'un en dessous de l'autre.
Dans le cas particulier du 50/50, il est facile d'éviter le problème en redéfinissant pour IE une largeur de 49.99% pour l'un des 2 éléments (ne pas définir le 49.99% à tous car opera ne semble pas prendre en compte les décimales des %). de cette manière on évite l'apparition du .5 et donc du 1px de trop.
Pour un traitement plus général de la problématique, l'idéal est de laisser l'une des "colonnes" sans dimensions fixe afin qu'elle puisse "absorber" un éventuel écart. L'idée est de laisser la dernière colonne non pas en float, mais dans le flux et de la forcer à prendre sa largeur à l'aide d'un nouveau contexte de formatage plutôt qu'avec un margin qui imposerait un calcul ou encore pourrait poser problème si on a un clear à l'intérieur de ladite colonne.
Pour créer le nouveau contexte de formatage, on peut utiliser la propriété overflow:hidden (ou auto mais qui m'a semblé parfois poser des problèmes sur NS8) qui fonctionne bien sauf sur IE6 pour lequel il sera alors nécessaire de donner le layout. De plus, cette configuration fera apparaître le bug des 3px sur IE6 qui devra aussi être traité suivant le rendu souhaité.
Un petit exemple de ce que pourrait être le code pour ta configuration:
Code:
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
Houla, je ne connais pas tous ces "hacks" ^^'
Merci, je vais pouvoir les étudier.