28172 sujets

CSS et mise en forme, CSS3

Mise en page, largeur "à l'infini"

Salut,

je ne retrouve pas comment on fait pour pouvoir avoir une mise en page qui s'étend aux besoins en largeur.

L'idée c'est des "blocs" qui s'alignent sur la droite (là j'ai utilisé le positionnement flottant) et qui lorsque la place vient à manquer amènent une scroll bar horizontale pour afficher la suite.

Le comportement que j'obtient ici est le retour à la ligne du bloc flottant qui ne peut pas s'afficher sur la largeur disponible.

J'imagine qu'il y a une propriété à préciser au conteneur ou un truc du style...

Ce genre de mise en page est visible sur le CSS Zen Garden notamment (je ne retrouve plus lequel Smiley langue mais ça vous rafraichira peut être la mémoire ou éclaircira mon explication). Il y avait (je ne sais pas s'il existe toujours) un site français (type blog) mis en page de cette manière aussi. Il y avait une guêpe en haut à gauche du "design".

Merci si vous avez la solution ou si vous retrouvez les pages dont je parle.
++
Hop,

visuellement, oui c'est l'idée en effet. Par contre, c'est tout callé au pixel près sur ce design (si j'ai bien compris la feuille de style CSS).

Lorsque je fais un width: 200%; sur mon conteneur, j'obtient le résultat escompté de mon côté mais c'est pas très souple (trop large dans certains cas, pas assez dans d'autres, ...). (sur le design du Zen Garden, c'est une largeur importante qui est utilisée aussi)

En tout cas, ça illustre le résultat visuel que je souhaite, j'étais pas certain d'avoir été clair ! Smiley cligne

++

<edit>@ 6l20, idem c'est une largeur qui est utilisée ici Smiley decu il n'y a peut être pas d'autre solution ?
Modifié par Olivier (29 Jun 2008 - 20:20)
Hmm, ça manque aussi de flexibilité ici Smiley decu

Il me faudrait une largeur de conteneur qui s'adapte au contenu et les éléments contenu placé à l'aide de float. Il n'y a pas une propriété magique à appliquer sur le conteneur ou les éléments contenus ? Smiley langue

Sinon, comment vous trouvez les design que vous voulez sur le Zen Garden ??
Olivier a écrit :
Hmm, ça manque aussi de flexibilité ici Smiley decu

C'est pas bien surprenant: les navigateurs sont conçus pour lutter contre ce type de flexibilité, et renvoyer les contenus à la ligne dès que ça s'impose (largeur du viewport dépassée). Donc bon.

Olivier a écrit :
Il me faudrait une largeur de conteneur qui s'adapte au contenu et les éléments contenu placé à l'aide de float.

Avec du float, ça passera forcément à la ligne (c'est prévu comme ça), sauf à créer un conteneur de largeur fixe suffisante pour contenir les flottants (donc l'astuce pas souple dont on a déjà parlé).

Avec du display: inline-block, ça passera à la ligne aussi. À la rigueur, ça peut marcher avec du display: table-cell (ou un tableau, si on veut être compatible IE Smiley cligne ), et:
- soit des blocs de largeur fixe ou avec un min-width qui va bien dans les «cellules» du tableau;
- soit du table-layout: fixed.

Hmm... à la réflexion (et après test Smiley cligne ), non, pas table-layout: fixed. Donc un contenu de largeur fixe dans chaque cellule de tableau.

Test:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test page</title>
	<style type="text/css" media="screen">
	table {
		font-size: 1.2em;
		border: solid 1px red;
		border-collapse: collapse;
	}
	td {
		border: solid 1px red;
		padding: 15px;
	}
	td p {
		margin: 0;
		width: 500px;
	}
	</style>
</head>

<body>

<table>
	<tr>
		<td>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
		</td>
		<td>
			<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
		</td>
		<td>
			<p>Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.</p>
		</td>
		<td>
			<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
		</td>
		<td>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
		</td>
		<td>
			<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
		</td>
	</tr>
</table>

</body>
</html>
Hmm, c'est bien ce que je pensais que c'était le comportement des cellules de tableaux. (en effet les float sont pas prévus pour ça).

Bon... je vais réfléchir à utiliser display: table-cell; et voir un peu les dégats sur IE. (c'est purement une coquetterie visuelle qui ne nécessite pas l'utilisation de tableaux !)

En fait, j'espérais l'existence d'une propriété qui aurait le même type de comportement que le nowrap sur le texte.

En gros, faire un white-space: nowrap; sur les blocs directement enfant du conteneur.

J'sais pas si ça vous parle.

Anyway, je sais à quoi m'en tenir à priori.

Merci
Olivier a écrit :
En gros, faire un white-space: nowrap; sur les blocs directement enfant du conteneur.

Il faudrait plutôt un white-space: nowrap sur le conteneur et du display: inline-block sur les éléments de contenu.

Mon exemple précédent remanié:
table {
	display: block;
	font-size: 1.2em;
	border: solid 1px red;
	padding: 15px;
	white-space: nowrap;
}
td {
	display: inline-block;
	width: 500px;
	border: solid 1px blue;
	padding: 10px;
	white-space: normal;
}
td p {
	display: inline;
}
(Même code HTML.)
Modifié par Florent V. (29 Jun 2008 - 22:14)
Hop,

hmm, c'est plutôt complexe pour pas grand chose, je vais laisser tomber et utiliser une largeur fixe (éventuellement calculée dynamiquement en fonction du nombre de "colonnes" à afficher).

++
Si tu veux avoir une scroll horizontal, je pense qu'il faut que tu spécifie une largeur fixe à ton conteneur (pas en %), quitte à ce que cette taille soit plus grande que la résolution de ton écran si c'est ce que tu veux au niveau design.
Ensuite tu peux spécifier le reste en % si tu veux, mais si tu souhaite que les blocs ne retournent pas à la ligne quand tu redimentionne la fenêtre, il faut que le conteneur ne puisse pas être plus petit que la somme de tes blocs.

J'espère que ça t'aide un peu...
seren10pity a écrit :
Si tu veux avoir une scroll horizontal, je pense qu'il faut que tu spécifie une largeur fixe à ton conteneur (pas en %), quitte à ce que cette taille soit plus grande que la résolution de ton écran si c'est ce que tu veux au niveau design.
Ensuite tu peux spécifier le reste en % si tu veux, mais si tu souhaite que les blocs ne retournent pas à la ligne quand tu redimentionne la fenêtre, il faut que le conteneur ne puisse pas être plus petit que la somme de tes blocs.

J'espère que ça t'aide un peu...

C'est ce dont on parle depuis le début Smiley cligne (comme seule solution simple mais qui ne permet pas la flexibilité et l'automatisme de l'adaptation au contenu)
(la largeur en pourcentage ne pose pas de soucis et permet le comportement souhaité)

++
Sujet clos
Aller à