Code body et balises compatibles sur tous les navigateurs ?

ag5669

Nouveau membre
1 Mars 2011
5
0
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
 
A

Anonyme

Invité
Il ne faut pas utiliser le positionnement absolu. Il y a un tutoriel express dans ma signature. ;)
 

ag5669

Nouveau membre
1 Mars 2011
5
0
J'ai effectivement refait tout le code sans absolu en me basant sur un tuto.
J'ai mis les différentes div css en float left et en utilisant margin pour le positionnement top.
Je vais le mettre ce soir en ligne en espérant que cela fonctionne.
Je ne vois rien dans votre signature pour le tutoriel, ou puis trouver ce tutoriel ?
Merci
 

ag5669

Nouveau membre
1 Mars 2011
5
0
Très intéressant ce tutoriel. Je me pose la question du positionnement des div dans le body. Vaut il mieux mettre margin-top: 100 px; ou bien top: 100px;. Car quand je mets l'un ou l'autre le résultat n'est pas le même quand je teste ma page dans le navigateur.

Code html :
<body>

<div id="header">
</div>
<body>

Code CSS :
#header {
width: 171px;
height: 60px;
margin-left: 800px;
margin-top: 100px; ou top:100px;
background-image: url(images/images/logo_laboratoire_belain.png);
}
 

ag5669

Nouveau membre
1 Mars 2011
5
0
Bonsoir,
J'ai essayé différentes formules qui toutes n'ont pas fonctionnées. J'ai donc installé une div site sous Body ainsi que dans le CSS (#site) qui englobe toutes les autres div avec pour chacune la position absolute.
Après plusieurs testes cela fonctionne sous FireFox, Safari et Internet Explorer, iPad et iPhone.
Merci à gloup gloup et bonne soirée