besoin aide débutante css

Version imprimable

Bonjour,
Je suis en train de réaliser un site avec css mais j'ai quelques petits problèmes sous Firefox l'affichage est comme je le désire et sous IE mon texte p2 est fort décalé dans le bas, pouvez vous m'aideé et en même temps me donner les erreurs de syntaxe qu'il y a car il doit y en avoir beaucoup voici mon code :

Code:

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
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Le site du Vélodrome à Maubeuge</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		<style type="text/css">
 
body
{
	margin: 5px 0 ;
	padding :15px ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #ccccff ;
}
 
div#conteneur
{
	position : relative;
	margin: 0 ;
	text-align: left ;
	border: 2px solid #666699 ;
	background: #fff ;
}
 
h1#header
{
	position : relative;
	height: 700px ;
	background: url(bienvenue.gif) no-repeat left top ;
	margin: 0 ;
}
 
h1#header a
{
	position:absolute;
	left :150px;
	width: 660px ;
	height: 130px ;
	background: url(bnr.png) no-repeat ;
	border: 1px solid #000000 ;
	text-indent: -5000px ;
}
 
div#contenu
{
	padding: 0px 0px 0 120px ;
}
 
div#contenu h2
{
	position:absolute;
	top:200px;
	width:700px;
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.4em ;
	color: #666699 ;
	border-bottom: 1px solid #666699 ;
}
 
div#contenu h3
{
	position:absolute;
	top:440px;
	width: 700px;
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #666699 ;
	border-left: 3px solid #666699 ;
	color: #666699 ;
}
 
div#contenu p
{
	position : absolute;
	padding-left:65px;
	top:240px;
	width:500px;
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}
 
div#contenu p2
{
	position : absolute;
	padding-left:35px;
	top:480px;
	width:500px;
	text-align:left ;
	text-indent: 1em ;
	line-height: 1.7em ;
}
 
div#contenu a
{
	color: #769cda ;
}
 
div#contenu a:hover
{
	color: #666699 ;
}
 
ul#menu
{
	position : absolute;
	top : 155px;
	height:30px;
	right : 115px;
	margin: 0px ;
	list-style-type:none;
}
ul#menu li
{
	float: left ;
	text-align: center ;
}
 
ul#menu li a
{
	width: 140px ;
	line-height: 30px ;
	font-size: 1.4em ;
	color: #000000 ;
	display: block ; 
	text-indent: 0px ; 
 
	text-decoration: none ;
	border: 1px solid #000000 ;
	border-right: 1px solid #000000 ;
}
 
ul#menu li a:hover
{
	background: url(rose.jpg) no-repeat 0 -30px ; 
	border: 1px solid #000000 ;
}
 
 
p#footer
{
	position: relative;
	margin: 0px ;
	padding: 0px ;
	line-height: 30px ;
	text-align: right ;
	color: #769cda ;
}
 
pre
{
	overflow: auto ;
	background: #ccccff ;
	border: 2px solid #666699 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}
 
 
pre span
{
	color: #bbc1de ;
}
 
pre span.comment
{
	color: #a59fc5 ;
}
 
		</style>
	</head>
 
	<body>
	<div id="conteneur">		
		<h1 id="header"><a href="accueil.html" title="Accueil"><span>Le Vélodrome</span></a></h1>
 
		<ul id="menu">
			<li><a href="accueil.html">Page d'accueil</a></li>
			<li><a href="bar.html">Le Bar</a></li>
			<li><a href="restaurant.html">Le restaurant</a></li>
			<li><a href="hotel.html">L'hôtel</a></li>
			<li><a href="contact.html">Contact et plan</a></li>
		</ul>
 
		<div id="contenu">
			<h2>Accueil</h2>
			<p>Le Caf&eacute; H&ocirc;tel Restaurant du V&eacute;lodrome se situe à Maubeuge entre le commisariat et la Mairie, non loin du merveilleux zoo de Maubeuge.
            <br>Pourquoi Le V&eacute;lodrome ? R&eacute;ponse toute simple, il y a quelques années de ça, un v&eacute;lodrome se trouvait &agrave; la place du commissariat. Et des chambres de l'h&ocirc;tel, on pouvait voir les nombreux cyclistes de l'&eacute;poque.<br />
            <br>
            C'est dans la joie et la bonne humeur que toute l'&eacute;quipe du V&eacute;lodrome vous accueillera pour des soir&eacute;es &eacute;tape comme pour des longs s&eacute;jours !</p>
		</div>
		<div id="contenu"> 
			<h3><strong>Horaires d'ouverture:</strong></h3>
			<p2>Le caf&eacute; est ouvert :<br>
			- du lundi au vendredi soir,<br>
			- le samedi de 08h00 &agrave; 14h00,<br>
			- le dimanche de 09h00 &agrave; 14h00 et de 17h00 &agrave 19h00.<br><br>
            Le restaurant est ouvert :<br>
			- du lundi au vendredi le midi uniquement,<br>
			- le vendredi soir sur réservation. </p>
		</div>
 
		<p id="footer">Site créé par A.L.</p>
	</div>
	</body>
</html>

Merci de votre aide :cry:

Ah la la le jour oú IE aura disparu de la circulation ce sera un vrai bonheur pour les webmasters ....
Si tu n'as pas envie d'inciter les gens à utiliser un vrai navigateur Web, une technique consiste à cacher du code CSS à IE afin que seul firefox le prenne en compte. Tu peux mettre
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 div#contenu p2  { position : absolute; padding-left:35px; top:480px; width:500px; text-align:left ; text-indent: 1em ; line-height: 1.7em ; } html>body div#contenu p2  { réglages FF ... }
Ainsi, IE ne verra que le premier bloc, alors que FF verra les 2. Mais comme le code destiné à FF est placé après le bloc pour IE, c'est celui de FF qu'il prendra en compte,

Good luck

27/05/2007, 12h33
aurore973

merci encore pour ta réponse

Merci pour tout mais avec cela internet ne verra plus le second block et j'ai besoin que ce block soit accessible sur tous les navigateurs enfin la plupart.

As tu remarqué de grosses erreurs de syntaxe ?

Merci d'avance.
27/05/2007, 12h55
muad'dib

Pas grave si IE ne voit pas le second bloc, il aura vu le premier. Le second bloc sera également une définition de p2 mais seul FF la prendra en compte. Donc ton problème est résolu.

Pour les erreurs de syntaxe : http://jigsaw.w3.org/css-validator/
27/05/2007, 15h18
aurore973

merci

Merci pour avoir répondu si vite mon CSS est validé donc tout va bien .

bonjour,

pour vérifier si ton HTML est valide : http://validator.w3.org/

J'ai passé ta page à la validation :
Il manque le doctype
Essaye celui-ci (le plus contraignant)

Citation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Tu en trouveras d'autres dans la FAQ HTML ;)
Si tu utilises le doctype ci-dessus :
ferme des balises <br>

Code:

<br />
je crois que tu confonds class et id :
Un id est unique et ne s'applique qu'à une seul élément.
Une classe peut s'appliquer à plusieurs éléments.
J'ai remarqué deux éléments ayant le même id :
Code:

1 2 3 4 5 6 7 8 9 <div id="contenu"> <h2>Accueil</h2> ..... </div> <div id="contenu"> <h3><strong>Horaires d'ouverture:</strong></h3> .... </div>
remplace id par class. Il te faudra modifier légèrement la syntaxe CSS, c'est à dire remplacer les # par un point (cf. FAQ CSS)
p2 n'est pas une balise HTML . Ecris plutôt :

Code:

<p class="p2">
Voilà pour la syntaxe...

Pour le style "contenu" :
Code:

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 div#contenu { padding: 0px 0px 0 120px ; } div#contenu h2 { position:absolute; top:200px; width:700px; padding-left: 25px ; line-height: 25px ; font-size: 1.4em ; color: #666699 ; border-bottom: 1px solid #666699 ; } div#contenu h3 { position:absolute; top:440px; width: 700px; margin-left: 15px ; padding-left: 5px ; border-bottom: 1px solid #666699 ; border-left: 3px solid #666699 ; color: #666699 ; } div#contenu p { position : absolute; padding-left:65px; top:240px; width:500px; text-align: justify ; text-indent: 2em ; line-height: 1.7em ; } div#contenu p2 { position : absolute; padding-left:35px; top:480px; width:500px; text-align:left ; text-indent: 1em ; line-height: 1.7em ; }
Le style p2 est ignoré car comme je l'ai dit plus haut p2 n'est pas une balise HTML. Donc seuls div#contenu h2, div#contenu h3 et div#contenu p sont interprétés... Et comme deux div ont le même id, et que tu définis la même ordonnée (top), ces deux div sont superposés (c'est le résultat que j'obtiens).