Bonjour,
Je suis en train de créer un site en html et css mais lors des testes sur différents navigateurs la présentation n'est pas la même. les div sont décallées. Comment rendre compatible mon code afin qu'il fonctionne sur les différents navigateurs ?
Voici le code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link href="text.css" rel="stylesheet" type="text/css" />
<!--[if IE 8]-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--[endif]-->
</head>
<body onload="alterne();">
<div id="header">
</div>
<div id="site">
<div id="colgauche">
<div id="logo_lettre">
</div>
</div>
<div id="menu">
<ul>
<li><a href="">Accueil</a></li>
<li><a href="#">Technologies</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="prothese_implantaire.htm">Implantologie</a>
<ul>
<li><a href="prothese_implantaire.htm">Prothèse Implantaire</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#">Galerie Photos</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul></li>
<li><a href="">Esthétiques</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Partenaires</a></li>
</ul>
</div>
<div id="texte_index">
<div id="image">
<img src="laboratoire/image_laboratoire.png" width="150" height="122" >
</div>
<b class="Style1">Bienvenue sur le site du laboratoire Belain de prothèses dentaires
</b><br><br>
<b class="Style2">Avec 28 ans d'expérience, nous disposons d'une équipe de prothésistes dentaires spécialistes pour l'étude, la fabrication, la modification de prothèses dentaires. Véritable artisan, nous fabriquons, réparons ou modifions des prothèses dentaires dans notre laboratoire dentaire près de Paris à Vincennes. Afin de permettre à vos patients de retrouver la joie de sourire.</b><br><br>
<b class="Style2">C'est à partir des empreintes de la cavité buccale du patient, effectuées par le chirurgien-dentiste, que le prothésiste débute son travail. Il choisit le matériau qui s'avère le plus adapté : céramique, résine, métaux (or, platine, etc.), pâtes thermoplastiques, en tenant compte de la demande du patient (une prothèse en céramique est plus coûteuse qu'une prothèse métallique) et de l'emplacement de la prothèse dans la bouche. Puis il sculpte, moule ou modèle. Une fois la prothèse achevée et essayée sur le patient, il peut intervenir à nouveau, à la demande du praticien, pour d'éventuelles finitions et ajustements.</b><br>
<b class="Style2">Les prothésistes dentaires exercent souvent dans des laboratoires, des cabinets dentaires ou dans des centres de santé, des mutuelles et des hôpitaux. Quelques-uns exercent en libéral.</b><br><br>
<b class="Style2">Le travail du prothésiste exige évidemment une minutie et une habileté manuelle extrême. C'est un métier de très haute précision. Les prothèses, dont le coût peut être très élevé, doivent répondre à des impératifs fonctionnels, biologiques et esthétiques. Le prothésiste doit donc posséder une connaissance parfaite de la morphologie dentaire, un sens de l'harmonie et de l'esthétique faciale.</b><br>
</div>
</div>
</body>
</html>
Code CSS :
body {
margin: 0;
/*text-align: center;*/
padding:0;
margin:0;
width: 100%;
height: 100%;
background-image: url(images/images/body.jpg);
background-repeat: repeat-y;
}
#header {
position: absolute;
width: 171px;
height: 60px;
margin-left: 800px;
margin-top: 40px;
background-image: url(images/images/logo_laboratoire_belain.png);
}
#site {
position: absolute;
width: 1160px;
height: 800px;
margin-left: 0px;
margin-top: 140px;
background-image: url(images/images/site.jpg);
}
#colgauche {
position: absolute;
width: 181px;
height: 800px;
/*float: left;*/
background-image: url(images/images/body.jpg);
background-repeat: no-repeat;
}
#logo_lettre {
position: absolute;
width: 100px;
height: 64px;
margin-left: 40px;
margin-top: 570px;
background-image: url(images/images/logo.png);
}
#menu {
position: absolute;
margin-left: 181px;
width:990px;
height:28px;
z-index: 2;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
font-size: 14px;
}
#menu li {
float:left;
margin:auto;
padding:0px;
background-image: url(images/images/menu.jpg);
/*background-color:white;*/
}
#menu li a {
display:block;
width:130px;
color:black;
text-decoration:none;
padding:5px;
}
#menu ul li ul {
display:none;
}
#menu li ul {
position:absolute;
}
#menu li a:hover {
color:#9350ab;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#texte_index {
position: absolute;
width: 800px;
height: 400px;
margin-left: 181px;
margin-top: 60px;
padding-right: 5px;
padding-left: 5px;
z-index: 1;
border: 2px solid #443962;
}
#image {
float:left;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 8px;
margin-left: 0;
}
.Style1 {
font-size: 16px;
color: #9350ab;
}
.Style2 {
font-size: 13px;
color: #333;
}
.Style3 {
font-size: 14px;
color: #CCC;
text-decoration: none;
}
Merci par avance pour votre aide
Je suis en train de créer un site en html et css mais lors des testes sur différents navigateurs la présentation n'est pas la même. les div sont décallées. Comment rendre compatible mon code afin qu'il fonctionne sur les différents navigateurs ?
Voici le code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link href="text.css" rel="stylesheet" type="text/css" />
<!--[if IE 8]-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--[endif]-->
</head>
<body onload="alterne();">
<div id="header">
</div>
<div id="site">
<div id="colgauche">
<div id="logo_lettre">
</div>
</div>
<div id="menu">
<ul>
<li><a href="">Accueil</a></li>
<li><a href="#">Technologies</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="prothese_implantaire.htm">Implantologie</a>
<ul>
<li><a href="prothese_implantaire.htm">Prothèse Implantaire</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#">Galerie Photos</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul></li>
<li><a href="">Esthétiques</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Partenaires</a></li>
</ul>
</div>
<div id="texte_index">
<div id="image">
<img src="laboratoire/image_laboratoire.png" width="150" height="122" >
</div>
<b class="Style1">Bienvenue sur le site du laboratoire Belain de prothèses dentaires
</b><br><br>
<b class="Style2">Avec 28 ans d'expérience, nous disposons d'une équipe de prothésistes dentaires spécialistes pour l'étude, la fabrication, la modification de prothèses dentaires. Véritable artisan, nous fabriquons, réparons ou modifions des prothèses dentaires dans notre laboratoire dentaire près de Paris à Vincennes. Afin de permettre à vos patients de retrouver la joie de sourire.</b><br><br>
<b class="Style2">C'est à partir des empreintes de la cavité buccale du patient, effectuées par le chirurgien-dentiste, que le prothésiste débute son travail. Il choisit le matériau qui s'avère le plus adapté : céramique, résine, métaux (or, platine, etc.), pâtes thermoplastiques, en tenant compte de la demande du patient (une prothèse en céramique est plus coûteuse qu'une prothèse métallique) et de l'emplacement de la prothèse dans la bouche. Puis il sculpte, moule ou modèle. Une fois la prothèse achevée et essayée sur le patient, il peut intervenir à nouveau, à la demande du praticien, pour d'éventuelles finitions et ajustements.</b><br>
<b class="Style2">Les prothésistes dentaires exercent souvent dans des laboratoires, des cabinets dentaires ou dans des centres de santé, des mutuelles et des hôpitaux. Quelques-uns exercent en libéral.</b><br><br>
<b class="Style2">Le travail du prothésiste exige évidemment une minutie et une habileté manuelle extrême. C'est un métier de très haute précision. Les prothèses, dont le coût peut être très élevé, doivent répondre à des impératifs fonctionnels, biologiques et esthétiques. Le prothésiste doit donc posséder une connaissance parfaite de la morphologie dentaire, un sens de l'harmonie et de l'esthétique faciale.</b><br>
</div>
</div>
</body>
</html>
Code CSS :
body {
margin: 0;
/*text-align: center;*/
padding:0;
margin:0;
width: 100%;
height: 100%;
background-image: url(images/images/body.jpg);
background-repeat: repeat-y;
}
#header {
position: absolute;
width: 171px;
height: 60px;
margin-left: 800px;
margin-top: 40px;
background-image: url(images/images/logo_laboratoire_belain.png);
}
#site {
position: absolute;
width: 1160px;
height: 800px;
margin-left: 0px;
margin-top: 140px;
background-image: url(images/images/site.jpg);
}
#colgauche {
position: absolute;
width: 181px;
height: 800px;
/*float: left;*/
background-image: url(images/images/body.jpg);
background-repeat: no-repeat;
}
#logo_lettre {
position: absolute;
width: 100px;
height: 64px;
margin-left: 40px;
margin-top: 570px;
background-image: url(images/images/logo.png);
}
#menu {
position: absolute;
margin-left: 181px;
width:990px;
height:28px;
z-index: 2;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
font-size: 14px;
}
#menu li {
float:left;
margin:auto;
padding:0px;
background-image: url(images/images/menu.jpg);
/*background-color:white;*/
}
#menu li a {
display:block;
width:130px;
color:black;
text-decoration:none;
padding:5px;
}
#menu ul li ul {
display:none;
}
#menu li ul {
position:absolute;
}
#menu li a:hover {
color:#9350ab;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#texte_index {
position: absolute;
width: 800px;
height: 400px;
margin-left: 181px;
margin-top: 60px;
padding-right: 5px;
padding-left: 5px;
z-index: 1;
border: 2px solid #443962;
}
#image {
float:left;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 8px;
margin-left: 0;
}
.Style1 {
font-size: 16px;
color: #9350ab;
}
.Style2 {
font-size: 13px;
color: #333;
}
.Style3 {
font-size: 14px;
color: #CCC;
text-decoration: none;
}
Merci par avance pour votre aide
