Bonjour,
J'essaye de créer un site web. J'ai découvert le CSS grâce à ce forum. J'ai utilisé un des menus verticals déroulant. Mais je rencontre un problème sous IE alors que sous firefox tout va bien.

Voila le code html problèmatique:

   <div id="conteneur_menu-texte">
       
         <dl id="menu">

           <img class="menu_image" alt="Sports collectifd" src="Site_menu1.gif" />

	        <dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><a href="#">Football</a></dt>
			<dd style="display: block;" id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
				<ul>
                                        <li><a href="#">Actu</a></li>
					<li><a href="#">France</a></li>
					<li><a href="#">Etranger</a></li>
					<li><a href="#">Ligue des champions</a></li>
				        <li><a href="#">Coupe de l'UEFA</a></li>
                                        <li><a href="#">Equipe nationale</a></li>
                                </ul>
			</dd>		
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="#">Rugby</a></dt>
			<dd style="display: none;" id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Actu</a></li>
					<li><a href="#">France</a></li>
					<li><a href="#">Etranger</a></li>
					<li><a href="#">H Cup</a></li>
				        <li><a href="#">Grand chelem</a></li>
                                        <li><a href="#">Tri-nation</a></li>
				</ul>
			</dd>
	
            <img class="menu_image" alt="Sport individuel" src="Site_menu4.gif" />
		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"><a href="#">Tennis</a></dt>
			<dd style="display: block;" id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
				<ul>
                                        <li><a href="#">Actu</a></li>
					<li><a href="#">Hommes</a></li>
					<li><a href="#">Femmes</a></li>
                                </ul>
			</dd>

            <img class="menu_image" alt="Sports sur roues" src="Site_menu6.gif" />

		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"><a href="#">Cyclisme</a></dt>
			<dd style="display: block;" id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
                                        <li><a href="#">Actu</a></li>
					<li><a href="#">UCI Protour</a></li>
					<li><a href="#">Grands Tours</a></li>
                                </ul>
			</dd>
		<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();"><a href="#">Automobile</a></dt>
			<dd style="display: block;" id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
				<ul>
                                        <li><a href="#">Actu</a></li>
					<li><a href="#">Formule 1</a></li>
					<li><a href="#">Rally</a></li>
                                </ul>
			</dd>
		<dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();"><a href="#">Moto</a></dt>
			<dd style="display: block;" id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">
				<ul>
                                        <li><a href="#">Actu</a></li>
					<li><a href="#">125cc</a></li>
					<li><a href="#">250cc</a></li>
					<li><a href="#">Moto GP</a></li>
                                </ul>
			</dd>
        
            <img class="menu_image" alt="Sport virtuel" src="Site_menu10.gif" />

		<dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();"><a href="#">Jeux video</a></dt>
			<dd style="display: block;" id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">
				<ul>
                                        <li><a href="#">Actu</a></li>
					<li><a href="#">Tests</a></li>
					<li><a href="#">Astuces</a></li>
					<li><a href="#">Download</a></li>
                                </ul>
			</dd>	
          </dl>

         <div id="texte">
<br /><br /><br />Voici<br />l'espace<br />pour<br />le<br />texte<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
         </div>

    </div>


Et ma feuille CSS:

<STYLE TYPE="text/css">
<!--
A:link {text-decoration:none}
A:visited {text-decoration:none}
--> </STYLE>

<style type="text/css">
<!--
body {
padding:0;
margin:0;
font-family: comic sans ms;
font-size: 90%;
color: white;
text-align: center;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#global {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: left;
}

#conteneur_menu-texte {
width: 795px;
padding: 0px 0px 5px 5px;
background: #0099FF;
}

#menu {
float: left;
position: relative;
width: 115px;
border: 2px solid #FFFFFF;
}

#menu dt {
cursor: pointer;
background: #0099FF;
width: 115px
height: 20px;
line-height: 20px;
margin: 0px 0;
border: 0px solid gray;
text-align: center;
font-weight: bold;
}

#menu dd {
position: absolute;
z-index: 100;
left: 115px;
margin-top: -24px;
width: 130px;
background: #0099FF;
filter:alpha(opacity=50);  
-moz-opacity:0.50;
opacity: 0.50;
border: 0px solid gray;
}

#menu ul {
padding: 2px;
}

#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}

#menu li a, #menu dt a {
color: #FFF;
text-decoration: none;
display: block;
}

#menu li a:hover {
text-decoration: none;
}

#mentions {
font-family: comic sans ms;
position: absolute;
bottom : 200px;
left : 10px;
color: #FFF;
background-color: #ddd;
}

#mentions a {text-decoration: none;
color: #222;
}

#mentions a:hover{text-decoration: underline;
}

#menu_image{
float: left;
display: block;
}

#texte {
width: 673px;
margin-left: 117px;
background: #FFFFFF;
text-align: center;
}

#bouton_image {
border: 0px;
Hspace: 3px;
}

-->
</style>


Le problème est le suivant:
j'aimerais que le menu déroulant et les images ne fassent qu'un seule bloc, sous firefox c'est parfait. Mais sous IE, la première image est au bonne endroit mais les autres sont dans les menus déroulants.

De plus j'ai des liens-images mais je ne sais pas comment supprimer la bordure bleu autour de mes images.

Merci à tous.
Modifié par pgetsa (25 Apr 2006 - 00:02)
Voila, j'ai mis mon travail sur un ancien site.
http://www.geocities.com/lecteur_dvd_bluray/vd3.html
Vous constaterez que il y a de nombreuse différences entre firefox et IE.
J'aimerai que vous m'aidiez à résoudre ce problème.
Mais aussi j'aimerai que m'indiquiez comment faire pour que cette page soit en XHTML strict pour l'instant c'est plutot du transitional.
Enfin j'aimerais également que les cases de mon menu brille quand la souris passe dessus.
Enfin comment faire pour qu'au chargement de la page on ne voit pas tous les menus déroulants.
Merci encore à tous.
Houlà, ya du boulot Smiley lol

<script language="JavaScript">var PUpage="76001548"; var PUprop="geocities"; </script><script language="JavaScript" src="http://www.geocities.com/js_source/pu5geo.js"></script><script language="JavaScript"> var thGetOv="http://themis.geocities.yahoo.com/themis/h.php"; var thCanURL="http://us.geocities.com/lecteur_dvd_bluray/vd3.html"; var thSpaceId="76001548"; var thIP="83.159.6.183"; var thTs="1145746240"; var thCs="ae5af82aa628d811a2f282e5d72bc356";</script><noscript><link rel="stylesheet" href="http://themis.geocities.yahoo.com/jsoff.css?thIP=83.159.6.183&thTs=1145746240"></noscript><script language="JavaScript" src="http://us.geocities.com/js_source/geovck08.js"></script>
<!-- text above generated by server. PLEASE REMOVE -->
<!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">


Bon, on vire tous ces éléments script du début du document, siouplait ! Au début, on a la déclaration de type de documement (doctype) et pas autre chose !

Ensuite, si ces scripts sont importants, on les place à l'intérieur de l'élément head.

<body>
<!-- following code added by server. PLEASE REMOVE -->
<link href="http://us.geocities.com/js_source/div.css" rel="stylesheet" type="text/css">

Houlà, un link dans body, mais c'est fortement interdit ça, malheureux(/se) !

Bref, va falloir corriger un peu tout ça. Les éléments ne peuvent pas se placer n'importe où, il y a des règles plus ou moins strictes.
Si ces règles ne sont pas claires, il y a des choses à reprendre à la base.
http://openweb.eu.org/articles/xhtml_une_heure/
http://openweb.eu.org/articles/respecter_semantique/

Enfin, au sujet des images du menu, le fait qu'elles soient placées au sein d'une liste de définitions mais en dehors de tout élément de liste (titre de définition ou élément de définition) explique peut-être le problème.

Structure actuelle :
<dl id="menu">
	<img alt="sports collectifs" src="..." />
	<dt>Footbal</dt>
	<dd>
		<ul>
			<li>Actu</li>
			<li>France</li>
			<li>Étranger</li>
		</ul>
	</dd>

	<img alt="sports individuels" src="..." />
	<dt>Tennis</dt>
	<dd>
		<ul>
			<li>Actu</li>
			<li>Hommes</li>
			<li>Femmes</li>
		</ul>
	</dd>
</dl>

On remarque que les images, qui représentent des titres, sont à l'intérieur de la liste de définition. Hors l'élément dl n'accepte comme enfants directs que les éléments dt et dd. Problème. Sans oublier que le code ne fait pas du tout passer la notion de titre mais se contente de placer des images. Pas super accessible non plus.

Je propose ceci :
<div id="menu">
	<h2><img alt="sports collectifs" src="..." /></h2>
	<dl>
		<dt>Footbal</dt>
		<dd>Actu</dd>
		<dd>France</dd>
		<dd>Étranger</dd>

		<dt>Rugby</dt>
		<dd>H Cup</dd>
		<dd>Grand chelem</dd>
		<dd>Tri-nation</dd>
	</dl>

	<h2><img alt="sports individuels" src="..." /></h2>
	<dl>
		<dt>Tennis</dt>
		<dd>Actu</dd>
		<dd>Hommes</dd>
		<dd>Femmes</dd>
	</dl>
</dl>

Un peu plus compact, mieux organisé… Par contre la structure avec un dt pour plusieurs dd (parfaitement valide, il me semble) sera peut-être moins pratique (car les différents dd ne sont pas englobés dans une seul élément) pour le système de roll-over.
Merci de ta réponse, mais je souhaite te signaler que tout les scripts dont tu me parle ne sont pas présent sur ma feuille html. C'est ce foutu geocities qui a rajouté tout cela.
Sinon je pense avoir trouvé le problème pour les images. Mais j'ai dorénavant d'autres problèmes.
pgetsa a écrit :
Merci de ta réponse, mais je souhaite te signaler que tout les scripts dont tu me parle ne sont pas présent sur ma feuille html. C'est ce foutu geocities qui a rajouté tout cela.

Je suis bien d'accord, je dis juste que ça fausse (beaucoup ?) les tests que je pourrais faire, et que j'ai d'ailleurs tenté de faire. Les modifications faites en live avec l'extension webdeveloper pour Firefox ne sont pas prises en compte, par exemple. De même, il est impossible de n'ouvrir que le cadre de gauche (en virant la frame geocities de droite). Bref, ça serait bien de trouver un "vrai" hébergement (gratuit ou non), genre sur un espace Free, par exemple.

Parce que là, je veux bien faire des tests, mais il n'y a que toi qui ait accès à la version "clean" de la page Smiley sweatdrop

Quel était le problème pour les images ? Et quelle solution as-tu utilisée ?

Ah oui, sinon tu peux déjà passer un coup de validateur HTML sur ta page, pour corriger les éventuelles erreurs de syntaxe.
Modifié par mpop (23 Apr 2006 - 10:51)
J'ai déjà passer le validateur html, pour les images du menu je les ai tout simplement incluent dans aprés la balise dt et avant la balise a.
J'ai ensuite créé un script spécial pour IE.
J'ai d'autres problèmes dont je te ferais par plus tard.
je vais essayé de prendre un hébergement free, cela pas avant demain.
Voila j'ai mis mon site sur un hebergement gratuit pour que vous puissiez me dépanner. Voila les différents liens sur mes pages provisoires.
http://siteslg8.1.ifrance.com/index.html
http://siteslg8.1.ifrance.com/France.html
http://siteslg8.1.ifrance.com/L1.html

Voila j'aimerais tout simplement que mes pages fonctionnent de la même manière sous IE que sous firefox. Sous firefox mes pages sont comme je le désire (menu déroulant avec des liens-cellules, lien activé selon la page et surbrillance dans le menu déroulant sur chaque cellule et sur toute la cellule).
Je rencontre les problèmes suivants sous IE:
-dans le menu déroulant les liens ne sont pas tous sur les cellules, les sous-menus ont des liens uniquement sur le mot.
-je n'est pas vraiment réussi sous IE à faire comme sous firefox, cad mettre le lien active dans le menu.
-la surbrillance ne fonctionne pas sur toute les cellules de plus, au bas des sous menus il y a une marge disgracieuse.

Si vous pouviez jeter un coup d'oeil à mes pages et au code correspondant, pour m'aider à améliorer mes pages, et si possible passer en XHTML strict et non transitional, je vous en serez reconaissant.
Modifié par pgetsa (26 Apr 2006 - 12:25)
Salut à tous,
Je n'ai toujours pas réussi à corriger les problèmes cité au post précédent, quelqu'un pourrait-il m'aider. Comme toi mpop.