Aller au contenu

Marge en haut avec Mozilla

Ombre

Par Ombre
dans (X)HTML et CSS

 Partager

Sujets conseillés

Ombre

Ombre

Posté
Posté

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?

Lien vers le commentaire
Partager sur d’autres sites
Ombre

Ombre

Posté
  • Auteur
Posté

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:

Lien vers le commentaire
Partager sur d’autres sites
Xavier

Xavier

Posté
Posté

Ç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 :)

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté

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 {

}

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...