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

HTML Discussion :

[XHTML/HTML] Problème html xhtml : positionnement d'un div


Sujet :

HTML

  1. #1
    Membre expérimenté
    Homme Profil pro
    Programmeur Delphi
    Inscrit en
    Octobre 2006
    Messages
    183
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : Belgique

    Informations professionnelles :
    Activité : Programmeur Delphi
    Secteur : Finance

    Informations forums :
    Inscription : Octobre 2006
    Messages : 183
    Par défaut [XHTML/HTML] Problème html xhtml : positionnement d'un div
    Slt à toutes et tous,

    je rencontre actuellement un problème pour positionner un menu, à l'aide de la basile <div>

    code html
    Code : 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
     
    <?xml version="1.0" encoding="windows-1252"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title>Contact</title>
      <link rel="stylesheet" type="text/css" href="css/data.css">
    </head>
    <body>
      <!-- design site web <start> -->
      <div id="bandeau">
        <!-- menu <start> -->
        <div class="positionMenu">
          <ul id="tabnav">
            <li><a href="index.html">Accueil</a></li>
            <li class="active"><a href="contact.html">Contact</a></li>
          </ul>
        </div>
        <!-- menu <end> -->
      </div>
      <div id="central">
        <div id="cotegauche"></div>
        <div id="body">
          <form name="fContact" method="post" action="sendEmail.php">
            <fieldset>
              <legend>Fiche signalétique</legend>
              <p>
                <label for="1">Nom :&nbsp;</label>
                <input type="text" id="1" name="zeNom" maxlength="100" size="50">
              </p>
              <p>
                <label for="2">Prénom :&nbsp;</label>
                <input type="text" id="2" name="zePrenom" maxlength="100" size="50">
              </p>
            </fieldset>
          </form>
        </div>
        <div id="cotedroit"></div>
      </div>
      <div id="piedpage"></div>
      <!-- design site web <end> -->
    </body>
    </html>
    voici le code css
    Code : 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
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
     
    /* CSS CS Soft */
     
    /* design site web <start> */
    div {
    }
     
    div#bandeau {
    width: 1000px;
    height: 254px;
    background-color: black;
    }
     
    div#body {
    float: left;
    width: 693px;
    height: 546px;
    background-color: white;
    }
     
    div#piedpage {
    width: 1000px;
    height: 100px;
    background-color: blue;
    clear: both;
    }
     
    div#central {
    width: 1000px;
    height: 546px;
    }
     
    div#cotegauche {
    float: left;
    width: 152px;
    height: 546px;
    background-color: red;
    }
     
    div#cotedroit {
    float: left;
    width: 155px;
    height: 546px;
    background-color: red;
    }
    /* design site web <end> */
     
    /* menu <start> */
    ul {
    font: 100% verdana, arial, sans-serif;
    font-size: 25px;
    margin: 50px;
    }
     
    #tabnav {
    margin: 0;
    padding: 0 0 20px 10px;
    }
     
    #tabnav li {
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
    }
     
    #tabnav a:link, #tabnav a:visited {
    float: left;
    font-size: 12px;
    line-height: 14px;
    font-weight: bold;
    margin: 0 10px 4px 10px;
    text-decoration: none;
    color: #9699EC;
    }
     
    #tabnav li.active a:link, #tabnav li.active a:visited, #tabnav li a:hover {
    border-bottom: 4px solid #6468E9;
    padding-bottom: 2px;
    background: #313131;
    color: #6468E9;
    }
     
    #tabnav a:hover
    {
    background: #6468E9;
    }
     
    .positionMenu {
    margin-top: 13;
    padding-left: 325;
    }
    /* menu <end> */
     
    /* formulaire de contact <start> */
    p
    {
    margin: 2px 0;
    }
    /* fieldset , legend */
    fieldset
    {
    margin-bottom: 10px;
    border: #CCC 1px solid;
    }
    fieldset legend
    {
    padding: 0 10px;
    border-left: #CCC 1px solid;
    border-right: #CCC 1px solid;
    font-size: 1.2em;
    color: #c5b4c8;
    }
    /* Label */
    label
    {
    background-color: #c5b4c8;
    display: block;
    width: 20%;
    float: left;
    padding-right: 1%;
    text-align: right;
    letter-spacing: 1px;
    }
    label:hover
    {
    font-weight: bold;
    }
     
    /* Input */
    input
    {
    margin-left: 1%;
    width: 58%;
    border: #CCC 1px solid;
    background-color: #e6e3e6;
    }
    input:hover, input:focus
    {
    border: #999 1px solid;
    background-color: #c5b4c8;
    }
    /* formulaire de contact <end> */
    par contre si ds le fichier html, je supprime les 3 premières lignes, le menu s'affiche à la bonne position (margin-top: 13; padding-left: 325
    mais le formulaire ne réagit plus correctement, par lors du survol sur les labels ou lors du survol sur les inputs... que faire???

    Code : 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
     
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title>Contact</title>
      <link rel="stylesheet" type="text/css" href="css/data.css">
    </head>
    <body>
      <!-- design site web <start> -->
      <div id="bandeau">
        <!-- menu <start> -->
        <div class="positionMenu">
          <ul id="tabnav">
            <li><a href="index.html">Accueil</a></li>
            <li class="active"><a href="contact.html">Contact</a></li>
          </ul>
        </div>
        <!-- menu <end> -->
      </div>
      <div id="central">
        <div id="cotegauche"></div>
        <div id="body">
          <form name="fContact" method="post" action="sendEmail.php">
            <fieldset>
              <legend>Fiche signalétique</legend>
              <p>
                <label for="1">Nom :&nbsp;</label>
                <input type="text" id="1" name="zeNom" maxlength="100" size="50">
              </p>
              <p>
                <label for="2">Prénom :&nbsp;</label>
                <input type="text" id="2" name="zePrenom" maxlength="100" size="50">
              </p>
            </fieldset>
          </form>
        </div>
        <div id="cotedroit"></div>
      </div>
      <div id="piedpage"></div>
      <!-- design site web <end> -->
    </body>
    </html>
    si qqun a une idée, elle serait le bienvenue

    Merci d'avance

    je teste mon code html + css sous internet explorer 7

    est-ce que le standard permet actuellement cette manipulation???

  2. #2
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Bonjour,

    Citation Envoyé par jaduta Voir le message
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    .positionMenu {
    margin-top: 13;
    padding-left: 325;
    }
    Tu as oublié de spécifier l'unité pour tes valeurs de margin-top et padding-left.

    D'autre part pour quelle raison as-tu opté pour du xhtml 1.1? Selon les recommandations w3c, le xhtml 1.1 devrait être servi comme application/xhtml+xml et non text/html, ce qui pose problème à IE.
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  3. #3
    Membre expérimenté
    Homme Profil pro
    Programmeur Delphi
    Inscrit en
    Octobre 2006
    Messages
    183
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : Belgique

    Informations professionnelles :
    Activité : Programmeur Delphi
    Secteur : Finance

    Informations forums :
    Inscription : Octobre 2006
    Messages : 183
    Par défaut
    Merci,
    il me manquait bien les unités de mesure

    il faut que j'arrête absolument les boissons non-alcoolisée

    D'autre part pour quelle raison as-tu opté pour du xhtml 1.1?
    j'utilise webmaster6 et lorsque je créée un document xhtml
    il met par défaut toutes valeurs...

  4. #4
    Membre expérimenté
    Homme Profil pro
    Programmeur Delphi
    Inscrit en
    Octobre 2006
    Messages
    183
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : Belgique

    Informations professionnelles :
    Activité : Programmeur Delphi
    Secteur : Finance

    Informations forums :
    Inscription : Octobre 2006
    Messages : 183
    Par défaut
    houps pardon j'utilise webexpert6...

    il est grand temps que je prenne des vacances

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 0
    Dernier message: 21/10/2010, 11h03
  2. [HTML] Problème HTML footer
    Par Gantilool dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 30/03/2008, 20h23
  3. [XHTML/HTML] Differences entre XHTML & HTML
    Par nomane64 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 19/11/2007, 07h51
  4. [HTML] Tableau HTML problème
    Par minie dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 13/04/2007, 11h53
  5. [XHTML] SVG dans HTML
    Par soli.f dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 21/03/2007, 10h36

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