faire des colonnes en css - Page 1

voilà mon problème : j'ai un div principal avec à l'intérieur plusieurs div de tailles quelconques, que je voudrais distribuer suivant plusieurs colonnes.
Le problème, c'est que dans le code html, je peux a priori avoir d'abord un élément de la colonne 1, puis un élément de la colonne 3, puis de nouveau un div de la colonne 1 avant un div de la colonne 2, etc...

Du coup, je ne vois pas trop comment faire
dans le pire des cas, je peux les trier par colonne croissante et faire un tableaux avec, mais je ne trouve pas ça très joli :/

si tu ne mets pas le bon ordre dans le HTML, tu vas avoir du mal à faire la présentation que tu veux en colonne (ou alors je ne connais pas la solution, mais elle m'intéresse aussi)...

arf, pas cool
au moins, ça expliquerait pourquoi je n'y arrivais pas
je pensais qu'en position:absolute et des z-index différents pour chaque colonne, ça marcherait, mais du coup les div dans une même colonne se mettent tous à la même position verticale et on ne voit qu'un seul par colonne :/

ca doit marcher avec la position absolute (c koi l'interet du z-index la ?)
tu as pas oublier d'ajouter la taille de ta colonne pour la position ?

en tt cas ce qui est chiant si tu veux faire ca c'est que ta page aura une presentation fixe, tu decides du nombre de colonne avant

en fait, je pensais qu'avec le z-index, ça me permettrait de faire ça :

pour chaque div bleu, je donne la marge à gauche et sa largeur (les deux trucs verts sur mon beau dessin), ceux qui ont le même z-index ne vont pas se recouvrir en hauteur, et les z-index différents aurait permis que l'espace à gauche pour un div dans la 2ème colonne se fasse à partir de la gauche de la page et non à partir d'un module de la 1ère colonne

Tous ceux d'une même colonne se retrouvent en haut de la colonne, ça fait pas super joli :/

(et je ne connaisp as la hauteur d'un div bleu, sinon c'est pas drôle)

Tu peux pas faire que chaque colonne soit un DIV ?

bon, j'ai résolu mon problème en transformant chaque colonne en DIV, du coup j'ai un truc plus simple que ce que je pensais faire (tous les blocs dans une même colonne ont la même largeur), mais ça marche farpaitement, donc je n'en demande pas plus.



Par contre, j'ai un autre problème



je veux faire une liste des pages, avec certaines pages qui peuvent se "déplier"
par exemple, quand on clique sur la page teaching, on a "supervisor" qui s'affiche, si on est sur une autre page, le triangle rouge est replié et ça fait comme research.

pour corser le tout, j'aimerais vraiment qu'avec certaines CSS (la bleue) la liste s'affiche horizontalement, et qu'avec d'autres, la liste s'affiche verticalement (la noire)

J'ai encadré en vert le résultat que je voudrais avoir, et que j'ai sur Firefox et Opera, mais pas sur IE-6
j'ai testé plusieurs trucs, mais IE-6 n'a pas l'air d'accepter de faire passer un truc naturellement inline en block (le coup des td) et inversement
et là, je sèche complètement sur la façon de faire. S'il n'y avait pas les onglets rouges dépliants, je saurais faire, mais là .. .

dans mes <td>, j'ai
float: left;
clear: right;
width: 100%;
display: block;

j'ai du mal à voir ce que je pourrais mettre de plus

Wow en tous cas c'est torturé comme façon de faire
Je vois pas bien l'intérêt d'utiliser des <td> si c'est pour redéfinir dans le css que en fait ils n'ont pas la sémantique de cellules.

Au niveau du html, la version en <li> a l'air l'a plus appropriée, quoi que le sous-menu devrait être dans un <ul> imbriqué. en plus ça devrait pouvoir se css-iser bien non ?

spectras :
Wow en tous cas c'est torturé comme façon de faire
Je vois pas bien l'intérêt d'utiliser des <td> si c'est pour redéfinir dans le css que en fait ils n'ont pas la sémantique de cellules.

Au niveau du html, la version en <li> a l'air l'a plus appropriée, quoi que le sous-menu devrait être dans un <ul> imbriqué. en plus ça devrait pouvoir se css-iser bien non ?

tu voudrais faire comment pour que ça soit moins torturé ?
bah sémantiquement, le li me semble le plus adapté, non ?
mais je ne sais pas le faire en ligne sous IE-6

(l'intérêt des td, ça aurait été de les faire afficher en ligne sur IE-6, mais je ne sais pas les faire en colonne avec une autre CSS )

Oui, le li semble le plus adapté.
IE ne prend pas en compte le display: inline ?

j'ai utilisé display: table-cell
si j'utilise du display:inline, j'obtiens ce genre de résultats :

les 2 carrés rouges correspondent au même SPAN qui n'est pas du tout rectangulaire

J'avoue que le résultat est quelque peu.....troublant. J'ai pas le temps pour essayer de comprendre ce qu'il se passe malheureusement.