Bonjour, merci pour vos réponse.
Lectures instructives.
Donc,si j'ai bien compris le problème ne viens pas du doctype mais de la façon dont les documents sont codés, conformément au type de document invoqué dans le doctype…
En effet mon css semble n'être que partiellement interprété dans firefox et safari.
Bon je vérifie et je m'aperçois que je n'est pas mis "#" devant les codes couleur et que mes tailles ne sont pas suivies de l'unité (px, par exemple)
Je ne savais pas que c'était obligatoire, peut-être parce que jusqu'à maintenant je n'ai codé qu'en transitional.
Donc merci, un faux problème a apporté des vrais réponses.
Au passage je pose une dernière question: une css doit-elle être munie d'un en-tête ou d'un prologue précisant l'encodage des caractères ou autres définitions.
Y'a-t-il une bonne adresse recensant précisément la syntaxe css2 (un peu comme à la page 13 de "CSS 2" de Raphaël Götter concernant le xhtml!)
tenx
(après ça il me restera plus qu'à mettre résolu dans le titre de ce poste)
any comment?
<!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="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="style.css" >
<title>AmeVisuel</title>
</head>
<body>
<div id="container">
<div class="corner1">
</div>
<div class="presentation">
<h2 class="headingNav"><a href="presentation.html">présentation</a></h2>
</div>
<div class="corner2">
</div>
<div class="events">
<h2 class="headingNav"><a href="events.html">évènements</a></h2>
</div>
<div class="contact">
<h2 class="headingNav"><a href="contact.html">contacter</a></h2>
</div>
<div class="corner3">
</div>
<div class="partners">
<h2 class="headingNav"><a href="partners.html">partenaires</a></h2>
</div>
<div class="corner4">
</div>
</div>
</body>
</html>
css
[code]
/*<?xml version="1.0" encoding="UTF-8"?>*/
body {margin:0px; padding:0px; background-color:#FFFFFF}
.c_name{font-family:Tahoma; font-size:10px; color:#6B6767;}
.policy1{font-family:Tahoma; font-size:11px; color:#999797;}
.policy2{font-family:Tahoma; font-size:11px; color:#5B5B5B; text-decoration:none}
.text{font-family:Tahoma; font-size:11px; color:#363636; line-height:12px}
.main{font-family:Tahoma; font-size:11px; color:#FFFFFF; line-height:13px}
.blue{font-family:Tahoma; font-size:11px; color:#D0E2F2; line-height:13px}
.yellow{font-family:Tahoma; font-size:11px; color:#EAFA00; }
.corner1, .corner2, .corner3, .corner4, .presentation, .events, .contact, .partners {
height: 162px;
width: 162px;
}
a, a:visited {
color: #ffffff;
text-decoration:none;
}
a:hover {
color: #FFDABF;
}
.headingNav {
font-family: verdana, arial, trebuchet, sans-serif;
color: #ffffff;
font-size: 18px;
font-weight: bold;
}
#container {
position: absolute;
left: 50%;
top: 50%;
margin-top: -251px;
background-color: #red;
}
.corner1 {
position: absolute;
left: 50%;
margin-left: -251px;
background-color: #E4F3F8;
-moz-border-radius: 15px 0px 0px 0px;
-khtml-border-radius-top-left: 15px;
-khtml-border-radius-top-right: 0px;
-khtml-border-radius-bottom-right: 0px;
-khtml-border-radius-bottom-left: 0px;
}
.corner1:hover {
background-color: #FFDABF;
}
.presentation {
position: absolute;
left: 50%;
margin-left: -81px;
background-color: #E4F3F8;
background-color: #ABD9E9;
text-align:center;
vertical-align: middle;
}
.corner2 {
position: absolute;
left: 50%;
margin-left: 89px;
background-color: #E4F3F8;
-moz-border-radius:0px 15px 0px 0px;
}
.events {
position: absolute;
left: 50%;
top: 170px;
margin-left: -251px;
background-color: #FFC8A0;
text-align:center;
vertical-align: middle;
}
.contact {
position: absolute;
left: 50%;
top: 170px;
margin-left: 89px;
background-color: #FDB7FF;
text-align:center;
vertical-align: middle;
}
.corner4 {
position: absolute;
left: 50%;
top: 340px;
margin-left: -251px;
background-color: #E4F3F8;
-moz-border-radius:0px 0px 0px 15px;
}
.partners {
position: absolute;
left: 50%;
top: 340px;
margin-left: -81px;
background-color: #FFF815;
text-align:center;
vertical-align: middle;
}
.corner3 {
position: absolute;
left: 50%;
top: 340px;
margin-left: 89px;
background-color: #E4F3F8;
-moz-border-radius:0px 0px 15px 0px;
-khtml-border-radius:15px;
}
Modifié par rnx (11 Jun 2008 - 15:37)
J'ai en ce moment des circonstances atténuantes. Raison de plus pour tourner sept fois mes doigts autour du clavier avant de taper une réponse