[Résolu] Menu CSS marche pas sous IE après adaptation chez moi

Bonjour à tous,

Bravo Raph pour le travail sur Alsa : c'est énorme.

Donc, mon souci est le suivant : je développe un site sous mac, firefox bien souvent.

Avant la mise en ligne, je teste sur PC et sous IE pour la forme (parcequ'il parait qu'encore bien des gens utilisent ces vieux trucs tous pourris, et qu'ils comptent, ces gens là...)

Bref, quand j'ai adapté un menu CSS issu d'un des tutos d'alsa, qui marchait très bien sous IE, et bin ça marche plus chez moi.

Le lien vers le tuto :
http://css.alsacreations.com/modelesmenus/hd2.htm

Le lien vers ma page où ça marche pas :

http://www.traitements.info

Il s'agit de la barre de menu horizontale principale jaune...

Je pense que vous pouvez trouver les codes sources sur la page, mais je peux vous les indiquer ici dans le détail sur demande.
J'ai déconné sans doute quelque part, mais je sais pas où..

Merci de votre aide, pour tout ceux qui sont en vacances... ou pas...

A+

Zoul

PS : si quelqu'un veut faire des commentaires sur le site, par ailleurs, je suis preneur...
Modifié par zoul (07 Aug 2006 - 15:26)

Met nous donc la partie de ton css qui gère le menu pour voir de quoi il en retourne

Bonjour,

zoul a écrit :
(parcequ'il parait qu'encore bien des gens utilisent ces vieux trucs tous pourris, et qu'ils comptent, ces gens là...)

La remarque est déjà déplacée en elle-même. Mais te rends-tu compte qu'elle peut être très choquante dans la thématique du site concerné, où le terme exclusion a une résonnance bien particulière ?

Bonjour et merci de la réponse :


L'url concerné est maintenant :
http://www.actions-traitements.org

Voici le code CSS qui concerne le menu (pour le code css complet, voir les css directement en ligne, non?):

/* CSS issu des tutoriels  http://css.alsacreations.com  mais modifiés */

dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}

dt{
font-size:15px;
}


#menu {
position : relative;
left: 82px;
top: -15px;
}

#menu dl {
float: left;
}

#menu li {
display: inline;
}

#menu a:link {
text-decoration: none;
color: #000;
}
#menu a:visited {
text-decoration: none;
color: #000;
}
#menu a:hover {
text-decoration: none;
color: #000;
background-color: #ECFA65;
}
#menu a:active {
text-decoration: none;
color: #000;
background-color: #ECFA65;
}

#smenu1, #smenu2, #smenu3 {
position: absolute;
left: 0;
text-align:left;
font-size: 1em;
border-top: 1px solid gray;
width: 700px;
background-color: #ECFA65;
}
#smenu4, #smenu5, #smenu6, #smenu7 {
position: absolute;
left: 0;
text-align:right;
font-size: 1em;
border-top: 1px solid gray;
width: 700px;
background-color: #ECFA65;
}

Le code HTML :

<!-- début -->
			<div class=box-upperleft-jaune style="width:720px">
					<div class=box-upperright>
						<div class=box-lowerleft>
							<div class=box-lowerright>
							  <div id="box-inc" style="height:60;margin-left:-90px">
  <div id="menu">
	<dl>

		<dt onmouseover="montre('smenu1');"><a href="spip.php?rubrique1003">L'association</a></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="spip.php?rubrique14">Agenda</a></li>
					<li><a href="spip.php?rubrique11">Communiqués de presse</a></li>
					<li><a href="spip.php?rubrique1">Vie associative</a></li>
					<li><a href="spip.php?article1454">Ligne d'Ecoute</a></li>
					<li><a href="spip.php?rubrique17">Partenaires</a></li>
					<li><a href="spip.php?article1455">Espace adhérents</a></li>
				</ul>

			</dd>
	</dl>
	
	<dl>			
		<dt onmouseover="montre('smenu2');"><a href="spip.php?rubrique1004">InfoTraitements</a></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="spip.php?article1">Abonnement</a></li>
					<li><a href="spip.php?rubrique18">Editorial</a></li>
					<li><a href="spip.php?rubrique16">Mes tripes à l'air</a></li>
					<!-- 
					<li><a href="spip.php?sommaireit">Tous les Sommaires</a></li>
					<li><a href="spip.php?telecharge">Téléchargement PDF</a></li>
					-->
				</ul>
			</dd>
	</dl>
	
	<dl>			
		<dt onmouseover="montre('smenu3');"><a href="spip.php?rubrique1005"><strong>Les traitements</strong></a></dt>
			<dd id="smenu3">
					<li><a href="spip.php?rubrique71">Essais et Protocoles</a></li>
					<li><a href="spip.php?rubrique1001">Les produits</a></li>
					<li><a href="spip.php?rubrique1009">Gestion des traitements</a></li>
					<li><a href="spip.php?rubrique111">Effets indésirables</a></li>
					<li><a href="spip.php?rubrique142">Co-infections</a></li>
					<li><a href="spip.php?rubrique131">Infections opportunistes</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>			
		<dt onmouseover="montre('smenu4');"><a href="spip.php?rubrique1010"><strong>Vivre avec</strong></a></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="spip.php?rubrique32">Prévention</a></li>
					<li><a href="spip.php?rubrique51">Examens et diagnostics</a></li>
					<li><a href="spip.php?rubrique1013">Prise en charge</a></li>
					<li><a href="spip.php?rubrique151">Qualité de vie</a></li>
					<li><a href="spip.php?rubrique113">Sexualité</a></li>
					<li><a href="spip.php?rubrique161">Femmes</a></li>
					<li><a href="spip.php?rubrique171">Enfants</a></li>
					<li><a href="spip.php?rubrique201">Législation</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="montre('smenu5');"><a href="spip.php?rubrique1006">Participer</a></dt>
			<dd id="smenu5">
				<ul>
					<li><a href="spip.php?article6">Bénévolat</a></li>
					<li><a href="spip.php?article768">Adhésions</a></li>
					<li><a href="spip.php?rubrique151">Réunions Qualité de Vie</a></li>
					<li><a href="spip.php?rubrique1012">Témoignages</a></li>
					<li><a href="spip.php?article768">Faire un don</a></li>
				</ul>
			</dd>
	</dl>

	
	<dl>	
		<dt onmouseover="montre('smenu6');"><a href="spip.php?rubrique1007">Multimédia</a></dt>
			<dd id="smenu6">
				<ul>
					<li><a href="spip.php?rubrique1014">Le Blog</a></li>
					<li><a href="spip.php?rubrique1015">Galerie Photo</a></li>
					<li><a href="spip.php?rubrique1016">Podcast</a></li>

				</ul>
			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="montre('smenu7');"><a href="spip.php?rubrique1008">Actualités</a></dt>
			<dd id="smenu7">
				<ul>
					<li><a href="spip.php?rubrique181">Congrès & Conférences</a></li>
					<li><a href="spip.php?rubrique997">En Anglais</a></li>
				</ul>
			</dd>
	</dl>
	
	<!-- end #menu -->
</div>


							</div>
						  </div>
						</div>
					</div>
				</div>	

Laurent : Tu as parfaitement raison. Je devais etre bien fatigué en écrivant ce message. C'était sur un ton humoristique dans ma tete, mais à la relecture, je comprends parfaitement ton point de vue. J'étais tellement dans le code que j'en oubliais mon sujet. Je ferai gaffe à l'avenir.

zoul a écrit :

Laurent : Tu as parfaitement raison. Je devais etre bien fatigué en écrivant ce message. C'était sur un ton humoristique dans ma tete, mais à la relecture, je comprends parfaitement ton point de vue. J'étais tellement dans le code que j'en oubliais mon sujet. Je ferai gaffe à l'avenir.

Pas de mal. Je suis assez bon moi aussi dans ce type de gaffe

Bon je suis loin d'être super calé en css, donc je demanderais aux personnes expérimentées du forum de regarder d'un oeil critique ce que je vais avancer, en même temps comme je l'ai ouvert, j'ai essayé de trouver le problème

Á mon avis cela viens du paramétrage de l'élément suivant :

#menu {
position : [#red]relative[/#] ;
left: 82px;
top: -15px;
}

Les paramètres left & top sont attributs pour une div positionnée en absolu. Essai avec absolute en paramètre juste pour voir

Bon après forcément il faudra réadapter un peu mais cela fonctionnera sur IE et FF (sauf erreur de ma part et dans ce cas je m'excuse d'avance )
Modifié par Antouam (07 Aug 2006 - 14:33)

En fait, l'élément #menu est en 'relative' puisque déjà dans un div.

Par contre, j'ai mon #sous-menu qui est en absolute. ça vient ptet de là.
Je vais faire quelques essais dans ce sens. Merci pour la réponse.

Les sous-menus sont obligatoirement en absolut, car le principe d'affichage de ton javascript agit sur la propriété z-index de la div, qui n'est utilisable qu'avec un positionnement absolut.

J'ai fait un test avec ta page en positionant #menu en absolut et les #smenu arrivent bien dessous ton menu principal. Donc je crois que cet attribut à son importance, vu que le positionnement de smenu dépent de celui de menu...

De plus il reste toujours que left et top de #menu ne servent à positionner que des éléments en absolu, donc ne servent à rien dans ton cas

Antouam a écrit :
De plus il reste toujours que left et top de #menu ne servent à positionner que des éléments en absolu, donc ne servent à rien dans ton cas

Je n'ai pas lu le script, mais pour éviter une confusion:
- top, left, etc. déplacent un élément doté de position:relative à partir de la position qu'il occuperait sans celle-ci (en flux ou flottant), sans modifier en retour le placement des autres éléments.
- top, left, etc positionnent un élément doté de position absolue ou fixe, dans le conteneur de référence, indifféremment aux autres éléments.

Merci pour cette précision...
gasp Ce dont je manque assurément.
Bon j'arrête là mes conseils, car je crains ne pas être le mieux placé pour ça
Bon courage pour la suite (à l'occasion si tu trouve dis-nous en plus )

:)

ça marche.. presque...

encore un petit décalage

merci

dès que c'est vraiment résolu, je fais un signe !

bravo !!!!
ça marche : http://www.actions-traitements.org

Merci à vous 2 !
Modifié par zoul (07 Aug 2006 - 15:25)