Discussion :

[FrankOVD]

Bonjour,

Je cherche à créer un objet DIV qui agrandit horizontalement avec son contenu. Verticalement, c'est automatique, cependant lorsque j'intègre des items avec le style DIV.item{float:left;} dans mon conteneur de style DIV.conteneur{width:auto;}, mes items finissent par occuper plusieurs lignes car "float:left" permet aux items de s'imbriquer horizontalement tant qu'il reste de l'espace horizontal à l'intérieur de son parent. Comment alors dire au parent d'augmenter sa largeur de façon à toujours permettre à ses enfants de s'imbriquer horizontalement sur une seule ligne?

Je souhaite au maximum éviter le javascript et m'en tenir au CSS. Aussi, j'aimerais réussir à la faire avec des objets DIV plutôt que d'être obligé d'utiliser des tableaux.

[PLUS D'INFORMATION ]

J'ai développé dernièrement une grille à deux dimensions à l'aide d'un tableau qui me permettait d'associer une valeur pour un couple de données. J'avais donc une colonne à gauche avec une liste de Villes et une ligne en haut avec une liste d'Items. La grille au centre contenait des informations numériques désignant le nombre d'Items à distribuer dans chaque Ville, un peu à la manière d'une table de multiplication.

Le problème que j'ai constaté est que j'avais au final trop d'items et trop de villes dans ma liste, ce qui faisait déborder mon tableau autant horizontalement que verticalement. Lorsque j'utilisait le défilement horixontale et/ou vertical, je perdais donc de vue mes titres de rangées et de colonnes. J'essaie donc de refaire ma grille autrement de façon à imiter le comportement de "Figer les volets" dans "MS Excel", c'est à dire que :

1 - La première rangée ne bouge pas sur défilement vertical mais suit le défilement horizontal du contenu.

2 - La première colonne ne bouge pas sur défilement horizonral mais suit le définelement vertical du contenu.

[FrankOVD]

Rebonjour,

Comme je n'ai pas eu de réponse et que cela signifie fort probablement que personne ne connait de moyen de le faire avec CSS, je vais poster la solution javascript qui pourrait permettre à quelqu'un ayant le même problème que moi de se débrouiller :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function set_width_by_content(elem) {
  var node_list = elem.childNodes;
  if((node_list != undefined)&&(node_list.length> 0)) {
    var nb_nodes = node_list.length;
    var total_width = 0;
    for(var x = 0; x < nb_nodes; x++) {
      total_width += node_list[x].offsetWidth;
    }
    elem.style.width = total_width;
    return true;
  }
  else return false;
}

N.B. : Dépendament des valeurs CSS de "margin" et de "padding" des éléments visés, il se peut que cette fonction nécessite certains ajustements.

[desert]

Si j'ai bien compris, ce que tu souhaites, c'est un espèce de table d'Excel affiché à l'écran où la largeur et la hauteur s'élargiraient en fonction du contenu ?
Si oui, en CSS, je pense que c'est simplement impossible étant donné que l'élargissement progressive se fait seulement vers le bas. Il faut passer par Javascritpt ou bien donner une largeur statique à ta table genre 400% mais ce ne sera pas progressif. A part çà, je ne vois pas.

[FrankOVD]

Merci pour ta réponse,

Tu as bien compris ce que je cherchais à faire et comme je m'attendais à cette réponse, je me suis débrouillé avec javascript. De toute façon, avec la structure des DIV que je dois utiliser de façon à rendre tout possible, je n'ai plus le choix d'utiliser javascript pour tout mettre en place. Toutefois, si un jour quelqu'un me dit que c'est possible, ça pourrait alléger mon code.