28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Pour ceux qui aurait lu ce poste avant j'ai résolu en grande partie des problèmes d'alignement de Div finalement c'était bien le JS qui me genait, je ne regardais pas là où il fallait !

Mais j'ai toujours un problème sur le menu vertical (de Iubito) sur les liens des sous-menu (sauf les over) un coup c'est IE un coup c'est Moz qui n'affiche pas les propriétés ??

Je pense bien à des conflits (plusieurs navigations) mais ce sont des ID qui portent bien des noms différents..
Par contre c'est vrai que j'ai bidouillé les hack IE et c'est ptet là que ça pêche ?

Toujours dans ce menu les différents items des ss-menu sous IE sont
en vrac comme si les <li> n'étaient pas respectés



La page est donc constituée d'une CSS et d'un JS pour le menu, le
tout très commenté.
En tous cas j'ai mis en test ici : http://www.bewebweb.com/crl/test_menu5.htm

Merci d'avance pour votre éclairage
béren


les styles
/* CSS Style pour le CRL */
/* un peu de Alsa, d'Open Web et le Iubito's menu too - merci :-* /

/**** j'ai allégé en ne mettant cette fois que les parties incriminés**** /

********************************/
/* Début du menu dynamique, accessible, css + js :  http://iubito.free.fr/prog/menu.php  MERCI Iubito -

/*A l'impression on cache le menu, marche au moins pour IE, Moz et Opéra.*/
@media print {	
.menu, .ssmenu {
		visibility:hidden;
	}
}

.menu, .ssmenu {
  background-color:#AA1B72;
  color:#333;
  border:0.1em solid #333;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:0.9em;
/*  padding:1px;   si je met Padding, mes puces en Over sorte des ss-menu !*/
/* !important : width et margin  au cas où le javascript est désactivé. */  	
	width:16em;
	margin:1em;
}
.menu {
padding:0 1em;
text-align:center;


/*dégradé pour IE     ?? ne fonctionne plus sous ie7 ?*/
/*FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AA1B72,endColorStr=#B10A85);*/
}

.ssmenu{
white-space : no-break; 		/* ?d'ou je sors ça ?*/
	} 

/*FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#AA1B72,endColorStr=#B10A85);*/	
	
.menu span, .ssmenu span {/*pour cacher les ; en fin de li de la synthèse vocale (pause dans l'élocution)*/
  display:none;
}

/*  Les items (les <li>) des sous-menus, notamment si on veut enlever les puces des listes */
.ssmenu ul, .ssmenu li {	
	padding:1;
	margin:0;
	list-style-type:none;
	text-decoration:none;

} 
 
.menu a, .ssmenu a  .menu a:visited, .ssmenu a:visited{
   text-decoration:none;
   font-family:Verdana, Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  letter-spacing: 1px ;
  padding:2px 1px;
/* Ne pas modifier le block, margin et width */
/* explications : Un width:100% fait planter Mozilla, sans le width:100% c'est IE et Opera... La combinaison
	aucun width et height:100% marche sur tous, donc ne pas toucher les 2 lignes :margin et height*/
	margin:0px;
	height:100%;
	display:block;
	padding-left:2px;
	voice-family: "\"}\"";
	voice-family:inherit;
	
}
/*lien sous le curseur, les Over quoi*/
.ssmenu ul:hover, .ssmenu a:hover, .ssmenu a:focus  .menu a:hover, .menu a:focus{
  text-decoration:none;
   background-color:#C2309C; 
  color:#FFCC33; /* lien-over orange */
}


/***********SPECIALEMENT pour IE les hack et Moi j'ai du dédoubler et ajouter les couleurs et non-soulignement*****/
/*initialement chez Iubito on avait seulement :
html>body .menu a, html>body .menu a:visited, html>body .menu a:hover, html>body .menu a:active,
html>body .ssmenu a, html>body .ssmenu a:visited, html>body .ssmenu a:hover, html>body .ssmenu a:active{
		width:auto;
}
*/

html>body .menu a, html>body .menu a:visited, html>body .menu a:hover, html>body .menu a:active,
html>body .ssmenu a, html>body .ssmenu a:visited,{
	width:auto;
	text-decoration:none;
	color:#FFFFFF;
}
 html>body .ssmenu a:hover, html>body .ssmenu a:active {
	width:auto;
	text-decoration:none;
	color:#FFCC33;
}



/*fin du menu haut de chez Iubito */


Modifié par be web (01 Mar 2007 - 12:22)
Bonjour,

J'ai effacé le doublon que tu as envoyé sur le forum. Merci de faire attention, surtout pour un message aussi long. Smiley smile