[CSS] Petits conseils pour les redimensionnements

**GLDavid** · 04/08/2006, 14h09

Bonjour

J'ai écrit tout un site. Fort bien, tout est fonctionnel, à une seule exception, les redimensionnements. Je m'explique. Je dipose d'une balise div contenant une table. Le souci concerne un redimensionnement vers du 800*600. Mon tableau sort alors allègrement de ma div.
Quels seraient alors vos conseils pour éviter cela et faire en sorte que les redimensionnements ne soient plus des problèmes ?

@++

**MasterOfChakhaL** · 04/08/2006, 14h24

Salut,

J'imagine que tes dimensions sont en pourcentage ou en unités proportionnelles (comme em par exemple)

pour ton tableau, je te propose de rajouter ceci:

Code :

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

1
2
3
4
 
table {
  table-layout: fixed;
}

en effet, cette propriété indique que le tableau est affiché au fur et à mesure que le code html est lu par le navigateur (par défaut, le tableau est entièrement lu, puis affiché en considérant le contenu des cellules).
Avec table-layout:fixed, comme le tableau est affiché au fur et à mesure, ce sont les dimensions que tu as définies qui priment sur le contenu pour déterminer la largeur des cellules (en plus, c'est plus rapide à afficher).

**GLDavid** · 04/08/2006, 14h31

Bonjour MasterOfChakhaL

je ne connaissais pas cet attribut, c'est intéressant. Néanmoins, cela ne semble pas suffire. Afin d'illustrer le propos, voilà un screenshot de ce que j'obtiens en 800*600 (cf pièce jointe).
Voici un morceau de mon code (ça vient d'une jsp, ne regardez que le html) ainsi que le css.

Code :

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

1
2
3
4
 
out.println("<table align=\"center\" class=\"resultats\" cellspacing=\"10\" cellpadding=\"5\">");
				out.println("<tr><td class=\"titre\"></td><td class=\"titre\" colspan=\"2\">Amplicon</td><td class=\"titre\" colspan=\"3\">Primer left</td><td class=\"titre\" colspan=\"3\">Primer right</td></tr>");
				out.println("<tr><td class=\"titre2\"></td><td class=\"titre2\">Length</td><td class=\"titre2\">GC %</td><td class=\"titre2\">Start</td><td class=\"titre2\">End</td><td class=\"titre2\">Sequence</td><td class=\"titre2\">Start</td><td class=\"titre2\">End</td><td class=\"titre2\">Sequence</td></tr>");

Le css:

Code :

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
 
.resultats{
	text-align: center;
	border-collapse: collapse;
	table-layout: fixed;
}
 
 
.titre{
	border-collapse: collapse;
	border-bottom: 3px solid black;
	font-weight: bold;
	text-decoration: underline;
	text-align: center;
	font-size: 100%;
}
 
.titre2{
	border-collapse: collapse;
	border-bottom: 3px solid black;
	text-decoration: underline;
	text-align: center;
	font-size: 100%;	
}

Merci encore de votre aide.

@++

GLDavid qui cherche à faire dans les éccrans de minitel

**Oluha** · 04/08/2006, 14h41

si ton tableau est dans un <div>, pourquoi ne pas bêtement ajouter un overflow à auto

**MasterOfChakhaL** · 04/08/2006, 14h43

re,

pour que ce que je t'ai indiqué dans mon premier message fonctionne, il faut que tu indiques une taille de manière explicite à tes colonnes en utilisant l'attribut width de l'élément td (le définir sur la première ligne suffit)

ensuite, le problème que tu vas peut-être rencontrer, c'est que tes séquences ne présentent pas d'espace donc il n'y aura pas de manière simple pour l'écrire sur deux lignes, ce qui risque d'empêcher la prise en compte de tes dimensions...

Des tests en perspectives (ou quelqun de plus calé que moi)

**GLDavid** · 04/08/2006, 15h22

Bonjour à tous

Merci de vos réponses.
L'instruction overflow dans ma css est une bonne idée

Par contre, c'est vrai que la gestion de mes séquences me pose un problème. A moins de réduire encore la taille de la police, je ne vois pas comment faire faire mieux.
A moins que quelqu'un ait une meilleure idée.

@++

**GLDavid** · 04/08/2006, 15h31

Ok, c'est tout bon.
J'ai retiré de ma css l'attribut table-layout: fixed; pour mon tableau et avec l'overflow, ça roule bien.
Merci à tous de votre aide.

@++

**ricachu** · 07/08/2006, 15h29

dsl, mais j'ai pas compris l'histoire des dimension en pourcentage? Est-ce qu'il est possible de faire une page qui se redimensionne automatiquement?

merci de vos précisions

**GLDavid** · 07/08/2006, 15h41

Bonjour Ricachu

Le modo que je suis t'aurait vivement conseillé d'ouvrir un thread à cet effet mais bon.
Mon problème partait d'une erreur de ma part. J'ai développé mon site mais en 1280*1024. On est loin du 800*600 et j'ai eu des surprises lors d'un test car des attributs de ma feuille de style était en pixels.
J'ai donc réécrit ces éléments en pourcentage et en mettant mes div avec des overflow: auto. Depuis, ça passe bien mieux même en des résolutions moindres (style écran de minitel)

@++