1

yop,

On ne change pas une équipe qui gagne, j'ai un petit problème de CSS pour lequel je n'ai trouvé aucune bonne solution. Je voudrais afficher une liste d'éléments de type <li> en les disposant de gauche à droite, puis en passant à la ligne suivante quand il n'y a plus de place. En gros, quelque chose dans ce genre là (au besoin réduisez la largeur de la fenêtre pour que plusieurs lignes soient visibles).

Pour ça, j'ai juste changé la css des <li> pour qu'ils soient en "float:left". Le problème, c'est que quand l'un de ces éléments est plus haut (en taille, pas en position) que les autres, ça provoque un décalage sur les lignes suivantes, comme ceci. Je voudrais que la ligne suivante se place aussi bas que nécessaire pour pouvoir commencer tout à gauche.

Pour le moment, j'ai forcé la hauteur des éléments comme ceci, mais du coup certaines lignes prennent bien plus de hauteur que ce dont elles auraient besoin, et si le texte d'un élément est trop long, il sera coupé en plein milieu.

Une astuce ? (merci hehe)
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

2

Tu peux peut-être mettre un tooltip en hover sur tes icônes pour permettre de voir le texte entier ?
Sinon la première solution à laquelle j'aurais pensé pour des lignes de tailles variables et une disposition à la suite, c'est display: inline, mais apparemment ça marche pas très très bien.
Ce que tu peux essayer par contre, et qui a l'air de fonctionner plus ou moins, c'est d'insérer des éléments en float: right et clear: left dans ta disposition.
A regarder comment mettre ça mais a priori il t'en faudrait un par ligne potentielle, donc un par élément....
En gros <li/><li class="disposition"/>... enfin bon je vais pas m'attarder tongue
avatar
Le scénario de notre univers a été rédigée par un bataillon de singes savants. Tout s'explique enfin.
T'as un problème ? Tu veux un bonbon ?
[CrystalMPQ] C# MPQ Library/Tools - [CrystalBoy] C# GB Emulator - [Monoxide] C# OSX library - M68k Opcodes

3

le problème avec display:inline, c'est qu'un objet en inline occupera toujours 100% de la largeur de son conteneur, donc ça passe pas :/

et l'autre solution, si je comprends bien t'es obligé de fixer une fois pour toute le nombre d'éléments par ligne ? (donc si le mec a pas la même résolution que toi, il verra trop peu d'éléments par ligne ou bien à l'inverse des retours à la ligne en plein milieu d'une ligne) c'est un peu dommage quand même :/
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

4

GoldenCrystal (./2) :
Tu peux peut-être mettre un tooltip en hover sur tes icônes pour permettre de voir le texte entier ?

J'aurais bien fait ça aussi (couper la description à 16 caractères, par exemple, et afficher l'information supplémentaire dans une info-bulle ou un truc du genre)
avatar

5

Zephyr (./3) :
le problème avec display:inline, c'est qu'un objet en inline occupera toujours 100% de la largeur de son conteneur, donc ça passe pas :/

Tu veux dire de son contenu non ? grin
et l'autre solution, si je comprends bien t'es obligé de fixer une fois pour toute le nombre d'éléments par ligne ? (donc si le mec a pas la même résolution que toi, il verra trop peu d'éléments par ligne ou bien à l'inverse des retours à la ligne en plein milieu d'une ligne) c'est un peu dommage quand même :/

Oui en fait je viens de revérifier, c'est pourri, mais bon, le clear: left c'est le seul moyen que je vois pour forcer une hauteur de ligne.
Si tu peux te permettre le javascript à la limite... il suffit de changer dynamiquement tes éléments entre clear: none et clear: left... C'est pas beau mais à priori relativement rapide (sachant qu'une fois le travail sur la première ligne effectué, toutes les autres sont similaires)
Après faudrait regarder du côté de display: inline-block, mais firefox ne le supporte pas et j'arrive a rien avec -moz-inline-block...
avatar
Le scénario de notre univers a été rédigée par un bataillon de singes savants. Tout s'explique enfin.
T'as un problème ? Tu veux un bonbon ?
[CrystalMPQ] C# MPQ Library/Tools - [CrystalBoy] C# GB Emulator - [Monoxide] C# OSX library - M68k Opcodes

6

GoldenCrystal (./5) :
Tu veux dire de son contenu non ? grin

Non non, de son conteneur; en l'occurence mettre les li en display:inline aura pour effet de leur faire prendre toute la largeur de la page (et donc de les retrouver les uns en dessous des autres)

[edit] bon en fait pas du tout, c'était juste une conséquence du fait que cet élément contenait lui-même un élément en display:bloc, ce qui est interdit. ceci dit le problème reste entier : impossible de définir la largeur de l'élément si il est en display:inline sad
Oui en fait je viens de revérifier, c'est pourri, mais bon, le clear: left c'est le seul moyen que je vois pour forcer une hauteur de ligne.
Si tu peux te permettre le javascript à la limite... il suffit de changer dynamiquement tes éléments entre clear: none et clear: left... C'est pas beau mais à priori relativement rapide (sachant qu'une fois le travail sur la première ligne effectué, toutes les autres sont similaires)
Après faudrait regarder du côté de display: inline-block, mais firefox ne le supporte pas et j'arrive a rien avec -moz-inline-block...

Je connaissais pas inline-block, je vais regarder mais d'après le nom ça pourrait être une solution. Par contre si ça pose des problèmes de compatibilité selon les navigateurs, c'est pas top. Le javascript même si c'est rapide je trouve ça très dommage, je suis pas vraiment fan du bricolage javascript pour rectifier des bugs d'affichage (ok quand l'affichage est entièrement réalisé en js, ok quand il n'est pas possible de faire autrement, mais là j'ai du mal à croire que ce soit sans solution :/)
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

7

Bon, après quelques recherches supplémentaires, je n'ai toujours aucune réponse. Au pire, je pense utiliser la solution que vous avez proposé (./2, ./4), mais comme IE a beaucoup de mal avec les z-index, ça foire complètement avec >_<
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

8

9

oui c'est ce que j'ai dit, c'est IE qui a un problème avec les z-index, ailleurs (enfin je n'ai testé que FF et Opera) ça marche sans problème :/
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

10

Bah, tu t'en fous des navigateurs qui ne respectent pas les standards. gni

(Ça marche très bien avec Konqueror aussi, au passage.)
avatar
Mes news pour calculatrices TI: Ti-Gen
Mes projets PC pour calculatrices TI: TIGCC, CalcForge (CalcForgeLP, Emu-TIGCC)
Mes chans IRC: #tigcc et #inspired sur irc.freequest.net (UTF-8)

Liberté, Égalité, Fraternité

11

Vu que la majorité des utilisateurs ont ce navigateur, non je ne m'en fous pas. Konqueror, par contre, j'en ai effectivement rien à foutre grin
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

12

Konqueror a ça de bien qu'il fait un navigateur de plus à ajouter à la liste des navigateurs supportés, pour un coût 0 : j'ai jamais vu de site marcher sous FF et pas sous Konqueror.

13

spectras (./12) :
Konqueror a ça de bien qu'il fait un navigateur de plus à ajouter à la liste des navigateurs supportés, pour un coût 0 : j'ai jamais vu de site marcher sous FF et pas sous Konqueror.

je ne sais pas si c'est encore le cas, mais fut un temps où Konqueror était à la bourre niveau JS par rapport à Firefox (ça se voyait avec la gestion des citations sur yN ^^)
avatar
<<< Kernel Extremis©®™ >>> et Inventeur de la différence administratif/judiciaire ! (©Yoshi Noir)

<Vertyos> un poil plus mais elle suce bien quand même la mienne ^^
<Sabrina`> tinkiete flan c juste qu'ils sont jaloux que je te trouve aussi appétissant

14

La coopération avec les développeurs de Apple sur le moteur a bien aidé à combler le retard. smile

15

Pas vraiment, Apple a été très peu coopératif, ils ont sorti de gros code drops au départ, et quand ils ont commencé à être plus ouverts, leur fork avait déjà énormément divergé de KHTML. De plus, ils s'en foutent complètement si leurs changements sont acceptables (qualité du code, maintenabilité, ...) pour les mainteneurs de KHTML (et il se trouve que pas mal de leurs modifications sont justement des hacks très sales faits à la va-vite), c'est du "prends ça ou casse-toi". Je n'appelle pas ça de la "coopération". Le résultat de cette "coopération", et du fait que Trolltech a choisi d'intégrer WebKit dans Qt, c'est qu'on va se retrouver avec 2 forks du même code dans KDE 4.1 (il est prévu que Plasma va utiliser QtWebKit et que Konqueror va garder KHTML). sad Génial comme "coopération", hein...
avatar
Mes news pour calculatrices TI: Ti-Gen
Mes projets PC pour calculatrices TI: TIGCC, CalcForge (CalcForgeLP, Emu-TIGCC)
Mes chans IRC: #tigcc et #inspired sur irc.freequest.net (UTF-8)

Liberté, Égalité, Fraternité

16

Kevin Kofler (./15) :
Pas vraiment, Apple a été très peu coopératif, ils ont sorti de gros code drops au départ, et quand ils ont commencé à être plus ouverts, leur fork avait déjà énormément divergé de KHTML. De plus, ils s'en foutent complètement si leurs changements sont acceptables (qualité du code, maintenabilité, ...) pour les mainteneurs de KHTML (et il se trouve que pas mal de leurs modifications sont justement des hacks très sales faits à la va-vite), c'est du "prends ça ou casse-toi". Je n'appelle pas ça de la "coopération". Le résultat de cette "coopération", et du fait que Trolltech a choisi d'intégrer WebKit dans Qt, c'est qu'on va se retrouver avec 2 forks du même code dans KDE 4.1 (il est prévu que Plasma va utiliser QtWebKit et que Konqueror va garder KHTML). sad Génial comme "coopération", hein...

C'est surtout HS, en l'occurence...
avatar
<<< Kernel Extremis©®™ >>> et Inventeur de la différence administratif/judiciaire ! (©Yoshi Noir)

<Vertyos> un poil plus mais elle suce bien quand même la mienne ^^
<Sabrina`> tinkiete flan c juste qu'ils sont jaloux que je te trouve aussi appétissant

17

!up

j'ai à peu près le même problème, aurais-tu conservé la solution quelque part ?

J'ai une liste d'éléments (soit des vidéos Youtube, soit des images qui n'ont pas toujours le même rapport L / H), et j'aimerais les disposer comme dans ton ./1 ^^
avatar
<<< Kernel Extremis©®™ >>> et Inventeur de la différence administratif/judiciaire ! (©Yoshi Noir)

<Vertyos> un poil plus mais elle suce bien quand même la mienne ^^
<Sabrina`> tinkiete flan c juste qu'ils sont jaloux que je te trouve aussi appétissant

18

je crois pas, mais il faut dire que le fait que les liens du ./1 soient mort n'aide pas vraiment grin

au final j'étais resté sur la solution proposée par GoldenCrystal, à savoir des éléments de hauteur fixe qui changent de taille si nécessaire quand la souris passe dessus (ça donne ça, passe la souris sur le nom du 1er fichier de la liste)
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

19

Aucune entrée ne correspond à votre demande, veuillez vérifier l'exactitude des données saisies.
Les fichiers et dossiers "privés" n'apparaissent que pour leur propriétaire

sad

Mais dommage si tu n'as pas de solution sad
La question était pour le bas de la page, je ne sais pas trop comment arranger proprement les photos et les vidéos.
avatar
<<< Kernel Extremis©®™ >>> et Inventeur de la différence administratif/judiciaire ! (©Yoshi Noir)

<Vertyos> un poil plus mais elle suce bien quand même la mienne ^^
<Sabrina`> tinkiete flan c juste qu'ils sont jaloux que je te trouve aussi appétissant

20

ah merde mauvais lien, j'ai édité, mais de toutes façons ça ne répond pas à ta question.

du coup je ne sais point sad
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)