28172 sujets

CSS et mise en forme, CSS3

Avec display:table-cell forcer un élément à passer à la ligne suivante

Bonjour, avec grand plaisir (cela fait quelque temps que je ne suis pas intervenu sur le forum)

Lorsque des éléments sont affichés à l'aide de display: table-cell, est-il possible de forcer un élément à la ligne suivante ?

Voici mon cas d'application :

J'ai une liste de définition dans laquelle je veux que le terme et la définition soient alignés (les xxx en jaunes ont été placés pour assurer l'alignement, les espaces successifs n'étant pas affiichés dans le message et le blanc ne faisant pas partie des couleurs prévues) :

xxxxtermexxxtexte de la definition (qui représente a minima un paragraphe,
xxxxxxxxxxxxxvoire plusieurs paragraphes successifs inclus dans la balise dd)

Pour l'instant, je résous cela en affichant le terme en flottant.

J'aimerais cependant utiliser les possibilités de display: table-cell qui me semblent bien attrayantes.

Mais si je déclare dt et dd en display: table-cell, le tableau obtenu essaie d'afficher sur une ligne tous les items dt et dd, ce qui n'est pas vraiment l'effet recherché. (J'ai essayé de donner une largeur aux deux items de façon à ce qu'ils occupent toute la largeur disponible, mais je n'ai pas réussi à obtenir le résultat escompté.)
Comment puis-je indiquer qu'un item dt doit être systématiquement affiché à la ligne suivante ?



PS : Le résultat n'est pas destiné à un navigateur mais à une documentation générée en pdf par PrinceXML qui est un outil remarquable pour réaliser à partir de xhtml-css des documents de haut niveau de mise en page allant bien plus loin que les versions pdf de sites Web. (En outre, PrinceXML interprète précisément la quasi totalité des propriétés css 2.1 et commence à intégrer des possibilités de css3.)

Je vous adresserai bientôt un post à ce sujet en vous montrant des exemples de réalisation relativement sophistiqués.
Modifié par cadbor (10 Jul 2011 - 13:12)
Bonjour à toutes et à tous,
<!doctype html>
<html>
<head>
<title>test</title>
<style type="text/css">
* {
		margin				: 0;
		border				: none;
		padding				: 0;
}

body {
		background-color	: grey;
}

dl#boite {
		position			: absolute;
		top					: 50px;
		left				: 400px;

		background-color	: yellow;
		width				: 200px;
}


dl#boite > dt,
dl#boite > dd {
		display			: block;
		text-align			: center;
}

dl#boite > dt {
		background-color	: red;
}

</style>
</head>

<body> 
<dl id="boite">
	<dt>terme 1 :</dt>
	<dd>définition 1 a</dd>
	<dd>définition 1 b</dd>
	<dd>définition 1 c</dd>
	<dd>définition 1 d</dd>

	<dt>terme 2 :</dt>
	<dd>définition 2 a</dd>

	<dt>terme 3 :</dt>
	<dd>définition 3 a</dd>
</dl>
</body>
</html>
@+
Modifié par Artemus24 (10 Jul 2011 - 18:39)
Merci de ta réponse Artemus,

Mais ce n'est pas exactement ce que je cherche à obtenir Smiley smile

Je cherche à placer la définition en face du terme (comme montré dans mon post) dans une documentation prévue pour être imprimée (pdf généré par PrinceXML), qui sera réalisée par quelqu'un d'autre que moi et dont j'ignore à l'avance le contenu et l'organisation détaillée.

La feuille de style que je conçois pour mes futurs utilisateurs propose une liste de définition dont la disposition respecte la règle de mise en page terme - définition en face, la quantité de texte de la définition étant inconnue et pouvant être éminemment variable.

Actuellement, j'utilise la propriété float left pour le terme, la définition étant naturellement affichée à droite (à quelques ajustements près).

Je voudrais obtenir la même chose mais avec display: table-cell.

D'où ma question.
Bonsoir à toutes et à tous,

Ajoute ce code CSS, et tu auras, sur la première ligne, le titre et la définition. A partir de la deuxième ligne, la définition sera sur une seule ligne !
* {
		margin				: 0;
		border				: none;
		padding				: 0;
}

body {
		background-color	: grey;
}

dl#boite {
		position			: absolute;
		top					: 50px;
		left				: 400px;

		background-color	: yellow;
		width				: 600px;
}

dl#boite > dt, 
dl#boite > dd {
		text-align			: center;
}

dl#boite > dt {
		background-color	: red;
		float				: left;
}
@+
Modifié par Artemus24 (10 Jul 2011 - 23:59)
Bonsoir (ou bonjour, suivant l'heure de lecture de cette réponse)

Merci de ta réponse.

Je précise toutefois que ma question n'est pas " comment puis-je obtenir l'effet désiré ? " — je l'obtiens par float:left appliquée au terme, comme tu le suggères — mais bien " est-il possible d'obtenir la même chose avec display: table-cell, en forçant le terme en début de ligne ? "

(display: table-cell me semble intellectuellement plus satisfaisant ; maintenant, si je peux utiliser cette possibilité, je conserverai la technique float:left que j'utilise et qui marche)
bonsoir,

non, sans float tu ne pourras pas obtenir ce que tu souhaite avec ce balisage.

Si float est une solution qui te va bien , il te manquera les possibilité d'alignement vertical, pour le fond , il y a la technique des "colonnes factices".

Pour regrouper terme et définition sur une seule ligne tu auras besoin d'un conteneur parent a formater en display:table-row;(ou table ou a laisser par defaut en block)

La solution est probablement de revoir ton balisage et laissant tomber la liste de définition si tu tiens a display:table et Cie .

peut-être simplement : div - hx - p , ou se pencher aussi vers les balise html5 voir si il n'y aurait pas d'autres pistes a suivre en terme de sémantique/description/poids/place du/des contenu/s dans le document.

Un tableau ne semble pas inapproprié non plus dans le fond.

Bonne continuation
GC
franchement la solution float est la plus simple et efficace, vu que les balises dt et dd sont filles du même conteneur et donc au même niveau, table cell est inappropriée vu que cela transforme ta liste verticale en liste horizontale et qu'il n'y a rien pour indiquer le nombres de colonnes du tableau, la structure actuelle des tableaux html empêche cela.
Merci pour vos deux réponses.

Je reste effectivement sur la solution float:left pour le terme.

Mais je vais essayer d'introduire automatiquement un div encadrant chaque couple dt dd et formaté en dispay: table-row. (Ma feuille de style est accompagnée d'un programme php réalisant plusieurs tâches complémentaires. Je peux y rajouter cette routine transparente à l'utilisateur qui écrira son document en utilisant le rythme naturel dt - dd.)

Bonne journée à toutes et à tous
Bonjour à toutes et à tous,

je relance le sujet, en utilisant les tables. Est-ce que cette solution convient mieux que celle précédemment sité ?
<!doctype html> 
<html> 
<head> 
<title>test</title> 
<style type="text/css"> 
* { 
		margin				: 0; 
		border				: none; 
		padding				: 0; 
} 
 
body { 
		background-color	: grey; 
} 
 
table#boite { 
		position			: absolute; 
		top					: 50px; 
		left				: 400px; 
 
		background-color	: yellow; 
		width				: 200px; 
} 

table#boite td {
		vertical-align		: top;
}

</style> 
</head> 
<body>

<table id="boite">
	<tr><td rowspan="4">terme 1 :</td>
		<td>définition 1 a</td></tr>
	<tr><td>définition 1 b</td></tr>
	<tr><td>définition 1 c</td></tr>
	<tr><td>définition 1 d</td></tr>

	<tr><td>terme 2 :</td>
		<td>définition 2 a</td></tr>

	<tr><td>terme 3 :</td>
		<td>définition 3 a</td></tr>

	<tr><td rowspan="2">terme 4 :</td>
		<td>définition 4 a</td></tr>
	<tr><td>définition 4 b</td></tr>

</table>
</body> 
</html>
Personnellement, cette solution ne me plait pas trop, mais elle a le mérite d'aligner en deux colonnes toutes les définitions. Ce qui est un plus pour la présentation des résultats.

@+
Modifié par Artemus24 (12 Jul 2011 - 00:45)
Administrateur
Le sélecteur universel * c'est mal pardon pas performant du tout, source d'erreur et inutile. Met à zéro ce que tu as besoin de mettre à zéro et combine-les avec des virgules.
cadbor a écrit :

Mais je vais essayer d'introduire automatiquement un div encadrant chaque couple dt dd


Bonsoir,

oups, non ! dl ne peut avoir que des dt ou dd comme enfant , exit le div Smiley smile ... d'ou ma proposition de revoir le balisage.

Si tu tiens au liste de definition alors genere une dl par definition .
<div>
<dl>
<dt>terme a</dt>
<dd>details</dd>
</dl>
<dl>
<dt>terme b</dt>
<dd>details 1b</dd>
<dd>details 2b</dd>
<dd>details 3b</dd>
</dl>
</div>

et 
div {display:table;}
dl {display:table-row;}
dt, dd {display:table-cell;}


Ce choix ne serait pas forcement le mien mais html/css semblent rester cohérent sans bidouilles apparentes ni avantage particulier face à un tableau bien costaud.

++
Modifié par gc-nomade (11 Jul 2011 - 22:35)
Bonsoir à toutes et à tous,

Felipe a écrit :
Le sélecteur universel * c'est mal pardon pas performant du tout, source d'erreur et inutile. Met à zéro ce que tu as besoin de mettre à zéro et combine-les avec des virgules.
Alors pourquoi le sélecteur universel existe-t-il si on n'a pas le droit de l'utiliser ?

Si je veux supprimer les margin border et padding par défaut de toutes les balises, je procède comment ?

Crois-tu que cela soit plus judicieux de remplir la feuille de styles avec de la répétition de propriétés à appliquer à toutes les balises, classe, id et attribut ?

Et en plus, dans la littérature, je n'ai rien vu sur les interdictions de ce sélecteur ? Ce n'est pas parce que dans le passé des individus ont fait une mauvais utilisation de ce sélecteur qu'il faut maintenant s'interdire son usage. Je pense entre autre au RESET dont une feuille de styles était réservé à cet usage.

Question performance, je n'ai rien vu entre son emploi et son absence, d'autant que chez moi je ne l'utilise que pour margin border et padding et rien d'autre.

Et en plus, en quoi c'est une source d'erreur ? Justement, je ne veux pas dépendre des aléas de chaque navigateurs qui font ce qu'ils veulent.

@+
Modifié par Artemus24 (12 Jul 2011 - 00:47)
L'utilisation du sélecteur universel pose effectivement de gros problèmes au niveau performances du navigateur, le mieux c'est le reset css comme celui de html5 boilerplate.
Administrateur
Artemus24 a écrit :
Alors pourquoi le sélecteur universel existe-t-il si on n'a pas le droit de l'utiliser ?

Personne n'a dit qu'on n'avait pas le droit de l'utiliser, simplement qu'il pose des problèmes non négligeables de performance.
(Pourquoi la police Comic Sans existe-t-elle ? Smiley cligne )
Modifié par Raphael (13 Jul 2011 - 07:54)
Bonjour Raphael,

avec un mois de retard, je te souhaite un bonne anniversaire ! OUI, moi aussi je suis gémeaux.

Pourquoi la "police comic sans" existe-t-elle ? Je dirais simplement pour les gens qui veulent s'en servir ! Si elle existe, c'est justement pour s'en servir sinon je ne vois pas l'intérêt.

Donc je ferai aussi la même remarque pour le sélecteur universelle. Pourquoi créer un outil ou une propriété pour justement ne pas s'en servir ? A moins d'aimer faire des choses compliquées. Du genre, je n'utilise pas le sélecteur universelle mais par contre, sur toutes les balises je vais mettre ou je devrais dire répéter la même propriété, quitte à le faire un millier de fois car j'ai une énorme feuille de styles.

Et bien non, je ne comprends pas cette notion de performance. Simplement en voulant résoudre un problème (d'ailleurs je ne l'ai jamais constaté) tu en crées un autre.

Mais vous allez me dire que 20K de plus sur une feuille de styles et bien c'est pas très volumineux.

Bon, je dirais que c'est une opinion mais ce n'est pas la mienne. Sinon pourquoi je vois de plus en plus de code compressé ?

Donc pour ne pas être idiot sur la question du sélecteur universelle, quels sont ces problèmes de performances ?

@+
Modifié par Artemus24 (13 Jul 2011 - 18:13)
Sujet clos
Aller à