Conflit entre feuille de style et style du menu

Christogospa · Message par **Christogospa** » 13 juin 2006, 11:23

Bonjour,

je ne sais pas si je suis au bon endroit pour poser ma question (merci de m'orienter).

Quand j'affiche mon menu horizontal (réalisé avec Alsacreations), mon sous-menu ne se colore pas complètement au passage de la souris (il manque un petit bout à gauche en gris). Voyez par exemple dans le sous-menu de "nous connaître".

1/ Au départ de mon problème, je sais qu'il y a conflit entre le style de mon menu et la feuille de style générale, c'est pourquoi je modifie localement mon menu.
De plus, je voudrais bien que tout soit aligné sur 960 px et que ça ne déborde pas !

2/ Mais j'ai du mal parce que je ne maîtrise pas tout le code source. Par exemple, je ne sais pas ce qu'est moz-background-etc. et toutes les valeurs possibles (il n'y a qu'initial pour l'instant).

Je vous donne les données ... merci de m'aider ...

Bien cordialement,

Christophe

Code : Tout sélectionner

<head>
  <title>Accueil</title>
  <link rel="stylesheet"
 href="file:///C:/Documents%20and%20Settings/ChM/Mes%20documents/CREATION%20SITE%20des%20SARMENTS/stylegeneral.css"
 type="text/css" />
  <meta http-equiv="content-type"
 content="text/html; charset=ISO-8859-1" />
  <script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
  </script>
  <style type="text/css" media="screen">
#menu { z-index: 100;
left: 30px;
width: 100%;
position: absolute;
top: 140px;
display: block;
}
#menu dl { float: left;
width: 12em;
display: block;
}
#menu dt { border: 1px solid gray;
margin: 2px;
background: rgb(128, 128, 128) none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
font-weight: normal;
cursor: pointer;
color: rgb(255, 255, 0);
text-align: center;
display: block;
}
#menu dd { border: 1px solid gray;
margin-left: 0px;
display: block;
}
#menu li { margin: 0pt;
background: rgb(178, 178, 178) none repeat scroll center;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
list-style-type: none;
font-size: 13px;
text-align: center;
display: block;
}
#menu li a { border: 0px none ;
display: block;
color: rgb(255, 255, 0);
height: 100%;
text-decoration: none;
list-style-type: none;
margin-left: 0px;
}
#menu dt a { border: 0px none ;
display: block;
color: rgb(255, 255, 0);
height: 100%;
text-decoration: none;
margin-left: 0px;
}
#menu li a:hover { background: rgb(128, 128, 128) none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
display: block;
font-size: 13px;
}
#menu dt a:hover { background: rgb(128, 128, 128) none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
display: block;
}
#site { border: 1px solid gray;
padding: 5px;
z-index: 1;
left: 10px;
color: rgb(255, 255, 0);
position: absolute;
top: 70px;
background-color: rgb(221, 221, 221);
}
  </style>
  <meta content="MSHTML 6.00.2900.2873" name="GENERATOR" />
</head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(153, 153, 153);"
 alink="#000099" link="#000099" vlink="#990099">
<div style="text-align: left;"><span
 style="font-family: Book Antiqua;"><span
 style="color: rgb(255, 255, 0);"></span></span><a
 href="http://creatio2007.ifrance.com/"><big><big
 style="font-weight: bold;"><big><span
 style="font-family: Book Antiqua;"><span
 style="color: rgb(255, 255, 0);"><img
 style="border: 0px solid ; float: left; width: 231px; height: 96px;"
 alt="Retour &agrave; l'accueil" src="nosvaleurs2_fichiers/logo.gif" /></span></span></big></big></big></a><big><big
 style="font-weight: bold;"><big><span
 style="font-family: Book Antiqua;"><span
 style="color: rgb(255, 255, 0);"></span></span></big></big></big><big><big
 style="font-weight: bold;"><big><span
 style="font-family: Book Antiqua;"></span></big></big></big><big><big
 style="font-weight: bold;"><big><span
 style="font-family: Book Antiqua;"><span
 style="color: rgb(255, 255, 0);"></span></span></big></big></big><big><big
 style="font-weight: bold;"><big><span
 style="font-family: Book Antiqua;"><span
 style="color: rgb(255, 255, 0);"></span></span></big></big></big><big><big
 style="font-weight: bold;"><big><span
 style="font-family: Book Antiqua;"><span
 style="color: rgb(255, 255, 0);"></span></span></big></big></big><big><big
 style="font-weight: bold;"><big><span
 style="font-family: Book Antiqua;"><span
 style="color: rgb(255, 255, 0);"></span></span></big></big></big><big><big
 style="font-weight: bold;"><big><span
 style="font-family: Book Antiqua;"><span
 style="color: rgb(255, 255, 0);"></span></span></big></big></big><big><big
 style="font-weight: bold;"><big><span
 style="font-family: Book Antiqua;"></span></big></big></big><big><big
 style="font-weight: bold;"><big><span
 style="font-family: Book Antiqua;"><span
 style="color: rgb(255, 255, 0);"><big>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; Les Sarments<br />
</big></span></span></big></big></big></div>
<div style="text-align: center;">
<div style="text-align: left;"><span
 style="font-family: Book Antiqua;"></span><object
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="75"
 width="700"><param name="eanim"
 value="!e-anim:bandeau" /><param name="movie"
 value="bandeau.swf" /><param name="quality"
 value="high" />
<embed src="bandeau.swf" quality="high"
 pluginspage="http://www.macromedia.com/go/getflashplayer"
 type="application/x-shockwave-flash" height="75"
 width="700"> </object><br />
<big><big style="font-weight: bold;"><big><span
 style="font-family: Book Antiqua;"><br />
</span></big></big></big><br />
<br />
<br />
<p class="MsoNormal">Les cr&eacute;ateurs, porteurs de
projet et personnes morales qui
s&rsquo;adressent &agrave; l&rsquo;association
&laquo;&nbsp;Les Sarments&nbsp;&raquo; pour obtenir une
aide
financi&egrave;re au d&eacute;marrage de leur projet,</p>
<p class="MsoNormal">Tous les membres fondateurs, actifs,
sympathisants et
d&rsquo;honneur<o:p></o:p></p>
<p class="MsoNormal">s&rsquo;engagent &agrave;
respecter et &agrave; appliquer les 6
valeurs&nbsp;suivantes&nbsp;:<br />
<span style="font-size: 10pt;"><o:p></o:p></span></p>
<br />
</div>
</div>
<div id="menu">
<dl>
  <dt onmouseover="javascript:montre();"><a
 title="Retour &agrave; l'accueil"
 href="http://creatio2007.ifrance.com/">Accueil</a> </dt>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu1');">Nous
conna&icirc;tre </dt>
  <dd id="smenu1" onmouseover="javascript:montre('smenu1');"
 onmouseout="javascript:montre('');">
    <ul
 style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px;">
      <li><a
 href="http://creatio2007.ifrance.com/nosvaleurs.html">Nos
valeurs</a> </li>
      <li><a
 href="http://creatio2007.ifrance.com/nospriorites.html">Nos
priorit&eacute;s</a> </li>
      <li><a
 href="http://creatio2007.ifrance.com/membresduCA.html">Membres
du CA</a> </li>
      <li><a
 href="http://creatio2007.ifrance.com/t%E9moignages.html">T&eacute;moignages</a>
      </li>
      <li><a
 href="http://creatio2007.ifrance.com/ensavoirplus.html">En
savoir plus</a> </li>
    </ul>
  </dd>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu2');">Projets
soutenus </dt>
  <dd id="smenu2" onmouseover="javascript:montre('smenu2');"
 onmouseout="javascript:montre('');">
    <ul style="margin: 0px;">
      <li><a
 href="http://creatio2007.ifrance.com/1erprojet.html">1er
Projet</a> </li>
    </ul>
  </dd>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu3);"><a
 title="Comment faire ?"
 href="http://creatio2007.ifrance.com/noussoutenir.html">Nous
soutenir</a> </dt>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu4');">Nos
raisons d'agir </dt>
  <dd id="smenu4" onmouseover="javascript:montre('smenu4');"
 onmouseout="javascript:montre('');">
    <ul style="margin: 0px;">
      <li><a
 href="http://creatio2007.ifrance.com/constats.html">Constats</a>
      </li>
      <li><a
 href="http://creatio2007.ifrance.com/unecause.html">Une cause</a>
      </li>
      <li><a
 href="http://creatio2007.ifrance.com/uneperspective.html">Une
perspective</a> </li>
    </ul>
  </dd>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu5);"><a
 title="par e-mail, t&eacute;l&eacute;phone ou par courrier"
 href="http://creatio2007.ifrance.com/nouscontacter.html">Nous
contacter</a> </dt>
</dl>
<dl>
</dl>
<dl>
</dl>
</div>
</body>
</html>

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)

calimo · Message par **calimo** » 13 juin 2006, 21:02

Bon, déjà, toute page HTML doit commencer par un doctype. Par exemple :

Code : Tout sélectionner

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

Ensuite, tu peux faire valider ta page par le validateur HTML du W3C pour vérifier qu'il n'y a pas d'erreurs : http://validator.w3.org/

Ensuite tu pourra corriger les erreurs CSS grâce au validateur CSS : http://jigsaw.w3.org/css-validator/

Ah oui, tu as ce lien vers une feuille de style :
file:///C:/Documents%20and%20Settings/ChM/Mes%20documents/CREATION%20SITE%20des%20SARMENTS/stylegeneral.css
Sur ton disque dûr, c'est pas une bonne idée

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firedragon Firefox/1.5.0.4

epsy · Message par **epsy** » 13 juin 2006, 23:14

salut,

@Christogospa: stp entoure tes codes de

Code : Tout sélectionner

[code]
et de

[/code]
sur le forum sinon c'est un peu...enfin tu vois quoi...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Christogospa · Message par **Christogospa** » 14 juin 2006, 08:31

Bonjour,

Merci pour la réponse. Je veux bien passer par le validateur pour corriger (encore qu'il va falloir que je comprenne comment il fonctionne, mais bon c'est du temps gagné pour plus tard !) mais ne va-t-il pas simplement valider mon texte sans m'aider à corriger le fond du problème :
mon menu se trouve pris dans le style de la feuille générale, soit c'est lui qui fait la loi sur le style de toute la feuille si je lui applique une règle de style locale, soit c'est ma feuille quand j'ai enlevé la règle suivante du menu

Code : Tout sélectionner

 dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
} [code]
 :?  A ce moment précis toutes les puces de mon document disparaissent et la police change ... alors que ce style là c'est celui du seul menu !!!

Comment faire ?

Je rêve du moment où l'expression eureka prendra enfin tout son sens ... :) 

Christophe



[size=75]Message envoyé avec : [color=olive]Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)[/color][/size]

Geckozone

Conflit entre feuille de style et style du menu

Conflit entre feuille de style et style du menu

règle de style locale ou générale ?

Qui est en ligne ?