Reprise du message précédent :
Salut tout le monde,  
petite question.
 
Quelle est la meilleur méthode pour faire ça en html/css ?
 
http://images.koskoz.info/liste.gif

Un tableau avec 4 colonnes et deux lignes ?
Mieux : Un tableau avec 2 colonnes et 2 lignes, chaque cellule contient un tableau à deux colonne une ligne  

Une liste avec des li floatés et une taille pour warper.

Ben il a déja l'image, suffit d'en faire une map

Un tableau 2 colonnes 1 ligne, chaque cellule contenant chacune une liste de 2 éléments.

Bon les Eric&Ramzy du WEB2.0 ça vous dirait pas d'aller faire vos blagues ailleurs

Bon, si j'ai bien compris je définis une taille pour la hauteur histoire que les nouveaux éléments aillent à la ligne et je fais flotter le tout ?

Merci.

en largeur la taille, non ?

 
  Balaise, ça à l'air bien intéressant.

 
Dans ce cas je ne vois pas comment ça peut se scinder en deux colonnes

Tu ferais pas du flash par hasard?  

J'ai du mal à saisir comment tu veux scinder en 2 colonne en fixant une hauteur ...

Si tu as un conteneur de 400 de large, et dedans tu as des li de 200 de large ... tu penses qu'il se passe quoi ?

Eh oh, stait pour proposer autre chose, au cas ou ça t'aie plu hein  

 
Je pensais tout bêtement que si le conteneur fait 200 de haut et que tu en as pour 400px au total, lorsque le troisième ne pourra pas se placer en dessous du deuxième il se mettra sur sa droite.

 
Hey, what about learning the Web ?

Boarf, si c'est que pour avoir une liste unique, une css qui va bien et pis basta hein...

 
C'est ce même comportement qui est utilisé quand un bloc n'est pas assez large pour afficher tout le contenu, ça va à la ligne, j'avais donc pensé que ça l'aurait aussi fait en hauteur

genre

?
 

 
Ouais.

Que ça soit au niveau de la lecture ou de la logique c'est d'une débilité monstre

Un navigateur écrit en gros comme toi tu écris
 
C-a-d pas en Mandarin

Evidement ça aurait été trop beau pour être vrai

En mm tps ça n'a rien de beau

Je parle juste de mon cas

En fait je pense que j'ai pensé à ça parce que je ne suis pas sûr d'avoir très bien compris le mot "warper" dans l'explication de Shinuza.

Bon
http://tredosoft.com/Multiple_IE toussa,

est-ce qu'il y a la même chose pour FF ?

 
non
 
 
il suffit d'installer chaque version dans un repertoire different, pas besoin de jouer du kiki

d'accord.

non ce n'est pas aussi simple, mais au mieux il telecharge des versions portables de Firefox (www.framakey.org ou www.portableapps.com)

Bah demande si t'as pas compris au lieu d'inventer des trucs tordus
 
En gros, si tu floates des élements dans un conteneur, il se suivent dans le flux. Ils se comportent alors commme des mots, en gros quand tu tapes un long mot dans un textarea et que tu rencontres le bord droit de celui ci, le mot passe à la ligne.
 
C'est pareil ici, tu définis un conteur d'une largeur de 400px et des li d'une largeur de 180px disons. Du coup t'as la place pour deux en largeur et le troisième passe à la ligne (il warp), ainsi de suite.

ouais mais ça s'écrit wrapper pas warper

Warper c'est ça:

Et si tu te ramenais au lieu de poster sur le forum

Bah, y'a une popriété css "white:nowrap"

 
nowrap oui ... pas nowarp

Ah oué, j'arrête pas de me gourer  

 
Merci bien  

On peut vraiment pas coupler un clear:both avec une margin-top ?

hein

deux

nan, pas les deux, apparemment

Incompétents

STFU

Si tu mets ne serait-ce qu'un pixel de haut à ton conteneur (celui qui contient le float) ta marge s'affichera, c'est simplement parce qu'il n'a pas de consistance. Problème qui serait réglé avec un contexte de formatage des familles

Ca peut aussi être parce que ton clear est pas au bon endroit

Merci.

Enfin ça marche pas là.

synthèse :

DA HTML :

<td>
  <ul>
    <li class="li1a">Petit avec marge au dessus</li>
    <li class="li1b">Petit avec marge au dessus</li>
    <li class="li2">Gros sans marge alors qu'il devrait</li>
  </ul>
</td>

DA CSS :

ul {     /* rajouté pour shinuza */
    overflow:hidden;  /* new contexte de f. */
    zoom:1;              /* " */ 
    _overflow:auto;   /* " */
}
li.li1a, li.li1b {
        height:12px;
    width:50px;
    margin-top:2px;
    float:left;    
}
li.li2  {
    height:12px;
    width:100px;
    margin-top:2px;
    clear:both;
}