Les Dimensions des Tableaux

**AimStar** · 09/11/2012, 12h56

Bonjour a tous,

Je suis actuellement en train de créer une page dans laquelle se trouvera une pétition.
Pour faciliter la présentation j'y ais inséré un tableau mais mon problème est que quoi que je fasse je n'arrive pas a modifier les dimensions du tableau que ce soit dans le code html ou bien le css.

Pourriez vous m'éclairer s'il vous plait ?

Voici mon code html :

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
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
<!DOCTYPE html>
<html>
<head>
 
<title>
Petition vegetaliseurs
</title>
 
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="generator" content="Wufoo">
<meta name="robots" content="index, follow">
 
<!-- CSS -->
<link href="css/structure.css" rel="stylesheet">
<link href="css/form.css" rel="stylesheet">
 
<!-- JavaScript -->
<script src="scripts/wufoo.js"></script>
 
<!--[if lt IE 10]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
 
<body id="public">
 
<div id="container" class="ltr">
 
<h1 id="logo">
<a href="http://les-vegetaliseurs.com" title="Rejoignez-nous">vegetaliseurs</a>
</h1>
 
<form id="form64" name="form64" class="wufoo topLabel page" autocomplete="off" enctype="multipart/form-data" method="post" novalidate
action="">
 
<header id="header" class="info">
<h2>Nom de la petition</h2>
<!-- <div><a href="">Voir le nombre de signatures</a></div> -->
</header>
 
 
<!-- TABLEAU 3X3 -->
 
<table>
   <tr>
       <td class="img-intro"></td>
       <td><div class="img-signez"> 
 
	   <!-- Formulaire tableau -->
		<!-- prenom -->
<nav>
 
 
<span>
<input id="Field1" name="Field1" placeholder="Prenom" type="text" class="field text fn" value="" size="20" tabindex="1" required />
<label for="Field1"></label>
</span>
 
		<!-- nom -->
<span>
<input id="Field2" name="Field2" placeholder="Nom" type="text" class="field text ln" value="" size="15" tabindex="2" required />
<p id="foli3" class="notranslate"></p>
 
<!-- email -->
<div>
<input id="Field3" name="Field3" type="email" placeholder="e-mail" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="3" required /> 
</div>
 
<div class="buttons ">
<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Envoyer"/>	
</div>
 
</nav>
</td>
</tr>
 
       <!-- fin formulaire tableau -->
 
 
   <tr>
       <td>nombre de signature/date publication</td>
       <td class="img-lastsignataires"></td>
 
   </tr>
   <tr>
       <td>la petition</td>
       <td><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fvegetaliseurs&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></td>
 
   </tr>
</table>
 
 
 
 
 
 
 
 
 
</form> 
 
</div>
 
 
 
</a>
</body>
</html>

et voici mon code css:

Code css :

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
html{
background:#eee
	}
 
body {
	margin:17px 0 15px 0;
	padding:0;
	text-align:center;
	font-size:small;
	font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif
	}
 
article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object,output{
	display:block
	}
 
#container{
	text-align:left;
	background:#fff;
	border:1px solid #ccc;
	-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	-moz-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	-o-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	box-shadow:rgba(0,0,0,0.2) 0px 0px 5px
		  }
 
#container{
	margin:0 auto 10px auto;
	width:810px;
	height:750px;
		  }
 
form.wufoo{
	margin:20px 14px 0 14px;
	padding:0 0 20px 0;
	position:relative
		}
 
#logo{
	margin:0;
	padding:0;
	min-height:0;
	background-color:#dedede;
	text-indent:-9000px;
	text-decoration:none
	}
 
#logo a{
	min-height:40px;
	height:50px;
	display:block;
	background:url(../images/wflogo.png) no-repeat left top;
	overflow:hidden
	}
 
* html 
#logo a{
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/wflogo.png", sizingMethod="crop")
	}
 
img,a img{
	border:none;-ms-interpolation-mode:bicubic
		}
 
.hide,.cloak div,.cloak span,.likert.cloak tbody,.likert.cloak thead{
	display:none !important
	}
 
.likert.cloak table{
	border:none
	}
 
 
 
.img-intro {
   background: url("petrole.png");
   background-repeat: no-repeat; 
   background-position: top-left;
   width:80px;
   height:80px;
 
	   }
 
 
.img-signez {
   background: url("signez.png");
   background-repeat: no-repeat; 
   background-position: top-right;
   width:990px;
   height:400px;
 
	   }  
 
.img-lastsignataires {
	background: url("lastsignataires.png");
	background-repeat: no-repeat; 
	background-position: top-right;
	width:300px;
	height:150px;
	}
 
 
table
{
    border-collapse: collapse;
	width:80px;
	height:730px;
	margin-left: auto; 
	margin-right: auto;
	margin-top:-10px;	
	}
 
td, th  Mettre une bordure sur les td ET les th 
{
    border: 1px solid black;
	width:500px;
	height:200px;
}
 
nav {
	position:absolute;
	margin-left: -450px;
	width: 900;
	top:320px;
	left:100%;
}

**v1cent** · 09/11/2012, 14h08

Pour faciliter la présentation j'y ais inséré un tableau mais mon problème est que quoi que je fasse je n'arrive pas a modifier les dimensions du tableau

Si tu n'y arrive pas en quoi ça facilite la présentation ?

De simples blocs les uns sous les autres c'est prévu pour...

Sinon pour t'aider il faudrait savoir ce que tu souhaite dimensionner et comment

il y a déjà quelques erreurs, tu devrait utiliser un validateur

**AimStar** · 09/11/2012, 14h37

Je ne connais pas les blocs. Quel est le terme au niveau balise, s'il te plait ?

Quand tu parles de validateur, tu parles d'applications comme dreamweaver ?

Je souhaite afficher en header le titre de la pétition, en dessous à gauche une image, à droite une image avec un formulaire par dessus et du texte ainsi qu'un module de facebook like box en dessous.

**Kaamo** · 09/11/2012, 15h14

Je ne connais pas les blocs. Quel est le terme au niveau balise, s'il te plait ?

Fais un tour dans les tutoriels de mise en page de developpez.com

Quand tu parles de validateur, tu parles d'applications comme dreamweaver ?

Oui et non. En effet, ce type d'IDE valide à la volée le code HTML (dans le sens détection de la syntaxe, grammaire) mais pour valider au niveau W3C, i lfaut utiliser leur validateur dispo sur leur site.

**v1cent** · 09/11/2012, 15h38

je vois quelques erreurs dans ton code comme un commentaire qui n'est pas signalé comme un commentaire ou une balise qui se ferme sans s'ouvrir.

Avec soit un environnement de développement (dreamweaver, eclipse, je-sais-pas-quel-autre), soit un programme qui analyse ton fichier pour te donner une erreur (style le validateur du w3c), tu pourra déjà te débarrasser de ce genre de soucis sans trop d'efforts.

Après je pense qu'il faut que tu simplifie ta structure, quitte à faire un peu plus de css.

**momo_m** · 09/11/2012, 15h39

Bonjour,

Essayez avec ce code corrigé :

HTML

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
 
<!DOCTYPE html>
<html>
<head>
 
<title>
Petition vegetaliseurs
</title>
 
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="generator" content="Wufoo">
<meta name="robots" content="index, follow">
 
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css.css" >
 
 
<!-- JavaScript -->
<script src="scripts/wufoo.js"></script>
 
<!--[if lt IE 10]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
 
<body id="public">
<div id="container" class="ltr">
 
<h1 id="logo">
<a href="http://les-vegetaliseurs.com" title="Rejoignez-nous">vegetaliseurs</a>
</h1>
 
<form id="form64" name="form64" class="wufoo topLabel page" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="">
 
<header id="header" class="info">
<h2>Nom de la petition</h2>
<!-- <div><a href="">Voir le nombre de signatures</a></div> -->
</header>
 
 
<!-- TABLEAU 3X3 -->
 
<table>
 
   <tr>
       <td class="img-intro"></td>
       <td><div class="img-signez"> 
 
     <!-- Formulaire tableau -->
    <!-- prenom -->
<nav>
 
 
<span>
<input id="Field1" name="Field1" placeholder="Prenom" type="text" class="field text fn" value="" size="20" tabindex="1" required />
<label for="Field1"></label>
</span>
 
    <!-- nom -->
<span>
<input id="Field2" name="Field2" placeholder="Nom" type="text" class="field text ln" value="" size="15" tabindex="2" required />
<p id="foli3" class="notranslate"></p>
 
<!-- email -->
<div>
<input id="Field3" name="Field3" type="email" placeholder="e-mail" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="3" required /> 
</div>
 
<div class="buttons ">
<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Envoyer"/> 
</div>
 
</nav>
</td>
</tr>
 
       <!-- fin formulaire tableau -->
 
 
   <tr>
       <td>nombre de signature/date publication</td>
       <td class="img-lastsignataires"></td>
 
   </tr>
   <tr>
       <td>la petition</td>
       <td><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fvegetaliseurs&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></td>
 
   </tr>
</table>
 
 
</table>
 
</form> 
 
</div>
 
 
</body>
</html>

et CSS

Code css :

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
html{
background:#eee
	}
 
body {
	margin:17px 0 15px 0;
 
	text-align:center;
	font-size:small;
	font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif
	}
 
article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object,output{
	display:block
	}
 
#container{
	text-align:left;
	background:#fff;
	border:1px solid #ccc;
	-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	-moz-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	-o-box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
	box-shadow:rgba(0,0,0,0.2) 0px 0px 5px
		  }
 
#container{
	margin:0 auto 10px auto;
	width:810px;
	height:750px;
		  }
 
form.wufoo{
	margin:20px 14px 0 14px;
	padding:0 0 20px 0;
	position:relative
		}
 
#logo{
	margin:0;
	padding:0;
	min-height:0;
	background-color:#dedede;
	text-indent:-9000px;
	text-decoration:none
	}
 
#logo a{
	min-height:40px;
	height:50px;
	display:block;
	background:url(../images/wflogo.png) no-repeat left top;
	overflow:hidden
	}
 
* html 
#logo a{
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/wflogo.png", sizingMethod="crop")
	}
 
img,a img{
	border:none;-ms-interpolation-mode:bicubic
		}
 
.hide,.cloak div,.cloak span,.likert.cloak tbody,.likert.cloak thead{
	display:none !important
	}
 
.likert.cloak table{
	border:none
	}
 
 
 
.img-intro {
   background: url("petrole.png");
   background-repeat: no-repeat; 
   background-position: top-left;
   width:80px;
   height:80px;
 
	   }
 
 
.img-signez {
   background: url("signez.png");
   background-repeat: no-repeat; 
   background-position: top-right;
   width:600px;
   height:300px;
 
	   }  
 
.img-lastsignataires {
	background: url("lastsignataires.png");
	background-repeat: no-repeat; 
	background-position: top-right;
	width:300px;
	height:150px;
	}
 
 
table
{
        border-collapse: collapse;
	width:400px;
	height:500px;
	margin-left: auto; 
	margin-right: auto;
	margin-top:-10px;	
	}
 
 
 
td, tr
{
    border: 1px solid black;
	width:100px;
	height:50px;
}
 
nav {
	position:absolute;
	margin-left: -500px;
	width: 900;
	top:160px;
	left:100%;
}

et dites moi après si c'est la solution que vous cherchez ou non.

**momo_m** · 09/11/2012, 15h41

Faut faire attention avec la balise de CSS :

Faut que vous la changer :

Code :

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

<link rel="stylesheet" type="text/css" href="css/Le_nom_de_ votre_fichier.css" >

Les Dimensions des Tableaux [HTML 4.0]

HTML

Vue hybride

Discussions similaires

Partager

Partager