IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Code body et balises compatibles sur tous les navigateurs ?


Sujet :

CSS

  1. #1
    Nouveau Candidat au Club
    Inscrit en
    Mars 2011
    Messages
    1
    Détails du profil
    Informations forums :
    Inscription : Mars 2011
    Messages : 1
    Points : 1
    Points
    1
    Par défaut Code body et balises compatibles sur tous les navigateurs ?
    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 :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    <!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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    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

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 116
    Points
    44 116
    Par défaut
    Bonjour,
    - commences par mettre un DOCTYPE Strict, par exemple
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    - valides ta page en terme de XHTML, Markup Validation Service

    - revoies les commentaires conditionnels
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <!--[if IE]>
      <style type="text/css">
      </style>
    <![endif]-->
    et non
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <!--[if IE 8]-->
      <style type="text/CSS">
      </style>
    <!--[endif]-->

  3. #3
    Rédacteur

    Homme Profil pro
    Responsable de projet
    Inscrit en
    Mai 2009
    Messages
    634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de projet
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2009
    Messages : 634
    Points : 3 511
    Points
    3 511
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    - revoies les commentaires conditionnels
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <!--[if IE]>
      <style type="text/css">
      </style>
    <![endif]-->
    et non
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <!--[if IE 8]-->
      <style type="text/CSS">
      </style>
    <!--[endif]-->
    <!--[if IE 8]> existe si on veut appliquer une css uniquement pour IE8

    par contre la déclaration n'est pas correct (il y a des tirets en trop), voici ce qu'il faut mettre :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    <!--[if IE 8]>
      <style type="text/CSS">
          ...
      </style>
    <![endif]-->

  4. #4
    Membre émérite
    Avatar de polymorphisme
    Homme Profil pro
    Publishing
    Inscrit en
    Octobre 2009
    Messages
    1 460
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Publishing
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2009
    Messages : 1 460
    Points : 2 371
    Points
    2 371
    Par défaut
    Bonjour,

    il est clair que tu dois tout d'abord avec un code propre avant de

    rendre compatible mon code afin qu'il fonctionne sur les différents navigateurs
    Je ne connais pas de méthode toute faite, hormis l'expérience.
    S'il en existe une, alors je reste curieux de la connaitre.
    Article : Installation de Cocoon
    Je ne réponds pas aux MP à caractère technique.

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 116
    Points
    44 116
    Par défaut
    Citation Envoyé par ornitho13
    <!--[if IE 8]> existe si on veut appliquer une css uniquement pour IE8
    très juste, j'ai oublié de reporter le 8

Discussions similaires

  1. Code n'est pas fonctionnel sur tous les navigateurs
    Par fidbell84 dans le forum Mise en page CSS
    Réponses: 18
    Dernier message: 30/06/2015, 20h03
  2. Rendre son application compatible sur tous les Android
    Par Matf4ke dans le forum Android
    Réponses: 1
    Dernier message: 10/07/2012, 11h41
  3. optimiser code sql access par boucle sur tous les chkbox
    Par thiefer dans le forum Requêtes et SQL.
    Réponses: 8
    Dernier message: 25/09/2008, 21h46
  4. Mon site fonctionne sur tous les navigateurs sauf IE6 :-(
    Par acrylica dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 23/11/2007, 11h39
  5. Fonctionne sur tous les navigateurs sauf IE
    Par Elephantman dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 30/01/2007, 14h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo