Présence d'un scrolling inutile

**gaya102** · 04/09/2009, 17h16

bonjour voila j'ai un scrolling dans le bas de ma page. Je voudrais l'enlever mais je n'y arrive pas

http://www.lemondedegaya.fr/collection2.php

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>le monde de gaya et ses faire part</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="Description" content="Vos faire-part de naissance, mariage, remerciements, stickers et tableaux personnalisés qui vous correspondent le mieux ... Aide pour vos événements : mariage/pacs, communion, anniversaire ...">
	<meta name="keywords" content="faire, part, parts, faire-parts, faireparts, faire part, fairepart, mariage, deuil, deces, remerciement, union, naissance, fete, bebe, marie, ligne, en-ligne, online, original, artisanal, bapteme, papier, rare, unique, maries, creation, main, qualite, travail, soigne, soin, passion, invite, invitation, jubile, menu, remerciement, livre d'or" /><meta name="Robots" content="All">
<meta name="author" content="Thaon Sandrine">
<meta name="revisit-after" content="5 days">
 
<base href="http://www.lemondedegaya.fr">
		<link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
	    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="page.css" />
		 <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="ie2.css" />
      <![endif]-->
 
</head>
 
   <body>
 
 
       <div id="unite">      
 
<div id="titre">   
 
 Le monde de Gaya
 
 </div>  
 <div id="texte">   
 
 Faire-part de mariage originaux et  personnalisés.   <br>
 
 </div>  
 
           <div id="menubas">
          <?php
include("menu.php");
?> 
 
           </div>
           <div>
 
 
 
 
 
 
 
					<div id="bandeau">La collection faire-part mariage</div>
	<div id="menu">
	<br><br>
	<a href="collection.php"class="margetitre">La collection</a><br><br>
	<a href="format.php"class="margetitre">Les formats</a><br><br>
	<a href="papiers.php"class="margetitre">Les papiers</a><br><br>
	<a href="textes.php" class="margetitre">Idées de textes</a><br><br>
	<a href="conditions.php" class="margetitre">Conditions de ventes</a>
 
 
	</div>
	<div id="contenu">
 
	<div class="gallerie">
 
 
				<div id="contenu" align="center">
					<table width="700" height="100%" border="0">
 
							<tr>
 
							<td align="center" style="vertical-align: middle" ><a href="faire-part-cygne.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-cygne.htm">La branche</a><br>
							A partir de 1.95 euros
							<br>
&nbsp;</td>
							<td align="center" style="vertical-align: middle"><a href="faire-part-photos-sepia.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br><a href="faire-part-photos-sepia.htm">La branche</a><br>
							A partir de 1.95 euros<br>
&nbsp;</td>
 
							<td align="center" style="vertical-align: middle"><a href="faire-part-coeur-argent.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-coeur-argent.htm">La branche</a><br>
							A partir de 1.95 euros<br>
&nbsp;</td>
 
							<td align="center" style="vertical-align: middle"><a href="faire-part-cygne.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-cygne.htm">La branche</a>s<br>
							A partir de 1.95 euros
							<br>
&nbsp;</td>
							</tr>
 
							<tr>
 
							<td align="center" style="vertical-align: middle" ><a href="faire-part-cygne.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-cygne.htm">La branche</a><br>
							A partir de 1.95 euros
							<br>
&nbsp;</td>
							<td align="center" style="vertical-align: middle"><a href="faire-part-photos-sepia.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br><a href="faire-part-photos-sepia.htm">La branche</a><br>
							A partir de 1.95 euros<br>
&nbsp;</td>
 
							<td align="center" style="vertical-align: middle"><a href="faire-part-coeur-argent.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-coeur-argent.htm">La branche</a><br>
							A partir de 1.95 euros<br>
&nbsp;</td>
 
							<td align="center" style="vertical-align: middle"><a href="faire-part-cygne.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-cygne.htm">La branche</a>s<br>
							A partir de 1.95 euros
							<br>
&nbsp;</td>
							</tr>
 
							<tr>
 
							<td align="center" style="vertical-align: middle" ><a href="faire-part-cygne.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-cygne.htm">La branche</a><br>
							A partir de 1.95 euros
							<br>
&nbsp;</td>
							<td align="center" style="vertical-align: middle"><a href="faire-part-photos-sepia.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br><a href="faire-part-photos-sepia.htm">La branche</a><br>
							A partir de 1.95 euros<br>
&nbsp;</td>
 
							<td align="center" style="vertical-align: middle"><a href="faire-part-coeur-argent.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-coeur-argent.htm">La branche</a><br>
							A partir de 1.95 euros<br>
&nbsp;</td>
 
							<td align="center" style="vertical-align: middle"><a href="faire-part-cygne.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-cygne.htm">La branche</a>s<br>
							A partir de 1.95 euros
							<br>
&nbsp;</td>
							</tr>
 
 
 
	<div class="clear"></div>
 
	</div>
 
 
 
 
			</div>		
 
 
 
       </div>        
   </body>
</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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
 
 
.texte2{
    color: #7890d2;
	font-family: Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 16px;
	text-decoration: none;
	text-indent:30px;
	text-align: center;
	position:relative;
	top: 70px;
	left: 220px;
	width: 739px;
	overflow: auto;
	margin: 0 0 10px 0;
	}
 
body {
	background-color: #f7d8fc;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
	font-style: italic;
}
 
img {
	border:0;
	vertical-align:middle;
}
 
a {
	color: #781d89;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 15px;
	text-decoration: none;
	text-align: center;
} 
 
a:hover {
    color: #e365f6;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 15px;
	text-decoration: none;
	text-align: center;
}
 
#unite {
	position:absolute;
	left:50%;
	margin-left:-490px;
	width: 980px;
	top:50%;
	margin-top:-271px;
	height: 542px;
	background-image : url("images/fond_page.jpg");
	background-repeat: no-repeat;
	border :2px solid black;
}
 
#titre{
    color: #b04cbf;
	font-family: Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 36px;
	text-decoration: none;
	text-align: center;
	position:absolute;
	top: 5px;
	left : 205px;
}
 
#texte{
    color: #7890d2;
	font-family: Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 17px;
	text-decoration: none;
	text-align: right;
	position:absolute;
	top: 65px;
	left: 585px;
 
 
}
 
 
 
#menubas {
	 margin-top: 108px;
	 float:right;
	 padding-right: 5px;
}
 
.texte2
{
font-size: 15px;
 
font-weight: bold;
}
 
a.margetitre{
font-size: 15px;
text-decoration: none ;
font-weight: bold;
}
 
a.margetitre:hover{
font-size: 15px;
text-decoration: none ;
font-weight: bold;
}
 
#titrecontenu {
font-size: 17px;
color: #781d89;
text-align:left;
text-decoration: underline ;
height:10px;
 
}
 
#bandeau {
position: relative;
	width:757px;
	height:25px;
 
	top: 153px;
	left:220px;
color: #7890d2;
text-align:left;
text-decoration: underline ;
font-size: 15px;
 
font-weight: bold;
	}
#menu {
position: relative;
	float:left;
	width:208px;
	height:283px;
	top: 210px;
	left: 5px;
	text-align: center;
	}
#contenu {
position: relative;
	float:left;
	width:757px;
	height:365px;
	top:30px;
	left:12px;
	overflow: auto;
	font-size: 12px;
	font-weight: bold;
	}
 
	#contenu2 {
position: relative;
	float:left;
	width:757px;
	height:365px;
	top:30px;
	left:12px;
	overflow: auto;
font-size: 14px;
	font-weight: bold;
	}
 
	td, table{
	vertical-align:top;
	line-height:12px;
	}
 
	.gallerie .image {
  float: left;
  margin-left: 15px;
  margin-bottom: 15px;
   text-align: center;
   color:red; /* ta couleur */;
 
}
 
 
.gallerie .image img {
float: left;
margin-left: 15px;
  margin-bottom: 15px;
   text-align: center;
   color:red; /* ta couleur */;
}
 
 
	.gallerie2 .image {
  float: left;
  margin-left: 100px;
  margin-bottom: 70px;
   text-align: middle;
 
 
}
.format{
  float: left;
  margin-left: 20px;
  margin-bottom: 30px;
  font-weight: bold;
 
}
 
.clear {
  clear: both;
}
 
#bandeau {
position: relative;
}
 
.choix {
color: #7890d2;
text-align:left;
text-decoration: underline ;
font-size: 15px;
 
font-weight: bold;
	}

merci d'avance

**Erwan31** · 04/09/2009, 20h02

Bonjour,
tu dois supprimer l'overflow:auto de #contenu.
Au passage tu as deux fois le même id (contenu) dans la page alors qu'un id ne peut être utilisé qu'une seule fois.
Tu as beaucoup de choses à améliorer aussi bien sur le design que le code.

**gaya102** · 05/09/2009, 00h14

qu'est ce qui ne va pas sur le design?

**Erwan31** · 05/09/2009, 03h07

Ben en tant que Webdesigner j'aurais tendance à te conseiller de tout revoir

> La quantité de rose est excessive, c'est un peu kitch et l'association aux sites "roses" est de ce fait inévitable.
> le cadre noir n'est pas esthétiquement approprié de par sa lourdeur et son association pas très heureuse avec le rose.
> Eviter le centrage de tes textes (menu) et privilégier un texte aligné à gauche
> Eviter le soulignement des tes textes (excepté pour les liens)
> Dans l'ensemble ce n'est pas assez sobre: le contenant (le site) sera d'autant plus sobre et neutre que les faire-part pourront être mis en valeur par contraste
avec leur contenant.
Je ne dis pas que le site ne doit pas refléter les tendances graphique et l'esprit général de tes faire-part mais ça doit se faire de manière à ne pas nuir à leur mise en valeur.

**gaya102** · 05/09/2009, 08h59

snif j'étais assez fière de moi
en fait à la base il n'y avait pas de menu a gauche mais un menu déroulant sur celui du haut. Mais comme je n'y suis pas arrivé....

en tout cas merci de tes conseils

Dans l'ensemble ce n'est pas assez sobre: le contenant (le site) sera d'autant plus sobre et neutre que les faire-part pourront être mis en valeur par contraste

Q'est ce que tu veux dire par la?

Sinon revenons au sujet

j'avais mis "overflow:auto de #contenu." pour avoir un scrolling a droite pour ca reste dans ma page. Par contre je ne comprend pas pourquoi j'en ai un en bas. J'ai mis toute les dimensions pour que ca ne dépasse pas de se qui est prévu

**Erwan31** · 05/09/2009, 12h26

Envoyé par gaya102

Q'est ce que tu veux dire par la?

En règle général, plus tu auras de différence stylistique et formelle entre l'interface
et le faire-part, plus l'association des deux sera esthétiquement pertinente en
plus d'ajouter une mise en valeur réciproque avec un plus grand impact visuel
pour le faire-part.
Les quasi-redondances graphiques (presque similaires sur le forme) entraînent
souvent des effets de lourdeur et des associations formelles pas très heureuses.

Par exemple tu peux associer une typo baton (comme la Verdana) avec une
typo à empattement (la time, la Geogia...) sans risque mais le mélange de 2
typo baton ou à empattement est malvenu (dans la majorité des cas on va dire).

Présence d'un scrolling inutile

Défilement en CSS

Vue hybride

Discussions similaires

Partager

Partager