28220 sujets

CSS et mise en forme, CSS3

Position du menu sous Firefox

Bonjour à tous,

Cela fait un moment que je cherche pour trouver a solution à ce problème :

Voici l'adresse du site : http://www.viard-ma.fr

On ne voit pas le menu sous Firefox, et sous IE on le voit

Voici l'html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet"media="screen"type="text/css"title="CSS Viard.fr"href="style.css"/>
<title>Bienvenue sur Viard-ma.fr</title>


</head>
<body>
<div id="global">
<div id="haut1">

</div>
<div id="haut2">
</div>

<div id="cont_menu">
<p align="left">*  <a href="index.php">Accueil</a><br />
                *  <a href="index.php?p=historique">Historique</a><br />
                *  <a href="index.php?p=services">Les services</a><br />
                *  <a href="index.php?p=magasin">Le Magasin</a><br />
                *  <a href="index.php?p=atelier">L'Atelier</a><br />

				*  <a href="index.php?p=produits">Produits</a><br />
				*  <a href="index.php?p=promotions">Promotions</a><br />
				*  <a href="index.php?p=occasions">Occasions</a><br />
				*  <a href="index.php?p=contact">Contact</a></p>
</div>

<div id="milieu">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
</head>

<body>
<p>Bienvenue sur <strong>Viard-ma.fr</strong> ( <img src="logos/viard.gif"> Matériel Agricole )</p>

<p>Concessionnaire <img src="logos/case-petit.jpg" border="0"> : tracteurs, matériels de récoltes, travail du sol</p>
<p>Vous pouvez ainsi <strong>naviguer </strong>sur ce site pour decouvrir l'<a href="index.php?p=historique">historique de la socièté</a>, ses <a href="index.php?p=services">services</a>, ses <strong><a href="index.php?p=produits">produits commercialisés</a></strong>, ses stocks en pièces de rechange et équipements.</p>
<p>Pour un<strong> plus petit budget</strong>, allez voir la rubrique <strong><a href="index.php?p=occasions">occasions</a></strong>.</p>

<p>A Bientot sur <strong>Viard-ma.fr</strong><br />
</body>
</html>
</div>
<div id="bas">
  </div>
</div>

</body>
</html>


Et la CSS :
body {
width: 889px;
font-family: Geneva, Arial, Helvetica, sans-serif;
margin: 0; /* pour éviter les marges */
text-align: center; /* pour corriger le bug de centrage IE */
font-size: 12px;
}

.Style1 {color: #CCCCCC}
.Style2 {color: #80DBDA}
.Style3 {font-size: 12px; color: #000000}
.Style4 {color: #941A1A; font-size: 12px}
.Style5 {font-size: 18px; color: #FF0000}
.Style6 {font-size: 12px;}
.Style7 {font-size: 18px;}


#haut1 {
  width: 889px;
  height: 46px;
  background-image: url("images/header12.gif");
  }
#haut2 {
  width: 889px;
  height: 205px;
  color: #FFFFFF;
  background-image: url("images/header2.jpg");
  }
#gauche {
  position: absolute;
  top: 239px;
  left: 43px;
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  text-align: left; /* on rétablit l'alignement normal du texte */
  width: 130px;
  }
#milieu {
  width: 666px;
  margin-left: 210px;
  padding: 2px;
  padding-right: 6px;
  }
#droit {
  position: absolute;
  top: 97px;
  right: 0px;
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 90px;
  }
#bas {
  width: 889px;
  height: 53px;
  background-image: url("images/footer.jpg");
  } 
#global {
  width: 889px;
  margin-left: auto;
  margin-right: auto;
  background-image: url("images/bg.jpg");
  text-align: left; /* on rétablit l'alignement normal du texte */
  }
#cont_menu {
  width: 143px;
  margin-left: -164px;
  margin-top: -6px;
  text-align: left; /* on rétablit l'alignement normal du texte */
  padding-top: 5px;
  position: absolute;
  padding-bottom: 5px;
  background-image: url("images/fondmenu.jpg");
  margin-right: 2px;
  border:1px solid #535353;
  color: #2F2D2D;
  padding-left: 5px;
  }
 #produits { 
  height: 65px;
  border:1px solid #000000;
  padding-left: 3px;
  background-image: url("images/prod2.gif");
  }
#occasions { 
  border:1px solid #000000;
  }
#occasions2 { 
  border:1px solid #000000;
  background-color: #CF000D; 
  color: #FFFFFF;
  }
#occasions_texte { 
  background-color: #E9E9E9; 
  padding-left: 4px;
  color: #941A1A; 
  font-size: 12px
  }
#occasions_texte2 { 
  background-color: #FFFFFF; 
  padding-left: 4px;
  color: #941A1A; 
  font-size: 12px
  }
#produits_titre {
  height: 20px;
  color: #FFFFFF;
  padding-left: 5px;
  padding-top: 3px;
  background-image: url("images/titre-produits.gif");
  }
#barre-page {
  height: 23px;
  border:1px solid #000000;
  }
  
#cadre {
  background-color: #EDEDED;
  border:1px solid #000000;
  padding-left: 5px;
  }
#lien_produits {
  width: 124x;
  height: 23px;
  margin-left: 478px;
  margin-top: 10px;
  }
#magasin_texte {
  padding-left: 5px;
  padding-top: 3px;
  }
 #magasin { 
  padding-left: 3px;
  }


Merci d'avance
Cordialement
@+
Salut !

Juste une question concernant ton code html : pourquoi y a-t-il deux fois les balises <html><body> mais une seule fois les balises de fin ?

Je ne savais pas qu'on pouvait les mettre deux fois dans une seule page.
Bonjour,

Corriger l'invalidité du code ci-dessus (double doctype, double head, etc.) serait en effet une bonne idée, bien qu'elle n'ait pas d'influence sur le problème de rendu.

Sinon, ton menu se positionnera normalement sans cette marge gauche négative qui le rejette en dehors de la zone visible dans le navigateur. Il faut redévelopper la CSS pour les navigateurs conformes (Firefox, Opera, Safari, Konqueror) et l'adapter ensuite à IE Windows, au lieu de faire l'inverse.
Ah désolé il y a 2 fois <html><body>

Parce que j'ai pris le code source de viard-ma.fr alors que c'est un include sécurisé en PHP,

j'ai pas de soluce pour la menu :s
Sujet clos
Aller à