Titre sur une seule ligne

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

bonjour

voila j'ai mon titre "collection de faire part de mariage" qui est sur 2 lignes et je ne comprend pas pourquoi.
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;
	}

pouvez vous m'aidez

**Erwan31** · 04/09/2009, 19h51

Bonsoir,
c'est en effet un bug assez étrange inhérent à la Comic Sans.
De toute façon la Comic sans n'est pas du tout appropriée ici sans
parler de ses défaillances esthétiques...
Je te conseille donc vivement de changer de typo et d'en trouver une plus
élégante mais à utiliser avec parcimonie.

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

tu en aurais une a me conseillé?
en tout cas merci du conseil

**Erwan31** · 05/09/2009, 02h29

Dans les police à empattement (serif), la georgia italic passe plutôt bien en général pour des titres.

**gaya102** · 05/09/2009, 09h21

j'ai changé la police et le problème est toujours la

De plus tu peux aller voir c'est pas beau, c'est irrégulier
http://www.lemondedegaya.fr/collection2.php

c'est normal que ca fasse ca?

FoxLeRenard · 05/09/2009, 09h50

Pfffffffff... dur dur de t'aider puisque tu as changé ...

En effet je n'ais pas ce probléme, par contre la mise en page est trés mauvaise, double ou triple scroll, menu de gauche hors du cadre, tu aurais besoins de revoir (simplifier) ta mise en page.

Veux tu un model ?

**gaya102** · 05/09/2009, 09h56

j'ai fais les modifs qu'il m'a conseillé plus haut

En effet je n'ais pas ce probléme, par contre la mise en page est trés mauvaise, double ou triple scroll, menu de gauche hors du cadre, tu aurais besoins de revoir (simplifier) ta mise en page.

tu peux me faire un print de ta page car je n'ai pas ca. Je sais que mon site a un problème avec IE6. Sinon tu est avec quel navigateur?

FoxLeRenard · 05/09/2009, 10h16

Envoyé par gaya102

j'ai fais les modifs qu'il m'a conseillé plus haut
tu peux me faire un print de ta page car je n'ai pas ca. Je sais que mon site a un problème avec IE6. Sinon tu est avec quel navigateur?

sans même savoir sur quel navigateur, ton HTML et tes CSS c' est a revoir voila ce que j'ais en IE7 et IE8
voir image

**gaya102** · 05/09/2009, 10h19

oula j'ai pas du tout ca chez moi

Bon aller faut que je revoie mon code mais déjà que je n'y comprend pas grand chose
Je crois que je vais devoir refaire mon site de A a Z

FoxLeRenard · 05/09/2009, 10h24

Envoyé par gaya102

oula j'ai pas du tout ca chez moi

Bon aller faut que je revoie mon code mais déjà que je n'y comprend pas grand chose
Je crois que je vais devoir refaire mon site de A a Z

C 'est pour cela que je te proposais de l'aide.
Tu enferme des objets (menu etc..) que tu repositionne dans tes CSS
En plus les CSS normaux et le CSS réservé a IE sont contradictoires !

**gaya102** · 05/09/2009, 10h27

En fait j'avais remarqué que ca que je m'étais pour firefox ne marchais pas pour ie donc en fait je faisais le site en double. Je t'avoue que je suis une débutante et ca fais 2 semaines que j'y suis et ca marche toujours pas.

Merci de ton aide en tout cas

bon j'ai une fais une modif qui en principe a enlever le scrolling. je pars bosser donc je retravaillerai sur mon code cet après midi

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

Envoyé par gaya102

j'ai changé la police et le problème est toujours la
c'est normal que ca fasse ca?

Non pas du tout, c'est un bug. Tu peux éviter ça en forçant le non retour à la ligne en déclarant ceci: white-space:nowrap

FoxLeRenard · 05/09/2009, 13h53

Bon voila ma version,
ça coute rien de la tester

reprends intégralement mon html et ma feuille de style
pour le moment ne changes rien appelles les gaya.htm et gaya.css

Attention tout est en minuscule, le DOCTYPE est strict etc ...

gaya.htm

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
 
<!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='en' lang='en'>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>le monde de gaya et ses faire part (site officiel)</title>
<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="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="robots" content="all" />
<meta http-equiv="content-language" content="fr, en" />
<meta name="expires" content="never" />
<meta name="rating" content="general" />
<meta name="revisit-after" content="30 days" />
<meta content="Thaon Sandrine" name=author>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="gaya.css" type="text/css" media="all"  />
</head>
<body scroll="no">
<div class=place>.<br /><br /><br /><br /><br /></div>
<div class=centreX>
<p align=center><span id=titre>Le monde de Gaya </span></p>
<p align=right><span id=texte>Faire-part de mariage originaux et personnalisés.</span></p>
<p>
<ul id=menuHorizon>
  <li class=deroulant style="width: 220px"></li>
  <li class=deroulant style="width: 90px">
  <a href="http://www.lemondedegaya.fr/Accueil.php">Accueil</a> </li>
  <li><img alt="un dessin type"  src="images/fleur_menu_page.jpg" /> </li>
  <li class=deroulant style="width: 80px">
  <a href="http://www.lemondedegaya.fr/mariage.php">Mariage</a> </li>
  <li><img alt="un dessin type"   src="images/fleur_menu_page.jpg" /> </li>
  <li class=deroulant style="width: 80px">
  <a href="http://www.lemondedegaya.fr/mariage.php">Naissance</a> </li>
  <li><img alt="un dessin type" src="images/fleur_menu_page.jpg" /> </li>
  <li class=deroulant style="width: 80px">
  <a href="http://www.lemondedegaya.fr/mariage.php">Création</a> </li>
  <li><img alt="un dessin type"  src="images/fleur_menu_page.jpg" /> </li>
  <li class=deroulant style="width: 80px">
  <a  href="http://www.lemondedegaya.fr/mariage.php">Divers</a> </li>
  <li><img  alt="un dessin type" src="images/fleur_menu_page.jpg" /> </li>
  <li class=deroulant style="width: 80px">
  <a  href="http://www.lemondedegaya.fr/mariage.php">Contact</a> 
  </li></ul>
  <br /><br />
 </p>
  <p align=center><span id=texte>La collection faire-part mariage </span></p>
 
<div id=menu>
<a class=margetitre href="http://www.lemondedegaya.fr/collection.php">La collection</a><br /><br />
<a class=margetitre href="http://www.lemondedegaya.fr/format.php">Les formats</a><br /><br />
<a class=margetitre href="http://www.lemondedegaya.fr/papiers.php">Les papiers</a><br /><br />
<a class=margetitre href="http://www.lemondedegaya.fr/textes.php">Idées de textes</a><br /><br />
<a class=margetitre href="http://www.lemondedegaya.fr/conditions.php">Conditions de ventes</a> 
</div>
 
<div class=fenetre>
<table border=0 width=90%>
  <tbody><tr>
    <td style="vertical-align: middle" align=middle>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm">
    <img height=100px src="images/comme_site_devant_petite.jpg" width=120px border=0 alt="" /></a><br />
    <A href="http://www.lemondedegaya.fr/faire-part-cygne.htm">La branche</a><br />A partir de 1.95 euros <br />
    </td>
    <td style="vertical-align: middle" align=middle>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm">
    <img height=100px src="images/comme_site_devant_petite.jpg" width=120px border=0 alt="" /></a><br />
    <A href="http://www.lemondedegaya.fr/faire-part-cygne.htm">La branche</a><br />A partir de 1.95 euros <br />
    </td>
    <td style="vertical-align: middle" align=middle>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm">
    <img height=100px src="images/comme_site_devant_petite.jpg" width=120px border=0 alt="" /></a><br />
    <A href="http://www.lemondedegaya.fr/faire-part-cygne.htm">La branche</a><br />A partir de 1.95 euros <br />
    </td>
    </tr><tr>
    <td style="vertical-align: middle" align=middle>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm">
    <img height=100px src="images/comme_site_devant_petite.jpg" width=120px border=0 alt="" /></a><br />
    <A href="http://www.lemondedegaya.fr/faire-part-cygne.htm">La branche</a><br />A partir de 1.95 euros <br />
    </td>
    <td style="vertical-align: middle" align=middle>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm">
    <img height=100px src="images/comme_site_devant_petite.jpg" width=120px border=0 alt="" /></a><br />
    <A href="http://www.lemondedegaya.fr/faire-part-cygne.htm">La branche</a><br />A partir de 1.95 euros <br />
    </td>
    <td style="vertical-align: middle" align=middle>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm">
    <img height=100px src="images/comme_site_devant_petite.jpg" width=120px border=0 alt="" /></a><br />
    <A href="http://www.lemondedegaya.fr/faire-part-cygne.htm">La branche</a><br />A partir de 1.95 euros <br />
    </td>
    </tr><tr>
    <td style="vertical-align: middle" align=middle>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm">
    <img height=100px src="images/comme_site_devant_petite.jpg" width=120px border=0 alt="" /></a><br />
    <A href="http://www.lemondedegaya.fr/faire-part-cygne.htm">La branche</a><br />A partir de 1.95 euros <br />
    </td>
    <td style="vertical-align: middle" align=middle>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm">
    <img height=100px src="images/comme_site_devant_petite.jpg" width=120px border=0 alt="" /></a><br />
    <A href="http://www.lemondedegaya.fr/faire-part-cygne.htm">La branche</a><br />A partir de 1.95 euros <br />
    </td>
    <td style="vertical-align: middle" align=middle>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm">
    <img height=100px src="images/comme_site_devant_petite.jpg" width=120px border=0 alt="" /></a><br />
    <A href="http://www.lemondedegaya.fr/faire-part-cygne.htm">La branche</a><br />A partir de 1.95 euros <br />
    </td>
  </tr></tbody></table>
</div>
 
</div>
</body></html>

gaya.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
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
 
 
body {
	FONT-STYLE: italic; FONT-FAMILY: Georgia,Comic Sans MS, Times New Roman, Times, serif; BACKGROUND-COLOR: #f7d8fc
}
/* padding sur le <td> pour cellpadding et border-spacing sur le <table> pour cellspacing. */
table {margin: 0px;border: 0px;border-spacing: 0px;border-collapse:collapse;}
td {padding: 0px;}
 
 
div.centreX {width: 980px;margin : auto;height: 542px; border: black 2px solid; background-image: url(images/fond_page.jpg); background-repeat: no-repeat;}
div.place {width:100%;heyght:150px;}
#titre {
 FONT-SIZE: 38px; COLOR: #b04cbf; FONT-STYLE: italic; FONT-FAMILY: Georgia,Comic Sans MS, Times New Roman, Times, serif; 
}
#texte {
 FONT-SIZE: 17px; COLOR: #7890d2; FONT-STYLE: italic; FONT-FAMILY: Georgia ,Comic Sans MS, Times New Roman, Times, serif; 
}
 
#menuHorizon {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#menuHorizon LI {
	FLOAT: left; FONT-FAMILY: Comic Sans MS, Times New Roman, Times, serif; LIST-STYLE-TYPE: none; POSITION: relative; TEXT-DECORATION: none
}
#menuHorizon LI A {
	DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 15px; WIDTH: 100%; COLOR: #b04cbf; LINE-HEIGHT: 22px; TEXT-DECORATION: none
}
#menuHorizon LI A:hover {
	FONT-WEIGHT: bold; FONT-SIZE: 15px; COLOR: purple; BACKGROUND-COLOR: #f8d8fc
}
#menuHorizon LI UL {
 BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000 1px solid; DISPLAY: none; PADDING-LEFT: 0px; FONT-SIZE: 15px; BACKGROUND: #fff; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #000 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 32px
}
#menuHorizon LI:hover > UL {
	DISPLAY: block
}
#menuHorizon LI UL LI {
	BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; FLOAT: none; BORDER-LEFT: #000 0px solid; BORDER-BOTTOM: #000 0px solid
}
#menuHorizon LI UL LI A {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #000 1px solid; WIDTH: 158px; PADDING-TOP: 0px; BORDER-BOTTOM: #000 1px solid
}
 
#menu {
 LEFT: 5px; FLOAT: left; WIDTH: 200px; POSITION: relative; TOP: 180px;  TEXT-ALIGN: center;
}
div.fenetre {color : #000000; width : 780px;height : 360px;overflow : auto;
SCROLLBAR-FACE-COLOR: #ffffff;SCROLLBAR-DARKSHADOW-COLOR:#ffffff;
SCROLLBAR-SHADOW-COLOR:#B254C2;SCROLLBAR-ARROW-COLOR:#ffffff;
SCROLLBAR-TRACK-COLOR:#ffffff;SCROLLBAR-HIGHLIGHT-COLOR: #B254C2;
SCROLLBAR-3DLIGHT-COLOR:#ffffff;}

**gaya102** · 05/09/2009, 15h21

j'ai fais comme tu m'as dit

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

sinon je t'ai fait un print de mon écran avec firefox

**Erwan31** · 05/09/2009, 15h33

Au passage, tu as des problèmes de syntaxe. Les valeur d'attribut doivent se trouver entre guillemets droits et non simple quotes (attributs de langue de l'élément html) et attribut align ect.
Les attributs de présentation comme align sont déconseillés (c'est CSS qui
se charge de la présentation et non HTML) et invalide en xhtml strict (strict pour strict séparation entre le couple structure/contenu et CSS).

Les br ne sont pas fait pour ajouter des espaces verticaux mais uniquement pour forcer une coupure de ligne dans un texte. Pour les espacement verticaux, utiliser les marges voire padding verticaux.

FoxLeRenard · 05/09/2009, 17h04

Envoyé par gaya102

j'ai fais comme tu m'as dit

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

sinon je t'ai fait un print de mon écran avec firefox

Je regardes mais je sais d'avance ... ma hauteur de DIV est maldéfinie !
Si Erwan31 pouvait aider tu aurais une ossature super ..
car pour tes autres pages ce serait la même ossature

Bon je reviens ...

**gaya102** · 05/09/2009, 17h10

merci en tout cas car je t'avoue que quand tu m'as dit que mes pages avaient de gros problème j'ai eu un gros coup de découragement

Je te laisse finir mais j'aurai des question a te poser car j'ai pas tout compris

FoxLeRenard · 05/09/2009, 17h36

Envoyé par gaya102

merci en tout cas car je t'avoue que quand tu m'as dit que mes pages avaient de gros problème j'ai eu un gros coup de découragement

Je te laisse finir mais j'aurai des question a te poser car j'ai pas tout compris

Tu peux poser tes questions

J' ais bien repris et simplifié le tout, j'ais même pris en compte les remarques de Erwan31

ça donne

gaya.htm

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
 
 
<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>le monde de gaya et ses faire part (site officiel)</title>
<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="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="robots" content="all" />
<meta http-equiv="content-language" content="fr, en" />
<meta name="expires" content="never" />
<meta name="rating" content="general" />
<meta name="revisit-after" content="30 days" />
<meta content="Thaon Sandrine" name="author">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="gaya.css" type="text/css" media="all"  />
</head>
<body scroll="no">
<div class="centreX">
<p align="center"><span class="titre">Le monde de Gaya </span></p>
<p align="right"><span class="texte">Faire-part de mariage originaux et personnalisés.</span></p>
<ul id="menuHorizon">
  <li style="width: 240px">.</li>
  <li><a class="uli" href="http://www.lemondedegaya.fr/Accueil.php">Accueil</a> </li>
  <li><img alt="un dessin type"  src="images/fleur_menu_page.jpg" /> </li>
  <li><a class="uli" href="http://www.lemondedegaya.fr/mariage.php">Mariage</a> </li>
  <li><img alt="un dessin type"   src="images/fleur_menu_page.jpg" /> </li>
  <li><a class="uli" href="http://www.lemondedegaya.fr/mariage.php">Naissance</a> </li>
  <li><img alt="un dessin type" src="images/fleur_menu_page.jpg" /> </li>
  <li><a class="uli" href="http://www.lemondedegaya.fr/mariage.php">Création</a> </li>
  <li><img alt="un dessin type"  src="images/fleur_menu_page.jpg" /> </li>
  <li><a class="uli"  href="http://www.lemondedegaya.fr/mariage.php">Divers</a> </li>
  <li><img  alt="un dessin type" src="images/fleur_menu_page.jpg" /> </li>
  <li><a class="uli"  href="http://www.lemondedegaya.fr/mariage.php">Contact</a> </li>
</ul>
<br /><br />
  <p align="center"><span class="texte">La collection faire-part mariage </span></p>
 
<div class="menuG">
<a class="gauche" href="http://www.lemondedegaya.fr/collection.php">La collection</a><br /><br />
<a class="gauche" href="http://www.lemondedegaya.fr/format.php">Les formats</a><br /><br />
<a class="gauche" href="http://www.lemondedegaya.fr/papiers.php">Les papiers</a><br /><br />
<a class="gauche" href="http://www.lemondedegaya.fr/textes.php">Idées de textes</a><br /><br />
<a class="gauche" href="http://www.lemondedegaya.fr/conditions.php">Conditions de ventes</a> 
</div>
 
<div class="fenetre">
<table>
  <tbody><tr>
    <td>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" >
    <img class="img100" src="images/comme_site_devant_petite.jpg" alt="" /><br />
    La branche</a><br />A partir de 1.95 euros <br />
    </td>
    <td>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" >
    <img class="img100" src="images/comme_site_devant_petite.jpg" alt="" /><br />
    La branche</a><br />A partir de 1.95 euros <br />
    </td>
    <td>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" >
    <img class="img100" src="images/comme_site_devant_petite.jpg" alt="" /><br />
    La branche</a><br />A partir de 1.95 euros <br />
    </td>
    </tr><tr>
    <td>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" >
    <img class="img100" src="images/comme_site_devant_petite.jpg" alt="" /><br />
    La branche</a><br />A partir de 1.95 euros <br />
    </td>
    <td>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" >
    <img class="img100" src="images/comme_site_devant_petite.jpg" alt="" /><br />
    La branche</a><br />A partir de 1.95 euros <br />
    </td>
    <td>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" >
    <img class="img100" src="images/comme_site_devant_petite.jpg" alt="" /><br />
    La branche</a><br />A partir de 1.95 euros <br />
    </td>
    </tr><tr>
    <td>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" >
    <img class="img100" src="images/comme_site_devant_petite.jpg" alt="" /><br />
    La branche</a><br />A partir de 1.95 euros <br />
    </td>
    <td>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" >
    <img class="img100" src="images/comme_site_devant_petite.jpg" alt="" /><br />
    La branche</a><br />A partir de 1.95 euros <br />
    </td>
    <td>
    <a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" >
    <img class="img100" src="images/comme_site_devant_petite.jpg" alt="" /><br />
    La branche</a><br />A partir de 1.95 euros <br />
    </td>
  </tr></tbody></table>
</div>
 
</div>
</body></html>

gaya.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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
 
body {
	FONT-STYLE: italic; FONT-FAMILY: Georgia,Comic Sans MS, Times New Roman, Times, serif; BACKGROUND-COLOR: #f7d8fc
}
/* padding sur le <td> pour cellpadding et border-spacing sur le <table> pour cellspacing. */
table {margin: 0px;border: 0px;border-spacing: 0px;border-collapse:collapse;width: 90%}
td {padding: 0px;text-align: center;vertical-align: middle;}
 
div.centreX {width: 990px;height: 542px; border: black 2px solid; background-image: url(images/fond_page.jpg); background-repeat: no-repeat;margin: 150px auto; }
 
span.titre {
font-family : Georgia,Comic Sans MS, Times New Roman, Times, serif;
font-size : 38px;color:#b04cbf;font-style: italic;
}
span.texte {
font-family : Georgia,Comic Sans MS, Times New Roman, Times, serif;
font-size : 17px;color:#7890d2;font-style: italic;
}
 
a.uli {display: block;font-weight: bold;width: 100%; line-height: 22px; font-family : Verdana, Myranda,Arial, Helvetica, sans-serif;   font-size: 15px; color: #b04cbf; text-decoration: none;}
a.uli:link { } 
a.uli:hover {color : #ff9999; }
 
a.gauche {font-weight: bold;font-family : Verdana, Myranda,Arial, Helvetica, sans-serif;   font-size: 15px; color: #b04cbf; text-decoration: none;}
a.gauche:link { } 
a.gauche:hover {color : #ff9999; }
 
img.img100 {width: 120px;height: 100px;border: 0px;}
 
#menuHorizon { padding: 0px;margin: 0px;}
#menuHorizon LI {	FLOAT: left; FONT-FAMILY: Comic Sans MS, Times New Roman, Times, serif; LIST-STYLE-TYPE: none; POSITION: relative; TEXT-DECORATION: none}
#menuHorizon LI UL {
 BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000 1px solid; DISPLAY: none; PADDING-LEFT: 0px; FONT-SIZE: 15px; BACKGROUND: #fff; 
LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #000 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 32px;
}
 
div.menuG { left: 5px; float: left; width: 200px; position: relative; top: 160px;  text-align: center;}
div.fenetre {width : 780px;height : 360px;overflow : auto;}

**gaya102** · 05/09/2009, 22h19

je suis désolé mais c'est pire

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

**Erwan31** · 05/09/2009, 22h32

T'as CSS (gaya.css) n'est pas en ligne

Titre sur une seule ligne

Tableau en CSS

Discussions similaires

Partager

Partager