28221 sujets

CSS et mise en forme, CSS3

[Resolu] Dl les uns à côté des autres avec retour à la ligne auto

Pages :
J'ai des <dl> de largeur fixe mais de hauteur variable. Si je met floats avec la la hauteur variable ça fait nimp. Si je mets inline je n'ai plus la largeur fixe.

Je cherche une solution qui passe pour ie aussi donc pas de bloc inline ni de table-cell ou autre geckos-rie.
Modifié le 25 Jan 2005 - 16:12
Le contexte général de la page, un morceau de code ou une page en ligne serait un plus indéniable. Smiley cligne
Modifié le 20 Jan 2005 - 01:15
littlesam a écrit :
ça fait nimp


Donc j'imagine que tu voudrais que "ça fasse" autre chose que "nimp"... déjà un point de réglé, on sait ce que tu ne veux pas (encore que "nimp" je ne connaisse pas vraiment).
Modifié le 20 Jan 2005 - 02:44
Je crois que de toute façon, il n'y a pas de solution, les float de la 2eme ligne s'aligneront sous la ligne de la plus grande hauteur de la ligne du dessus. Je suppose que c'est ça le nimp en question.

Il n'y a pas de solution à priori, sinon d'adapter la hateur des autres <dl> à coté du grand dl à la même taille. Sinon, une solution à base de fauxcolumns pourrait être envisagée pour leurrer l'effet, mais encore faudrait il que nous ayons le rendu final souhaité Smiley cligne

Sinon, je suppose qu'un tableau ferait l'affaire, mais là c'est à toi de voir, tu connait notre position suite à un précédent post de toi, il faut que tu fasses ce qui te semble le plus adapté à tes besoins, mais nous n'iront pas te dire que wahou c'est bien alors que les <dl> en float marchent correctement à un petit soucis graphique près Smiley langue
C'est justement le contraire, ils ne s'alignent pas sous celui le plus grand.

|--------|   |--------|   |--------|
|--------|   |--------|   |--------|
|--------|
|--------|   |--------|   |--------|
             |--------|   |--------|
                          |--------|
|--------|
|--------|

Une bidouille assez crado consisterais à mettre un <hr/> ou un div vide juste en dessous d'une "ligne" mais la modolarité du truc est quasi nulle.

J'attends un résultat comme ça moi :

|--------|   |--------|   |--------|
|--------|   |--------|   |--------|
|--------|
|--------| 

|--------|   |--------|   |--------|
|--------|   |--------|   |--------|
             |--------|

Edit : voilà le problème en ligne http://studiopixies.free.fr/tutorials.php
Modifié le 20 Jan 2005 - 11:08
Il est bizarre ton code Smiley confus
Tu as un dl par image, lequel dl est dans un div. Tu ne devrais pas plutôt avoir un dl pour toute ta liste, avec un couple dt/dd par item ?
Solution éventuelle : mettre une hauteur à ton dt, en em. Ainsi, tous tes dt auront la même hauteur. Tes dd ayant (apparemment) toujours la même hauteur, tu ne devrais plus avoir de problème.
Arf non je dis des bêtises : ça ne résoud pas le problème de solidarité en le dt et le dd. Une liste avec des li serait certainement plus facile à gérer.

A mon avis, 2 façon de voir les choses :
- plusieurs dl, une par élément, et tu peux abandonner les div. Il te suffira de faire flotter le dl
- un ul avec li, mais chaque élément devrait être décomposé en titre et image

J'oubliais : j'espère que cet article du site pompage.net pourra t'aider
Modifié le 20 Jan 2005 - 11:31
Oups en effet la répétition des divs est une erreur dans ma génération de page par php. C'était un gros div avec plein de dl dedans que je pensais avoir fait Smiley sweatdrop
Je vais déjà corriger ça.

Edit: C'est corrigé. Mais ça se place toujours pas comme il faut.

Je n'aime pas l'idée de définir une hauteur fixe pour un texte variable. On fini toujours par avoir des problèmes (une partie du texte caché) avec ce genre de méthode.
Modifié le 20 Jan 2005 - 11:51
En c'est impossible ?
Je vais quand même pas mettre un tableau après tout mal que j'ai eu à m'en débarrasser.... ça commence à gaver Smiley decu
C'est que je vais faire faute de mieux mais pour la modularité je comptais mettre une feuille de style alternative fluide, c'est dommage.

Le hr me pose un problème esthétique, je vais plutot mettre mes "lignes" de dt dans un div qui aura un clear: both; mais je ne sais pas comment ça va se gouipiller avec les flottants, je teste et je vous dis.
littlesam a écrit :
Le hr me pose un problème esthétique, je vais plutot mettre mes "lignes" de dt dans un div qui aura un clear: both; mais je ne sais pas comment ça va se gouipiller avec les flottants, je teste et je vous dis.

Pour le hr tu peux le cacher tout en lui laissant la possibilité de lui faire remplir son rôle avec visibility:hidden.
Marvin Le Rouge a écrit :
Mais ça oblige à décider par avance du nombre d'items par ligne.
Dommage Smiley decu

C'est vrai que c'est dommage, mais avec un conteneur de largeur fixe et des dl de largeur fixe on peut avoir une idée du nombre de dl par ligne.
Oui, c'est justement ça qui est dommage : fixer la taille du conteneur.
Pour le hr c'est vrai qu'on peu le mettre hidden mais ça oblige à faire un css pour l'impression pour pas avoir ce gros trait horrible.
littlesam a écrit :
Oui, c'est justement ça qui est dommage : fixer la taille du conteneur.
Pour le hr c'est vrai qu'on peu le mettre hidden mais ça oblige à faire un css pour l'impression pour pas avoir ce gros trait horrible.


Hein ? Pourquoi un gros trait horrible ? Si le hr est hidden, il ne s'imprime pas, non ?
Si, j'ai une feuille de style screen donc l'impression se fait sans feuille de style (ça évite de bouffer l'encre pour rien en imprimant des images à tout va).
littlesam a écrit :
Si, j'ai une feuille de style screen donc l'impression se fait sans feuille de style (ça évite de bouffer l'encre pour rien en imprimant des images à tout va).

Faire une feuille de style d'impression avec le media print, non ?
Pages :
Sujet clos
Aller à