Version complète: sur le forum Webmaster Hub : Marge en haut avec Mozilla
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
Ombre
mardi 5 octobre 2004 à 13:02
Bonjour,

Comme vous pouvez le voir avec le code suivant :

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"lang="fr">
<head>
   <title>Essais de mise en page</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <style type="text/css">
   <!--
   body {
       margin: 0px;
       padding: 0px;
   }
   #topmenu {
       background-color: #000000;
       clear: right;
       height: 5em;
       width: 100%;
       left: 0px;
       top: 0em;
       margin: 0px;
       padding: 0px;
   }
   #topmenu ul{
       list-style-type: none;
   }
   #topmenu li{
       float: left;
       margin-right: 1em;
       color: #FFFFFF;
   }
   
   #menu {
       width: 10em;
       float: left;
       background-color: #FFFFCC;
   }
   #principal {
       float: left;
   }
   -->
   </style>
</head>
<body>
   <div id="topmenu">
       <ul>
         <li><a href="#menu">Menu</a></li>
         <li><a href="#principal">Contenu principal</a></li>
         <li><a href="mailto:bidon_AT_bidon.bid">E-mail</a></li>
       </ul>
   </div>
   <div id="menu">
       <h2>Menu</h2>
       <ul>
         <li><a href="#">menu1</a></li>
         <li><a href="#">menu2</a></li>
         <li><a href="#">menu3</a></li>
       </ul>
   </div>
   <div id="principal">
     <h1>Positionnement des divs</h1>
     <p>Héhéhé</p>
   </div>
</body>
</html>

J'ai essayé de créé un bandeau noir qui servirait de menu d'accessibilité de la page. Malheureusement, il ne "colle pas" au-dessus dans Firefox. A quoi est dû ce problème? Au XHTML? J'ai déjà fait une mise en page de ce genre sans problèmes mais en HTML... Y aurait-il une différence dans le positionnement des DIVs?
Ombre
mardi 5 octobre 2004 à 14:38
J'ai trouvé : il faut mettre le div #topmenu en float également.
Ceci dit, si quelqu'un avait une explication sur le pourquoi du comment ça serait sympa... blush.gif
Xavier
mardi 5 octobre 2004 à 14:48
Ça viens sans doutes d'une marge (ou d'un padding...) sur #topmenu ul qui n'est pas à 0.
En plus tu peux mettre <ul id="topmenu"> plutôt que l'entourer dans une div inutile wink.gif

Ce qui nous donne le code suivant :
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"lang="fr">
<head>
  <title>Essais de mise en page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
  <!--
  body,html {
      margin: 0px;
      padding: 0px;
  }
  #topmenu {
      background-color: #000000;
      clear: right;
      height: 5em;
      width: 100%;
      left: 0px;
      top: 0em;
      margin: 0px;
      padding: 0px;
  }
  #topmenu ul{
      list-style-type: none;
  }
  #topmenu li{
      float: left;
      margin-right: 1em;
      color: #FFFFFF;
  }
 
  #menu {
      width: 10em;
      float: left;
      background-color: #FFFFCC;
  }
  #principal {
      float: left;
  }
  -->
  </style>
</head>
<body>
  <ul id="topmenu">
     <li><a href="#menu">Menu</a></li>
     <li><a href="#principal">Contenu principal</a></li>
      <li><a href="mailto:bidon_AT_bidon.bid">E-mail</a></li>
  </ul>
  <div id="menu">
      <h2>Menu</h2>
      <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
      </ul>
  </div>
  <div id="principal">
    <h1>Positionnement des divs</h1>
    <p>Héhéhé</p>
  </div>
</body>
</html>
On dirait que c'est bon smile.gif
Ombre
mardi 5 octobre 2004 à 15:29
:up: Super! Merci Xavier! biggrin.gif
LaurentDenis
mardi 5 octobre 2004 à 16:37
Hum... Diverses propriétés sont inutiles.

Pour #topmenu:
- clear ne sert à rien puisque cet élément n'est précédé d'aucun flottant
- left et top sont inutiles, l'élément étant en flux et non pas positionné.
- le list-style-type peut être plus simplement appliqué directement aux <li>
Pour #principal:
- le float est inutile : cette div sera en flux faute de largeur spécifiée.

Ce qui donne plus simplement:

CODE
body,html {
     margin: 0;
     padding: 0;
}
#topmenu {
     background-color: #000000;
    height: 5em;
     width: 100%;
     margin: 0;
     padding: 0;
}
#topmenu li{
     float: left;
     margin-right: 1em;
     color: #FFFFFF;
     list-style-type: none;      
}
#menu {
     width: 10em;
     float: left;
     background-color: #FFFFCC;
}
#principal {

}
Denis
mardi 5 octobre 2004 à 16:57
Dans un tel cas, autant supprimer carrément le div id principal...
LaurentDenis
mardi 5 octobre 2004 à 17:04
J'imagine qu'il y aura d'autres choses à mettre dedans wink.gif
Denis
mardi 5 octobre 2004 à 17:31
Il y a TOUJOURS autre chose à mettre dans un <div> ! ^_^
Ombre
mardi 5 octobre 2004 à 23:26
Merci Denis et Laurent pour la partie optimisation... whistling.gif

P.S. : la page originale possède plus de contenu wink.gif Ceci n'était qu'une version simplifiée.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.