comment faire pour aligner deux partie d'une table enboitée

**felosa** · 27/05/2008, 15h55

Bonjour a tous ,

j'essaye de realiser un formulaire avec un menu,
pour cela j'etulise des balises table imbriqués avec une feuille de style, une table qui contient deux tables, pour former une cadre , alors le probleme que j'ai c'est que la partie du menu est legerement en acart verticalement par rapport a la partie en dessous , je ne sais pas quel attribut dois je utiliser , j'ai essayer le valign = top; mais ca ne marche pas voila mon code :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
<style>
 
 
ul#menu { 
     margin:0px;
     padding:0px;
     width: 650px; 
     height: 43px; 
     background: #FFF url(menu-bg.gif) top left repeat-x; 
     font-size: 12px; 
     font-family:Arial, Helvetica, sans-serif;
     font-weight: bold; 
     list-style-type: none; 
 
     padding: 0; }
 
ul#menu li {  
        float: left; 
        margin: 0 0 0 5px; }
ul#menu li a { 
        height: 43px; 
        color: #000; 
        text-decoration: none;
         
        float: left; 
        line-height: 200%; 
        padding: 8px 25px 0; }
ul#menu li a:hover { 
        color: #333; }
ul#menu li a.current{ 
        color: #FD0000;
        background: url(current-bg.gif) top left repeat-x; padding: 5px 15px 0; }
 
#container_screen{
width:100%;
}
 
 
#Bottonn{
width:200px;
}
 
</style>
 
<body>
<table border="2px"; cellspacing="0"; cellpadding="0"; align="left"; style="width=650px;">
	<tr>
		<table border="1px">
			<tr>
				<td>
					<ul id="menu">
        				<li ><a class="current" href="/onglet1">onglet1</a></li>
        				<li ><a href="/onglet2">onglet2</a></li>
        				<li ><a href="/onglet3">onglet3</a></li>
        				<li ><a href="/onglet4">onglet4</a></li>
					 </ul>
				</td>
			</tr>
		</table>
	</tr>
	<tr>
		<table style="background-color:#d9d9d9; width:650px;" border="1px" >
			<tr>
				<td>
					<FORM ACTION="#" METHOD=POST>
						<table>
							<tr>
								<td id="Botton1">
									<input style="width:180px;" type="button" value="botton1">
								</td>
								<td id="Bottonn">
									<input style="width:180px;" type="button" value="botton2">
								</td>
								<td rowspan="3" id="bottonn">
									<img src="Post_IT4g.gif"/>
								</td>					
							</tr>
							<tr>
								<td id="Bottonn">
									<input style="width:180px;" type="button" value="botton3">
								</td>
								<td id="Bottonn">
									<input style="width:180px;" type="button" value="botton4">
								</td>
							</tr>
							<tr>
								<td id="Bottonn">
									<input style="width:180px;" type="button" value="botton5">
								</td>
								<td id="Bottonn">
									<input style="width:180px;" type="button" value="botton6">
								</td>
							</tr>
						</table>
					</form>
				</td>
			</tr>
		</table>
	</tr>
</table>
 
</body>
</html>

merci pour vos eventuelles reponses .

**koala01** · 27/05/2008, 16h18

Salut,

Comme tu as déjà pris une bonne initiative en optant pour l'usage des CSS (qu'il serait pas mal de séparer de ton fichier HTML), je te conseillerais volontier de continuer sur ta lancée en... banissant l'utilisation de tableau comme outils de mise en forme.

En effet, les tableaux posent énormément de problème d'accessibilité et, même si on n'en croise pas tous les jours, je trouve normal de penser à ceux qui doivent avoir recours à des outils "particuliers" (tablettes brail, synthétiseurs vocaux ou navigateur "text only") pour naviguer sur internet, et donc de limiter l'utilisation des tableaux à... l'affichage de données tabulaires.

Bien que je ne semble pas répondre à ta question, détrompes toi: je t'ouvre des voies de réflexions qui sont de nature à te fournir un résultat au moins aussi bon que ce que tu cherches à faire... l'accessibilité en plus

**Erwan31** · 27/05/2008, 16h18

Bonjour,
tu as choisi un doctype xHTML mais il faut savoir que la syntaxe qui en découle exige un certain nombres de règles que tu ne respectes qu'en partie: pas de code en lettre capitale.
D'autre part tu pourrais nettement simplifier la structure de ton code en t'abstenant d'utiliser les tableaux comme celui englobant ton menu.
Eviter autant que possible l'imbrication de table qui est une méthode de structuration dépassée, souvent préjudiciable pour l'accessibilité, le poids du code, le temps d'affichage, etc.

Grillé

**Erwan31** · 27/05/2008, 16h29

Envoyé par koala01

et donc de limiter l'utilisation des tableaux à... l'affichage de données tabulaires.

Je ne serais pas aussi ferme: un usage mesuré des tableaux de mise en forme
non imbriqués et bien linéarisés peut parfois pallier à un limitation propre à la
mise en forme CSS (support CSS ou interprétations de rendu trop inégaux).

Mais mieux vaut éviter leur utilisation quand cela reste possible

**felosa** · 27/05/2008, 16h40

je vous remercie de vos reponse,
parcontre j'ai essayé d'utiliser des balise <div> , c'est encore pire , et comme je ne maitrise ni l'un ni l'autre j'ai fait appel a vous

**koala01** · 27/05/2008, 17h02

Envoyé par Erwan31

Je ne serais pas aussi ferme: un usage mesuré des tableaux de mise en forme
non imbriqués et bien linéarisés peut parfois pallier à un limitation propre à la
mise en forme CSS (support CSS ou interprétations de rendu trop inégaux).

Mais mieux vaut éviter leur utilisation quand cela reste possible

A vrai dire, depuis que j'ai été sensibilisé au problème par une personne, je n'ai jamais éprouvé la moindre difficulté à me passer des tableaux pour la mise en formre, du moins, depuis que la sensibilisation m'a incité à les bannir pour cet usage.

Envoyé par felosa

je vous remercie de vos reponse,
parcontre j'ai essayé d'utiliser des balise <div> , c'est encore pire , et comme je ne maitrise ni l'un ni l'autre j'ai fait appel a vous

Alors, là, il y a sans doute un peu de travail.

Il est important de comprendre que les différentes balises, si elles sont affichées d'une manière particulière par le navigateur internet, c'est parce qu'elles sont porteuse d'une certaine sémantique et que le navigateur peut décider à tout moment de changer la manière "par défaut" d'afficher une balise, mais qu'il ne pourra pas en changer la sémantique.

Je te rassure tout de suite: sur plus ou moins 120 (peut-être est-ce 130

) balises connues en HTML, il n'y en a, une fois que tu as écarté celles qui sont dépréciées, obsolètes ou qui n'ont jamais été proposées à la normalisation, il n'en reste qu'un grosse trentaine (en comptant large) qui soient d'utilisation "régulière" (même si, pour l'occasion, le terme "régulier" signifie en moyenne trois fois par site

), et donc, il reste relativement simple de se souvenir de la sémantique prise par ces balises

Ainsi, la balise <div> est une balise "de bloc" tout à fait générique, à laquelle il t'appartient de donner le style d'affichage selon le contexte et tes souhaits/besoins.

Dans le cas présent, il est peut être bon de t'intéresser à la sémantique des balises et de voir si, sémantiquement parlant, il n'en existe pas une qui serait "plus adaptée"

N'oublie jamais que le C de CSS signifie "cascade", et que, par défaut, toute balise imbriquée dans une autre va donc "hériter" des paramètres d'affichage de celle dans laquelle elle est imbriquée, à moins que tu ne les redéfinisse.

Peut-être serait il également intéressant pour toi d'aller jeter un œil du du coté de la FAQ et des cours

Maintenant, tu me diras sans doute que, quitte à répondre, je devrais peut etre envisager de t'apporter une solution... et tu n'as pas tort... mais je manque un peu de temps pour m'y atteler

**felosa** · 27/05/2008, 17h15

tu t'es donné du mal a me composer ttes ces lignes , t'aurais pu me repondre et me faire gagner du temps !

, ca fait une semaine que je tourne au rond !

**koala01** · 27/05/2008, 20h38

Envoyé par felosa

tu t'es donné du mal a me composer ttes ces lignes , t'aurais pu me repondre et me faire gagner du temps !

, ca fait une semaine que je tourne au rond !

Beaucoup moins que tu ne pourrais le croire

Allez, comme je suis du genre trop gentil, et que, c'est bien connu, ma bonté me perdra, voici quelques lignes de code:

La CSS, tout d'abord, basée en grande partie sur ce que tu voulais faire

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
*{
	margin:0;
	padding:0;
}
.externbord
{
	border-style:solid;
	border-color:#000000;
	border-width:medium;
	width:650px;
	padding: 3px;
	margin-top:6px;
}
 
#menu ul
{ 
	 background: #FFF url(menu-bg.gif) top left repeat-x; 
	 font-size: 12px; 
	 font-family:Arial, Helvetica, sans-serif;
	 font-weight: bold; 
	 list-style-type: none; 
	 border:1px;
	 padding: 0; 
}
 
#menu ul li
{  
	display:inline;
	margin: 0 0 0 5px;
}
#menu ul li a 
{ 
	height: 43px; 
	color: #000; 
	text-decoration: none;		
	line-height: 200%; 
	padding: 8px 25px 0; 
}
#menu ul li a:hover 
{ 
	color: #333; 
}
#menu ul li a.current
{ 
	color: #FD0000;
	background: url(current-bg.gif) top left repeat-x; padding: 5px 15px 0; 
}
 
 #myform ul
{
	background-color:#d9d9d9;
	list-style-type: none;
	display:table;
	width:100%;
	border: 1px solid #000000;
	border-top:0;
}
 #myform ul li
{
 
	display:table-cell;
	_float:left;
	padding-left:10px;
	width:50%;
}

(les explications suivront

la page web qui utilise cette CSS ensuite:

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
25
26
27
28
<body>
    <div id="menu" class="externbord">
        <ul>
            <li ><a class="current" href="/onglet1">onglet1</a></li>
            <li ><a href="/onglet2">onglet2</a></li>
            <li ><a href="/onglet3">onglet3</a></li>
            <li ><a href="/onglet4">onglet4</a></li>
        </ul>
    </div>
    <form id="myform" action="#" class="externbord"> 
        <ul>
            <li><input type="button"  id="butonn1" value="button1"></li>
            <li><input type="button"  id="butonn2" value="button2"></li>
        </ul>
        <ul>
            <li><input type="button" id="butonn3" value="button3"></li>
            <li><input type="button"  id="butonn4" value="button4"></li>
        </ul>
        <ul>
            <li><input type="button"  id="butonn5" value="button5"></li>
            <li><input type="button"  id="butonn6" value="button6"></li>
        </ul>
        <ul>
            <li><input type="button"  id="butonn7" value="button7"></li>
            <li><input type="button"  id="butonn8" value="button8"></li>
        </ul>
    </form>
</body>

Et les explications enfin:

Les différents navigateurs ont tendance à gérer différemments les attributs margin et padding, et à leur donner des valeurs par défaut différentes. C'est la raison pour laquelle je demande à ce que toutes les balise aient une même valeur pour ces attributs: 0

Je définis ensuite une classe, pour que ce soit utilisable en différentes parties du code, qui fournit les bordures externes, et qui indique la taille des différents éléments qui en profitent

j'ai ensuite utilisé les styles que tu avait déjà définis pour le contenu de ton "menu", en remplaçant cependant le float:left; par un display:inline; et remplacé ul#menu par #menu ul partout où cela apparaissait, de manière à forcer les listes non ordonnées se trouvant dans l'élément identifié "menu" à travailler tout le temps de la même manière.

Tout cela permettra de faciliter le travail si, un jour, tu en viens à décider d'ajouter une ligne supplémentaire à ton menu

J'ai enfin définis les styles pour le contenu de ce qui sera identifié par myform (et qui n'est autre que... un formulaire)

Tu notera que, si tu remplace #myform dans la CSS, les styles pourront s'appliquer à toute balise <form> rencontrée

Il reste les deux lignes

Code :

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

1
2
	display:table-cell;
	_float:left;

Pour lesquelles une petite explication serait utile:
display:table-cell; indique qu'il faut afficher l'élément comme s'il s'agissait d'une cellule de tableau, et ce, malgré le fait que ce n'en est pas un sémantiquement parlant.

Le problème réside alors dans le fait que IE6 ne supporte pas cette valeur d'attribut.

Afin qu'il affiche les choses de manière correcte, j'ai du donc appliquer un "sucre syntaxique", compris de IE6, qui forcera celui-ci à se comporter ) peu près correctement: c'est la raison de la présence de _float:left; qui ne sera pas interprété par firefox

Voilà pour les explications concernant la CSS.

En ce qui concerne la page web elle-même:

j'ai bien sur inséré la CSS de manière classique, à ceci près que j'ai indiqué qu'elle ne devait s'appliquer que lorsque la page doit s'afficher sur un écran (car on pourrait, entre autres, décider d'une autre CSS pour l'impression, par exemple).

Assez bizarement, je n'ai plus réussi à faire de manière à ce que la balise ul accepte de prendre la bordure, j'ai donc du passer par une balise <div> supplémentaire, qui est logiquement identifiée... "menu"

Par contre, le formulaire ne pose aucun problème pour afficher les bordures, ni pour prendre une taille.

Je lui ai donc donné l'identifiant "qui va bien", et tout le reste ne peut donc que fonctionner "comme sur des roulettes"

PS: la CSS et la page HTML d'exemple: créée en moins de temps que ce qu'il m'a fallu pour écrire ce long message

**Erwan31** · 27/05/2008, 21h46

Ah ben là Felosa je crois que tu pourra remercier Koala.

@Koala le underscore hack (_...) ne fonctionne sous pas IE7 qui n'implémente
pas encore la valeur table-cell (contrairement au futur IE8).
D'une manière générale, il est préférable de ne pas se reposer sur ce type de
hack dont la pérennité n'est pas garantie et privilégier l'utilisation des
commentaires conditionnels (comme le recommande d'ailleurs les ingénieurs de Microsoft).

**koala01** · 27/05/2008, 21h54

A vrai dire, comme mon PC est "ante diluvien", et que ne navigue avec firefox, j'avoue être resté bloqué à IE6, que je ne lance que de manière très sporadique, enter autres pour tester mes CSS

Du coup, je ne sais absolument pas comment fonction IE7, du moins, en dehors de ce que j'en ai lu au moment de sa sortie (il me semblait d'ailleurs qu'ils mettaient l'accent sur un support plus correct de la norme, non

), et c'est la raison pour laquelle j'ai parlé de IE6

**Erwan31** · 27/05/2008, 22h03

Ok ok, tu devrais alors peut-être installer une version standalone (autonome) d'IE7 si toutefois tu dois faire des tests sur cette version.
Voici un tableau qui pourra t'informer en partie des différentes possibilités de hack.

J'ai oublié de préciser que l'underscore hack est invalidant pour la CSS.

** EDIT** Oui le support est meilleur mais pas encore équivalent aux principaux navigateurs alternatifs.
IE7 a supprimé un certain nombre de bug de haslayout et les principaux bugs des version précédentes mais il y a aussi plein de bugs mineures ou peu répertoriés.

comment faire pour aligner deux partie d'une table enboitée

Positionnement en CSS

Discussions similaires

Partager

Partager