Bonjour,
je suis en train de créer un nouveau site en utilisant uniquement les CSS pour ma mise en page.
Le site s'affiche bien sur tous les navigateurs sauf sur les anciennes versions d'Internet Explorer (versions antérieures à IE9).
Je ne comprends pas ce qui ne va pas et ce qu'il faut faire pour que cela fonctionne correctement. C'est pourquoi, je sollicite votre aide.
Voici le codage HTML :
Et voici la feuille de style associée :
Merci de votre aide.
je suis en train de créer un nouveau site en utilisant uniquement les CSS pour ma mise en page.
Le site s'affiche bien sur tous les navigateurs sauf sur les anciennes versions d'Internet Explorer (versions antérieures à IE9).
Je ne comprends pas ce qui ne va pas et ce qu'il faut faire pour que cela fonctionne correctement. C'est pourquoi, je sollicite votre aide.
Voici le codage HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ville de L'Isle-Adam</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]
<style type="text/css">
#recherche{
filter:progid:DXImageTransform.Microsoft.Shadow(color='#910313', Direction=225, Strength=6); zoom:1;
background-color:#FFF000;}
</style>
<![endif]-->
</head>
<body>
<div id="main">
<div id="fixe"><a href="accessibilite.htm" style="font-size:0.65em; text-align:left; letter-spacing: 0.01em; position:absolute; right:163px; ">Accessibilité</a><br>
<img src="images/blason.png" id="blason" width="85" alt="Blason">
<div id="lisleadam"><div id="ville">L'Isle-Adam</div>
Ville internet 2012<br>
@ @ @ @ @</div>
<div style="text-align:center" id="recherche" class="ombrage"><div class="titre">Recherche</div>
</div>
<div style="text-align:center" id="unclic" class="ombrage"><div class="titre">En un clic</div>
<ul id="menu_clic" class="menu_fixe">
<a href=""""><li>Etat civil</li></a>
<a href=""""><li>Compte rendu du conseil municipal</li></a>
<a href=""""><li>Nouveaux arrivants</li></a>
<a href=""""><li>Menus scolaires</li></a>
<a href=""""><li>Publications légales</li></a>
<a href=""""><li>Plan de la ville</li></a>
<a href=""""><li>Dernier Clin d'Oeil</li></a>
</ul></div>
<div style="text-align:center" id="demarches" class="ombrage"><div class="titre">Vos démarches</div>
<ul id="menu_demarches" class="menu_fixe">
<a href=""""><li>Plan canicule</li></a>
<a href=""""><li>Sécurité vacances</li></a>
<a href=""""><li>Inscription scolaire</li></a>
<a href=""""><li>Subventions associatives</li></a>
</ul></div>
<div id="logos"><a href="http://musee.ville-isle-adam.fr/"><img src="images/musee.png"alt="musee" title="Musée Louis Senlecq"></a><a href="http://www.tourisme-isle-adam.net/"><img src="images/i.png" alt="office de tourisme" title="Office de Tourisme"></a>
<a href="http://www.plusbeauxdetours.com/"><img src="images/detours.png"alt="les plus beaux détours de France" title="Les plus beaux détours de France"></a> <a href="http://www.cnvvf.fr/"><img src="images/fleurie.png" title="Ville Fleurie" alt="ville fleurie" style="text-align:right"></a></div></div>
<div id="variable">
<div id="entete"><img src="images/image1.png" width="640" height="150" alt="Pont du Cabouillet"></div>
<div id="nav"><ul id="menu1"><li><a href="""">Découverte</a>
<ul class="niveau2">
<li><a href="""">Nouveaux arrivants</a></li>
<li><a href="""">Venir à L'Isle-Adam</a></li>
<li><a href="""">Quelques données</a></li>
<li><a href="""">Plan de ville</a></li>
<li><a href="""">Ville internet</a></li>
<li><a href="""">Ville européenne</a>
<ul class="niveau3"><li><a href="""">Jumelage</a></li>
<li><a href="""">Infos européennes</a></li>
</ul></li>
<li><a href="""">Météo</a></li>
<li><a href="""">Intercommunalité</a></li>
<li><a href="""">Liens de la rubrique</a></li>
</ul></li>
<li><a href="""">Vie municipale</a>
<ul class="niveau2">
<li><a href="""">Conseil municipal</a>
<ul class="niveau3"><li><a href="""">Elus</a></li>
<li><a href="""">Commissions</li>
<li><a href="""">Organismes</li>
<li><a href="""">Dates des conseils</a></li>
<li><a href="""">Comptes-rendus</a></li>
<li><a href="""">Ecrivez-nous</a></li>
</ul></li>
<li><a href="""">Services municipaux</a></li>
<li><a href="""">Infos municipales</a></li>
<li><a href="""">La ville recrute</a></li>
<li style="line-height:17.5px;"><a href="""">Démarches <br>
administratives</a>
<ul class="niveau3"><li><a href="""">Actes d'état civil</a></li>
<li style="line-height:17.5px;"><a href="""">Demandes de<br>
subventions</a></li>
<li><a href="""">Autres démarches</a></li>
</ul></li>
<li><a href="""">Urbanisme et voirie</a>
<ul class="niveau3"><li style="line-height:17.5px;"><a href="""">Documents<br>
d'urbanisme</a></li>
<li><a href="""">Demandes</a></li>
<li><a href="""">Réalisations en cours</a></li> </ul></li>
<li><a href="""">Publications légales</a></li>
<li><a href="""">Arrêtés municipaux</a></li>
<li><a href="""">Liens de la rubrique</a></li>
</ul></li>
<li><a href="""">Au quotidien</a>
<ul class="niveau2">
<li><a href="""">Jeunes</a>
<ul class="niveau3"><li><a href="""">Petite enfance</a></li>
<li><a href="""">Education</a></li>
<li><a href="""">Adolescence</a></li>
</ul></li>
<li><a href="""">Aînés</a></li>
<li><a href="""">Social</a></li>
<li><a href="""">Santé</a>
<ul class="niveau3"><li><a href="""">Structures</a></li>
<li><a href="""">Médecins</a></li></ul></li>
<li><a href="""">Prévention, sécurité</a>
<ul class="niveau3"><li><a href="""">PPRI</a></li>
<li><a href="""">Plan canicule</a></li>
<li><a href="""">Police nationale</a></li>
<li><a href="""">Police municipale</a></li>
</ul></li>
<li><a href="""">FAQ</a></li>
<li><a href="""">Cultes</a></li>
<li><a href="""">Marchés, brocantes</a></li>
<li><a href="""">Cimetière</a></li>
<li><a href="""">Liens de la rubrique</a></li>
</ul></li>
<li><a href="""">Loisirs</a>
<ul class="niveau2">
<li><a href="""">Au jour le jour</a></li>
<li><a href="""">Associations</a></li>
<li><a href="""">Equipements</a>
<ul class="niveau3"><li><a href="""">culturels</a></li>
<li><a href="""">sportifs</a></li></ul></li>
<li><a href="""">Evénements adamois</a></li>
<li><a href="""">Cinéma</a></li>
<li><a href="""">Location de salles</a></li>
<li><a href="""">Liens de la rubrique</a></li>
</ul>
</li>
<li><a href="""">Ville touristique</a>
<ul class="niveau2">
<li><a href="""">Office de Tourisme</a></li>
<li><a href="""">Musée L. Senlecq</a></li>
<li><a href="""">Patrimoine</a>
<ul class="niveau3b"><li style="line-height:17.5px;"><a href="""">Découverte de<br>
la ville</a></li>
<li><a href="""">Hommes célèbres</a></li>
<li><a href="""">Galerie photos</a></li></ul></li>
<li><a href="""">Plage</a></li>
<li><a href="""">Environnement</a></li>
<li><a href="""">Restauration</a>
<ul class="niveau3"><li><a href="""">Cuisine française</a></li>
<li><a href="""">Cuisine étrangère</a></li>
<li><a href="""">Restauration rapide</a></li>
</ul></li>
<li><a href="""">Hébergement</a></li>
<li><a href="""">Commerces</a></li>
<li><a href="""">Taxe de séjour</a></li>
<li><a href="""">Liens de la rubrique</a></li></ul></li></ul></div>
<div id="contenu">
<div class="rubrique">Actualité</div>
<div class="titres">
Le Logement social à L'Isle-Adam</div>
<img src="images/logement_social.jpg" width="200" height="150" alt="logement social">Le service social a pour mission la gestion du service logement de la ville. Le logement social représente une activité importante au sein du service où sont collectées les demandes.<br>
<br>
Le service social participe aux commissions d'attribution de logements des bailleurs sociaux présents sur le territoire communal.<br>
Au 1er janvier 2010, le parc locatif social recensait 799 logements, représentant 16,25 % des résidences.<br>
Sur les 309 demandes de logements recensées, seuls 58 logements ont été attribués, représentant un taux de rotation de 7,26 %.
<div class="rubrique2">En bref</div>
<div class="bref1"><strong>La vidéosurveillance dans notre ville</strong><br>
La municipalité a décidé la mise en place de 6 caméras de surveillance afin de sécuriser les bâtiments communaux et les espaces publics.<br>
<a href="""">en savoir plus </a></div>
<div class="bref2"><strong>Réhabilitation des vestiaires du gymnase</strong><br>
Plusieurs vestiaires et sanitaires ainsi qu'une salle polyvalente sont en cours de réalisation. La fin des travaux est prévue vers juin prochain.<br>
<a href="""">en savoir plus</a></div>
<div class="rubrique3">Evènements culturels</div>
<div><img src="images/carnaval.jpg" width="75" height="106" alt="carnaval">
<div class="evenement"><strong>Carnaval :</strong><br>
17 mars<br>
Ville<br>
<br>
<a href="""">en savoir plus</a></div>
<img src="images/foir_hort.jpg"height="106" alt="Foire horticole">
<div class="evenement"><strong>Foire horticole :</strong><br>
7 et 8 avril<br>
Parc Manchez<br>
<br>
<a href="""">en savoir plus</a></div>
<img src="images/fete_sport.jpg" width="75" height="106" alt="Fête du sport">
<div class="evenement2"><strong>Fête du sport :</strong><br>
30 juin<br>
Ville<br>
<br>
<a href="""">en savoir plus</a></div>
</div>
</div>
</div>
<div id="footer">
<a href="nouveautes.htm">Nouveautés</a> | <a href="faq.htm">Foire Aux Questions (FAQ)</a> | <a href="aide.htm">Aide</a> | <a href="mentions.htm">Mentions légales</a> | <a href="plan.htm">Plan du site</a> | <a href="contact.htm">Contact</a> | <a href="rss.htm">RSS</a></div>
</div>
</body>
</html>Et voici la feuille de style associée :
@charset "utf-8";
/* CSS Document */
/*---------------------------------------------------------------------------------------------------------------------------------------------
REGLES GENERALES DU DOCUMENT
---------------------------------------------------------------------------------------------------------------------------------------------*/
@font-face{/*définit le fichier de police à utiliser selon les navigateurs*/
font-family :"munier";
src : url('polices/papyrus.eot'); /* Pour IE9 Compat mode */
src : url('polices/papyrus.eot?') format('eot'),
url('polices/papyrus.woff') format('woff'),
url('polices/papyrus.svg#abcd') format('svg'),
url('polices/papyrus.ttf') format('opentype');
}
*{/*supprime les marges par défaut du navigateur*/
margin: 0px;
padding: 0px;
}
body {/*fond du navigateur*/
background-color: #cccccc;
}
#main {/*définit la taille, position et fond du bloc principal*/
width: 960px;
margin-right: auto;
margin-left: auto;
background-image: url(images/fond_main.png);
background-repeat: repeat-y;
}
a img{/*les images sont sans bordure ni marge*/
text-decoration: none;
margin:0px;
padding:0px;
border:none;
}
/*---------------------------------------------------------------------------------------------------------------------------------------------
STYLES DANS "FIXE"
---------------------------------------------------------------------------------------------------------------------------------------------*/
#fixe {/*définit la partie de gauche (sans marge, flotte à gauche, avec une image de fond)*/
margin: 0px;
padding: 0px;
float: left;
background-image: url(images/fond_main.png);
background-repeat: repeat-y;
color: #FFF;
position: relative;
}
#fixe a{/*définit les liens dans la partie de gauche (blanc sans décoration)*/
color: #FFFFFF;
text-decoration: none;
margin:0px;
padding:0px;
}
#fixe #blason {/*définit l'emplacement du blason*/
position: relative;
left: 120px;
}
#lisleadam {/*définit l'emplacement et la taille de "ville internet"*/
text-align: center;
width: 195px;
position: relative;
left: 65px;
margin-top: 10px;
font-family: munier, arial, helvetica;
line-height: 0.8em;
}
#ville {/*définit l'emplacement et la taille du nom de la ville*/
text-align: center;
width: 195px;
position: relative;
margin-top: 10px;
font-family: munier, arial, helvetica;
font-size: 1.8em;
letter-spacing: 0.001em;
font-weight: bold;
margin-bottom: 15px;
}
#recherche, #unclic, #demarches {/*définit l'emplacement, la taille, la couleur et l'ombre des trois blocs*/
margin-top: 30px;
margin-bottom: 30px;
background-color: #c00117;
width: 220px;
margin-right: auto;
margin-left: auto;
font-family: arial, Geneva, sans-serif;
letter-spacing: 0.08em;
vertical-align: middle;
font-size: 0.7em;
position:relative;
box-shadow:-6px 6px 4px #6d0210; /*ombre de boite, horizontal, vertical et degrade*/
-moz-box-shadow:-6px 6px 4px #6d0210; /*ombre de boite, horizontal, vertical et degrade = mozilla netscape*/
-webkit-box-shadow:-6px 6px 4px #6d0210; /*ombre de boite, horizontal, vertical et degrade = chrome, safari*/
line-height: 20px;
}
.titre {/*définit la bordure sous les titres "recherche", "en un clic", "vos démarches"*/
border-bottom-width: 0.01em;
border-bottom-style: dashed;
border-bottom-color: #FFF;
margin-bottom: 4px;
}
.menu_fixe {/*définit les marges des textes à l'interieur des blocs "en un clic" et "vos démarches"*/
text-align: left;
margin-left: 10px;
list-style-type: none;
margin-right: 10px;
padding-bottom: 10px;
}
.menu_fixe li {/*définit la bordure et la puce des listes de "en un clic" et "vos démarches"*/
border-bottom-width: 0.1px;
border-bottom-style: solid;
border-bottom-color: #6d0210;
background-image: url(images/puce.gif);
background-repeat: no-repeat;
background-position: left 3px;
padding-left: 30px;
}
#logos {/*définit la position des logos partenaires*/
position: relative;
left: 75px;
margin: 0px;
padding: 0px;
}
#logos a {/*définit les liens des logos partenaires*/
text-decoration: none;
}
/*---------------------------------------------------------------------------------------------------------------------------------------------
STYLES DANS "VARIABLE"
---------------------------------------------------------------------------------------------------------------------------------------------*/
#variable {/*définit la taille et le fond de la partie de droite*/
width: 700px;
float: right;
background-image: url(images/fond_main.png);
background-repeat: repeat-y;
background-position: right;
margin-bottom: 15px;
}
#entete {/*définit les marges et la taille de l'image d'entête*/
margin: 0px;
padding: 0px;
height: 150px;
}
#contenu {/*définit la position, la police et la taille du texte de la page*/
position: relative;
z-index: 0;
padding-right: 20px;
padding-left: 20px;
text-align: justify;
font-family: arial, helvetica;
font-size: 0.8em;
margin-top: 38px;
margin-right: 61px;
/*border-top-width: 4px;
border-top-style: solid;
border-top-color: #e0f866;*/
}
#contenu img {/*définit les bordures et l'emplacement des images dans le contenu de la page*/
border-right-width: 2px;
border-bottom-width: 2px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #6d0210;
border-bottom-color: #6d0210;
float: left;
margin-right: 10px;
margin-top: 5px;
}
#contenu a {/*définit la couleur et la décoration des liens dans le contenu de la page*/
color: #000;
text-decoration: underline;
}
.rubrique {/*définit la taille, la police, la couleur et la bordure du titre "actualité"*/
font-size: 1.5em;
font-weight: bolder;
color:#6d0210;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #6d0210;
font-family: munier, arial, helvetica;
padding-top: 20px;
margin-bottom: 10px;
}
.rubrique2 {/*définit la taille, la police, la couleur et la bordure du titre "en bref"*/
font-size: 1.2em;
font-weight: bolder;
color:#6d0210;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #6d0210;
font-family: munier, arial, helvetica;
padding-top: 20px;
margin-bottom: 10px;
}
.rubrique3 {/*définit la taille, la police, la couleur et la bordure du titre "événements culturels*/
clear: both;
font-size: 1.2em;
font-weight: bolder;
color:#6d0210;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #6d0210;
font-family: munier, arial, helvetica;
padding-top: 20px;
margin-bottom: 10px;
}
.titres {/*définit l'épaisseur et le soulignement du titre dans l'actualité*/
font-weight: bold;
text-decoration: underline;
margin-bottom: 8px;
}
.bref1 {/*définit la position, la bordure et la marge de la première brève*/
float: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #6d0210;
width: 279px;
padding-right: 20px;
text-align: justify;
}
.bref2 {/*définit la position et la marge de la deuxième brève*/
float: right;
width: 279px;
padding-left: 20px;
text-align: justify;
}
.evenement {/*définit la position et la marge des deux premiers événements*/
float: left;
margin-right: 43px;
margin-top: 10px;
margin-left: -5px;
}
.evenement2 {/*définit la position et la marge du dernier événement*/
float: left;
margin-top: 10px;
margin-left: -5px;
}
/*---------------------------------------------------------------------------------------------------------------------------------------------
STYLES DANS "FOOTER"
---------------------------------------------------------------------------------------------------------------------------------------------*/
#footer {/*définit la position, le fond et la police du footer*/
clear: both;
background-image: url(images/fond_footer.png);
background-repeat: repeat-y;
color: #FFF;
text-align: center;
font-family: arial, helvetica;
letter-spacing: 0.07em;
font-size: 0.6em;
}
#footer a{/*définit la couleur et la décoration des liens dans le footer*/
color: #FFFFFF;
text-decoration: none;
margin:0px;
padding:0px;
}
/*---------------------------------------------------------------------------------------------------------------------------------------------
MENUS
---------------------------------------------------------------------------------------------------------------------------------------------*/
#menu1 {/*Définit les marges des menus*/
margin: 0px;
padding: 0px;
}
#nav {/*définit la taille, la position, les marges, la police des menus*/
height: 38px;
width: 645px;
padding: 0px;
float: left;
margin-top: 0px;
margin-right: 60px;
margin-bottom: 0px;
margin-left: 0px;
position: relative;
z-index: 999;
font-family: arial, Geneva, sans-serif;
letter-spacing: 0.08em;
font-size: 0.7em;
}
#nav a{/*définit la couleur et la décoration des liens dans les menus*/
color: #FFFFFF;
text-decoration: none;
margin:0px;
padding:0px;
}
#nav li {/*définit la position, la couleur, la bordure et les marges de la première liste des menus (5 items)*/
display: inline;
background-color: #c00117;
line-height: 35px;
height: 35px;
width: 124px;
margin-right: 5px;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #6d0210;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
text-align: center;
vertical-align: middle;
}
#nav li a {/*définit la visibilité des liens dans la première liste des menus*/
display: block;
}
#nav ul ul {/*définit l'invisibilité de la seconde liste des menus*/
display: none;
}
#nav li a:hover {/*définit les couleurs de fond, de police et de bordure lors du survol du lien dans la première liste des menus */
color: #5a6327;
background-color: #e0f866;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #5a6327;
}
#nav li:hover ul.niveau2 {/*définit la visibilité de la seconde liste des menus lorsque l'item de la première liste est survolé*/
display: block;
}
#nav li ul:hover {/*définit la position de la deuxième liste de menus*/
position: relative;
top: 3px;
}
#nav li li:hover ul.niveau3 {/*définit la visibilité et la position de la troisième liste des menus lorsque l'item de la deuxième liste est survolé*/
display: block;
position: relative;
left: 124px;
top: -38px;
}
#nav li li:hover ul.niveau3b {/*/*définit la visibilité et la position de la troisième liste des menus lorsque l'item de la deuxième liste du menu "ville touristique" est survolé*/
display: block;
position: relative;
left: -124px;
top: -38px;
}
#nav li li ul:hover {/*définit la position et la marge de la troisième liste des menus lorsque'elle est survolée*/
position: relative;
margin-top: 3px;
}
#nav #ouvert {/*définit la taille, la position et la couleur de fond, de la police et de la bordure d'un des 5 items (ex : découvrir) lorsque l'on est dans un de ses sujets (ex : météo) */
display: inline;
background-color: #e0f866;
line-height: 45px;
height: 45px;
width: 124px;
margin-right: 5px;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #5a6327;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
text-align: center;
vertical-align: middle;
color: #5a6327;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-bottom-style: none;
border-left-style: dotted;
position: relative;
bottom: 10px;
}
#nav #ouvert a {/*définit la couleur du lien d'un des 5 items (ex : découvrir) lorsque l'on est dans un de ses sujets (ex : météo)*/
color: #5a6327;
}
#nav #ouvert li a {/*définit la couleur des liens de la seconde liste des menus lorsque l'on est dans un des sujets (ex : météo) d'un item (ex : découvrir)*/
color: #FFFFFF;
}
#nav #ouvert li a:hover {/*définit la couleur des liens survolés de la seconde liste des menus lorsque l'on est dans un des sujets (ex : météo) d'un item (ex : découvrir)*/
color: #5a6327;
}Merci de votre aide.