28172 sujets

CSS et mise en forme, CSS3

Bonjours. J'ai un soucis très simple mais sans doute compliqué (voir impossible) à réaliser, puisque je n'ai trouvé aucune doc ni problèmes similaires utiles Smiley decu

Voici "l'intitulé" ^^. J'ai une page html de la sorte (qui est une sorte d'image de ma véritable page)

<div id="bloc">
     <ul>
            <li>blablabla</li>
            <li>blablabla</li>
            <li>blablabla</li>
     </ul>
</div>

Et le code css

#bloc
{
     overflow:hidden;
     height:200px;
}


Or, j'ai x li, donc à un instant donné je peux en avoir 5 comme 10. Et, j'aimerais bien remplir totalement le bloc avec ces li. (et de ce fait, ne pas mettre une valeur arbitraire de li qui correspondrait approximativement au remplissage du bloc).

Bon, c'est en gros ce que donne ce code puisque les li "en trop" sont cachés par le overflow. Néanmoins, par soucis de lisibilité, j'aimerais bien amélioré cet overflow dans le sens ou parfois, les derniers li sont coupé en deux dans le sens horizontal. (comportement normal du overflow hidden). Moi, ce que je voudrais bien, c'est que le li soit, totalement vu (et donc dans les limites du bloc) ou, totalement invisible. Mais surtout pas un mixte (donc ne voir qu'une partie du li).

Alors, pensez vous que cela est t'il possible en css ? (et si non, en javascript, même si je préfèrerais le css pure)

En tout cas, un grand merci x)
Au revoir
Pas de soucis, c'est sans doute ma faute (moi et les explications) ><

Voici une image : A droite, cque je voudrais. A gauche, exemple de ce qui se passe actuellement, c'est à dire un li coupé, en bas du bloc coloré (bon ici, il est relativement bien coupé mais il manque la moitié du li puisque celui-ci tiens sur deux lignes, donc c'est pas bon non plus).


http://img697.imageshack.us/img697/5924/sanstitre2mi.png
Bonjour,

La seule solutions qui me vient à l'esprit serait de calculer la hauteur des li affichés en JavaScript et de masquer ce qui dépasse.

Bon par contre, niveau accessibilité, c'est pas génial ton system : si l'utilisateur aggrandi la taille des caractère, une partie du contenu qui devrait être affiché sera masquée. Il serait préférable de déterminer un nombre de <li> à afficher et de laisser le bloc prendre la place dont il a besoin.
Modifié par Laurie-Anne (26 Jan 2010 - 08:22)
OK, c'est le concept de text-overflow:ellipsis (pas super implémenté...) mais appliqué à des blocs entiers plutôt qu'à des mots. Rien de prévu pour ça à ma connaissance en CSS, et pas de moyen CSS en particulier pour y arriver. En général on fait juste l'inverse: on adapte le conteneur au contenu. Smiley smile

Sinon, tu peux effectivement calculer en JavaScript si le point bas de ton élément est plus bas que la bordure du conteneur, et masquer l'élément si c'est le cas.
Ouip. Je pensais bien qu'en javascript c'était possible mais je ne suis pas trop chaud. Enfin bon, s'il n'y a pas d'autres solutions ... On va voir cela.

En faite, le problème d'adapter le contenu au conteneur, c'est que la taille des grands blocs (comme ici, le bloc sport) sera variable. Et sachant qu'il existe plusieurs blocs, qui sont les uns au dessous des autres, avec plusieurs blocs par ligne (donc en float left), bah résultat, cela ne serait pas très jolie.

@ Laurie-Anne : Justement non, j'ai testé, et niveau accessibilité c'est le top : Bon, ok, différents utilisateurs n'ont pas le même contenu car certains li sont caché, mais avec un nombre de li fixe, cela reviendrait au même. (j'ai testé et pour la config 800*600, certains sont cachés).
Sauf que dans tous les cas, j'ai un lien "Voir tout" qui affiche tous les li. Donc finalement, je pense que ce n'est pas un gros soucis.

J'y pense, à la limite, comme tous mes li sont présent dans un traitement php, peut être qu'avec un peut d'astuce, je peux calculer le nombre de li qu'il faut exactement pour tomber pile. Vais voir ca, mais cela sera sans doute de l'approximatif. Bah, c'est mieux que rien ^^

Merci à vous. Je laisse le sujet ouvert, on ne sait jamais Smiley cligne