[CSS 2] Positionnement, dimensionnement et "étirement" [Résolu]

foreigner6 · 20/07/2011, 20h40

Bonjour j'aimerais construire une page composée de 3 parties horizontales :

- le premiere de taille fixe en pixel (GAUCHE)
- la troisieme de taille fixe en pixel (DROITE)
- la deuxieme qui s'étire en fonction de l'espace restant (CENTRE)

Le problème est que la partie CENTRE contient un tableau et que ce tableau refuse de prendre l'espace maximum horizontale. Il s'adapte a son propre contenu au lieu de prendre la place dispo. Je précise que c'est une seule colonne de ce tableau que je souhaite rendre "étirable", les autres sont de taille fixe.
Il faudrait aussi que si une cellule de ce tableau dépasse la place max horizontale disponible, elle s'agrandisse verticalement sans déplacer tout le bloc CENTRE en dessous des blocs GAUCHE et DROITE.

Tout cela sans Javascript sinon c'est trop facile !

Ce problème me semble pourtant hyper courant et simple mais je sèche...

Est-ce que quelqu'un aurait un regard éclairé la dessus ?

Candygirl · 20/07/2011, 21h21

Hello,

Cet exemple doit correspondre à ton descriptif, il me semble:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	
<title>MON SITE</title>
	<style type="text/css">
 
	#left {
		float:left;
		background:red;
		width:300px;
	}
 
	#right {
		float:right;
		background:red;
		width:300px;
	}
 
	#content {
		overflow:auto;
		background:green;
	}
 
	table,.large {
		width:100%;
	}
 
	.large {background:blue;}
	</style>
</head>
<body>
	<div id="left">gauche</div>
	<div id="right"> droite</div>
	<div id="content">
		<table>
			<tr>
				<td>1er colonne(normale)</td>
				<td class="large">2ème collone (large)</td>
			</tr>
		</table>
	</div>
</body>
</html>

Attention à donner le layout à IE6 si la compatibilité est souhaitée (l'overflow ne remplit pas son rôle de nouveau contexte de formatage) et il faudra composer avec/corriger le bug "3px jog".

foreigner6 · 21/07/2011, 10h49

IM-PE-CCABLE !

En supprimant la propriété "height: 0" ca fonctionne du tonnerre merci !

Est-ce que tu aurais de la doc sur le comportement bien particulier de l'overflow dans ce cas précis ? En effet j'avais bien vu que les limites du bloc changeaient si on met un overflow mais je ne l'avais pas mis sur le bon bloc et j'avais effectivement une zone scrollable avec débordement alors que je voulais que le bloc s'agrandisse. Merci !

Comment la taille des colonnes est-elle calculée ? Le <code>width: 100% </code> fait référence à quelle taille pour son calcul ? C'est plus un max-width qu'un width non ?

Candygirl · 21/07/2011, 13h38

Citation:

Envoyé par foreigner6

En supprimant la propriété "height: 0" ca fonctionne du tonnerre merci !

Oups oui, désolée je l'avais planté pour tester un truc sur IE6 et oublié de le virer

(je corrige ds le post initial)

Citation:

Envoyé par foreigner6

Est-ce que tu aurais de la doc sur le comportement bien particulier de l'overflow dans ce cas précis ?

Dans ce cas précis, l'overflow est utilisé en détournement de sa réelle fonction,la gestion du débordement. Il est utilisé pour établir un nouveau contexte de formatage en faite.

Citation:

Envoyé par foreigner6

Comment la taille des colonnes est-elle calculée ? Le <code>width: 100% </code> fait référence à quelle taille pour son calcul ? C'est plus un max-width qu'un width non ?

non, un max-width ne permettrait pas à ta colonne d'utiliser toute la largeur et en gardant l'autre bien plus petite. Il répartirait la largeur en fonction du contenu repectif des 2 colonnes. J'imagine que tu dois pouvoir trouver la description exacte ici

20/07/2011, 20h40	#1
foreigner6 Invité régulier Inscription : février 2008 Messages : 10 Détails du profil Informations forums : Inscription : février 2008 Messages : 10 Points : 7 Points : 7	Positionnement, dimensionnement et "étirement" Bonjour j'aimerais construire une page composée de 3 parties horizontales : - le premiere de taille fixe en pixel (GAUCHE) - la troisieme de taille fixe en pixel (DROITE) - la deuxieme qui s'étire en fonction de l'espace restant (CENTRE) Le problème est que la partie CENTRE contient un tableau et que ce tableau refuse de prendre l'espace maximum horizontale. Il s'adapte a son propre contenu au lieu de prendre la place dispo. Je précise que c'est une seule colonne de ce tableau que je souhaite rendre "étirable", les autres sont de taille fixe. Il faudrait aussi que si une cellule de ce tableau dépasse la place max horizontale disponible, elle s'agrandisse verticalement sans déplacer tout le bloc CENTRE en dessous des blocs GAUCHE et DROITE. Tout cela sans Javascript sinon c'est trop facile ! Ce problème me semble pourtant hyper courant et simple mais je sèche... Est-ce que quelqu'un aurait un regard éclairé la dessus ?
	00

21/07/2011, 10h49	#3
foreigner6 Invité régulier Inscription : février 2008 Messages : 10 Détails du profil Informations forums : Inscription : février 2008 Messages : 10 Points : 7 Points : 7	IM-PE-CCABLE ! En supprimant la propriété "height: 0" ca fonctionne du tonnerre merci ! Est-ce que tu aurais de la doc sur le comportement bien particulier de l'overflow dans ce cas précis ? En effet j'avais bien vu que les limites du bloc changeaient si on met un overflow mais je ne l'avais pas mis sur le bon bloc et j'avais effectivement une zone scrollable avec débordement alors que je voulais que le bloc s'agrandisse. Merci ! Comment la taille des colonnes est-elle calculée ? Le <code>width: 100% </code> fait référence à quelle taille pour son calcul ? C'est plus un max-width qu'un width non ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email