28220 sujets

CSS et mise en forme, CSS3

BOnjour .. je me suis inspirer du gabarie dans la section css

Voici le probleme: Tout est "OKAY" dans firefox, explorer mais dans netscape 6 il je ne suis pas capable de coller la liste a l'image du haut dans la section de gauche... je ne sais si j'ai utiliser la bonne méthode

1. J 'ai mis dans colone de #gauche en "float:left" (le menu )
2. J'ai mis une images dans cette colone et j'ai mis "display: block" pour quelle s'affiche une par dessus l'autre.

?? Faut-il indiquer la l'argeur de chaque élément du coté gauche !? ou juste l'indiquer un max-width: 132px; suffit au #gauche

Mais en netscape la liste #osl-menu ne veux pas se coller avec l'image..

Merci d'y jetter un coup d'oeil


voici le 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>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <title>osl</title>
    <style type="text/css">
/*<![CDATA[*/
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
p {
margin: 0 0 10px 0;
}
#header {

background-color: #99CCCC;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
#conteneur {
   width:632px;
   position: absolute;
   left: 0px;
   top: 0px;
   background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
width: 450px;
float: left;
}
#gauche {
float:left;

}
#pied {
clear:both;
height: 30px;
background-color: #99CC99;
}

.vague_menu{
   display: block;
}
#osl-menu{
   background: yellow;
   margin: 0;
   padding: 0;
   display: block;
   float: left;
   width: 130px;
}

/*]]>*/
</style>
</head>
<body>
   <div id="conteneur">

      <div id="header">
         Header (modèle utilisant les positionnement flottants)<a
         href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">
         (voir tous les mod&egrave;les)</a>
      </div>
     
      <div id="gauche">
         <img class="vague_menu" src="images/vague-menu.gif" alt="Vague" title="Vague" />
		
		 <div id="osl-menu"> 
            <ul>
               <li><a href="#">L'OSL...</a></li>
               <li><a href="#">À signaler</a></li>
               <li><a href="#">Plus d'info</a></li>
               <li><a href="#">Ressources</a></li>
               <li><a href="#">Publications</a></li>
               <li><a href="#">Questions</a></li>
            </ul>
         </div>

      </div>

      <div id="centre">
         <p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
         <p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
	  </div>

      <div id="pied">
        pied de page (se place en dessous des éléments flottants grâce à <code>clear:both;</code>)
      </div>
	  
   </div>
</body>
</html>