Marge en haut avec Mozilla

Ombre · 5 Octobre 2004

Bonjour,

Comme vous pouvez le voir avec le code suivant :

<!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 · 5 Octobre 2004

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:

Xavier · 5 Octobre 2004

Ç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

Ce qui nous donne le code suivant :

<!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

Ombre · 5 Octobre 2004

Super! Merci Xavier!

LaurentDenis · 5 Octobre 2004

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:

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 · 5 Octobre 2004

Dans un tel cas, autant supprimer carrément le div id principal...

LaurentDenis · 5 Octobre 2004

J'imagine qu'il y aura d'autres choses à mettre dedans

Denis · 5 Octobre 2004

Il y a TOUJOURS autre chose à mettre dans un <div> !

Ombre · 5 Octobre 2004

Merci Denis et Laurent pour la partie optimisation... :whistling:

P.S. : la page originale possède plus de contenu Ceci n'était qu'une version simplifiée.

Connexion

Marge en haut avec Mozilla

Sujets conseillés

Ombre

Ombre

Xavier

Ombre

LaurentDenis

Denis

LaurentDenis

Denis

Ombre

Veuillez vous connecter pour commenter

Parcourir

Activité