28219 sujets

CSS et mise en forme, CSS3

[RESOLU] Menu flottant récalcitrant

Bonjour,

J'ai un menu flottant (à priori très simple) qui me pose un souci sous IE (bien sûr), mais aussi sous FF. En fait, il n'y a que sous Opéra qu'il marche comme je le veux.

Voici la structure générale de la page:

<body>
   <div id="container">
      <ul id="menu1">
        <li id="current"><a href="#">Association</a></li>
        <li><a href="#">Trajets</a></li>
        <li><a href="./phpBB2/index.php">Forum</a></li>
      </ul>
      <div id="content">
        <ul id="menu2">
          <li id="current"><a href="#">Actualités</a></li>
          <li><a href="#">Présentation</a></li>
          <li><a href="#">Contacts</a></li>
        </ul>
        blablabla contenu de la page blablabla...
        blablabla contenu de la page blablabla...
        blablabla contenu de la page blablabla...
        <div id="pied">blabla pied de la page blabla</div>
      </div>
   </div>
</body>


Voici les définitions correspondant à chaque bloc:

#container {
 position: relative;
 width: 750px;
 margin-top: 3px;
 margin-left: auto;
 margin-right: auto;
}

#content {
 position: relative;
 border: 2px solid #FF4F01;
 margin-left: auto;
 margin-right: auto;
 background: #F6F9FF; 
}

#menu1 {
  margin: 10px 0 0 0; 
  padding: 0; 
  }

#menu1 li {
  display: block; 
  float: left; 
  list-style: none;
  padding: 5px 5px 5px 5px;
  white-space: nowrap; 
  background: #BACEFF;
  }

#menu1 a {
  text-decoration: none; 
  font-weight: bold; 
  color: #FF4F01; 
  }

#menu2 {
  display: block;
  float: right;
  margin: 0; 
  padding: 0;
  white-space: nowrap; 
  background: #BACEFF; 
  }

#menu2 li {
  padding: 5px 5px 5px 5px;
  text-align: center; 	
  list-style: none; 
  }

#menu2 a {
  text-decoration: none; 
  font-weight: bold; 
  color: #FF4F01; 
  }


Ca me donne:
- un menu flottant en haut à droite sous Opéra (impec')
- un menu flottant en faut à droite sous FF mais dont je ne peux pas cliquer tous les liens (suivant les écrans)
- un menu invisible (!) sous IE (je peux cliquer les liens)

Merci pour vos éclaircissements!

... et Joyeux Noël! Smiley biggrin
Modifié par Flashball (08 Jan 2007 - 18:43)
Bonjour,

Je ne suis pas arrivé à voir ce que tu voulais obtenir ... Mais bon, juste pour une idée

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
#container {

 position: relative;
 width: 750px;
 margin-top: 3px;
 margin-left: auto;
 border: 2px solid black;
 margin-right: auto;
 overflow: hidden;
}

#content {
 position: relative;
 border: 2px solid #FF4F01;
 margin-left: auto;
 margin-right: auto;
 background: #F6F9FF; 
 overflow: hidden;
}

#menu1 {
  margin: 10px 0 0 0; 
  padding: 0; 
  overflow:hidden;
  }

#menu1 ul {
  list-style: none;
  }

#menu1 li {
  float: left; 
  }

#menu1 a {
  display: block; 
  text-decoration: none; 
  font-weight: bold; 
  color: #FF4F01; 
  white-space: nowrap; 
  background: #BACEFF; 
  margin-left: 5px;
  padding: 0 5px 0 5px;  
  }

#menu2 {
  width: 150px;
  float: right;
  margin: 0; 
  padding: 0;
  }

#menu2 ul {	
  list-style: none; 
  }

#menu2 li {
  padding: 5px 5px 5px 5px;
  }

#menu2 a {
  display: block;
  text-decoration: none; 
  white-space: nowrap; 
  font-weight: bold; 
  text-align: center; 
  color: #FF4F01; 
  background: #BACEFF; 
  }

#pied {
  clear: both;
  width: 100%;
  hieght: 30px; 
  background: #BACEFF; 
  }  

</style>
</head>

<body>
   <div id="container">

      <div id="menu1">
	  	<ul>

        <li id="current"><a href="#">Association</a></li>

        <li><a href="#">Trajets</a></li>

        <li><a href="./phpBB2/index.php">Forum</a></li>

      </ul>
	  </div>

    <div id="content">
		
        <div id="menu2">
			<ul>

          <li id="current"><a href="#">Actualités</a></li>

          <li><a href="#">Présentation</a></li>

          <li><a href="#">Contacts</a></li>

        </ul> 
		</div>

        blablabla contenu de la page blablabla...

        blablabla contenu de la page blablabla...

        blablabla contenu de la page blablabla...
      </div>

        <div id="pied">blabla pied de la page blabla</div>


   </div>
</body>
</html>


Joyeux Noël
J'ai aussi un menu invisible sous IE (v6) avec ton code!

Bon je verrai çà la semaine prochaine...

Merci,

Flashball
Bonjour,

Autant pour moi ... Pour ie6 il convient de rajouter aux blocs #content et #menu1 un width:100%;
Modifié par ghost (26 Dec 2006 - 01:15)
Sujet clos
Aller à