28221 sujets

CSS et mise en forme, CSS3

[Résolu] Pb affichage IE et FireFox

Bonjour,

j'ai une page avec trois blocs: Conteneur, contenu et alea.
Le premier englobe les deux autres.
Je voudrais positionner contenu a droite et alea à gauche (2 blocs de texte).

voici mon code:


/* ----------- CONTENEUR ----------- */


div#conteneur
{
  width: 700px ;
  margin: 0 auto ;
  text-align: left ;
  border: 1px solid #8F2C26 ;
  background: #000 ;
  color: #FFF;
}

/* ------------ CONTENU (a gauche dans conteneur) ----------- */


div#contenu
{
  float: left ;
  width: 400 px ;
  background: url(image_marge_gauche.gif) no-repeat 15px 15px #000;
}

div#contenu h2
{
  line-height: 25px ;
  font-size: 1.0em ;
  /*background: url(Design/NR/puce01.gif) no-repeat left bottom ; */
  color: #8F2C26 ;
  border-bottom: 1px solid #8F2C26 ;
}

/* ----------- ALEA (a droite dans conteneur) ----------- */

div#alea
{
  float: left ;
  margin-left: 10px;
  width: 180px ;

}

div#alea h2
{
    color: #8F2C26 ;
    line-height: 25px ;
    font-size: 1.0em ;
    border-bottom: 1px solid #8F2C26 ;
 }


l'affichage est ok dans IE (contenu a gauche de alea)
mais pas dans Firefox (contenu au dessus de alea)

Mon code HTML:

<div id="conteneur">    
    <h1 id="header"><a href="index.php" title="Revive - Paris Hardcore - since 2000l"><span></span></a></h1>

    <ul id="menu">
      <li><a href="#">News</a></li>
      <li><a href="#">Bio</a></li>
      <li><a href="#">Shows</a></li>
      <li><a href="#">Media</a></li>
      <li><a href="#">Links</a></li>
      <li><a href="#">Guestbook</a></li>
    </ul>

    <div id="contenu">
      <h2>\\ Site en construction.</h2>
      <p>Comme vous pouvez le constater, le site est actuellement en chantier.
         Il s'agit non seulement de changer de Design mais aussi de permettre
         à tous les navigateurs d'afficher le site correctement en enployant
         un peu de xhtml au passage avec un louche de css bien structuré.
         </p>
         <p>Pour donner votre avis ou tous simplement nous contacter c'est
         <a href="mailto:infos@revivehxc.com">ici</a> qu'il faut cliquer. A bientôt.<br>Greg.
         </p>
    </div>
     <div id="alea">
          <h2>\\ Random texte.</h2>
          <p>A cet endroit il y aura un texte aléatoire.</p>
        </div>
    <p id="footer">by Greg. w3c xhtml <img src="Design/Firefox.png" align="middle" /></p>
  </div>


Avez vous une idée?
Merci
Modifié le 26 Jan 2005 - 11:41
Je sais pas si c'est du entièrement à ça mais déjà t'as une erreur de code

div#contenu

{

float: left ;

width: 400 px ; <<< pas d'espace entre les 400 et le px il me semble
Un petit détour par Le service de validation CSS du W3C t'aurait sans doute renseigné sur la nature du problème. C'est important de valider son travail régulièrement pour éviter ce genre d'erreur. Smiley cligne On peut valider un fichier local par téléchargement du fichier vers le serveur.
Modifié le 26 Jan 2005 - 20:22
Sujet clos
Aller à