28172 sujets

CSS et mise en forme, CSS3

J'ai un grand soucis avec le développement d'un menu en html et css, il ne s'affiche pas sur IE6 par contre sur les autres navigateurs il fonctionne a merveille
 <div id="nav">
	<ul id="mainmenu">
 	   <li class="home"><a href="#">&#1575;&#1604;&#1589;&#1601;&#1581;&#1577; &#1575;&#1604;&#1585;&#1574;&#1610;&#1587;&#1610;&#1577;</a></li>
       
       <li class="products"><a href="#"><span>&#1575;&#1604;&#1605;&#1606;&#1588;&#1608;&#1585;&#1575;&#1578;</span></a>
				<ul class="hide-mobile">
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
				</ul>
		</li>
          
          
          <li class="rentrer"><a href="#"><span>&#1575;&#1604;&#1593;&#1608;&#1583;&#1577; &#1575;&#1604;&#1605;&#1583;&#1585;&#1587;&#1610;&#1577;</span></a>
				<ul class="hide-mobile">
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
				</ul>
         </li>
         
         
         <li class="press"><a href="#">&#1575;&#1604;&#1578;&#1586;&#1608;&#1583; &#1576;&#1575;&#1604;&#1603;&#1578;&#1576;</a>
				<ul class="hide-mobile">
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
				</ul>
		</li>
          
          <li class="company"><a href="#">&#1575;&#1604;&#1578;&#1586;&#1608;&#1583; &#1593;&#1606; &#1576;&#1593;&#1583;</a>
				<ul class="hide-mobile">
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
				</ul>
		</li>
          <li class="b2b"><a href="#">&#1582;&#1583;&#1605;&#1575;&#1578; &#1575;&#1604;&#1578;&#1608;&#1585;&#1610;&#1583;</a>
				<ul class="hide-mobile">
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
				</ul>
          </li>
          
          <li class="b2b"><a href="#">&#1578;&#1581;&#1605;&#1610;&#1604;</a>
               <ul class="hide-mobile">
            <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
            <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
				</ul>
          </li>
          
			<li class="b2b"><a accesskey="6" href="#">&#1573;&#1578;&#1589;&#1604; &#1576;&#1606;&#1575;</a>
				<ul class="hide-mobile">
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
                    <li><a href="#">&#1591;&#1604;&#1576; &#1593;&#1585;&#1608;&#1590; &#1582;&#1575;&#1589; &#1576;&#1575;&#1602;&#1578;&#1606;&#1575;&#1569;</a></li>
				</ul>
			</li>
         <!--<li class="support"><a title="Support" href="/support/">Support</a></li>-->
         </ul>
         </div>


et voici le css
/* -------------------------------------------------------------- 
   
   * default typography
  
-------------------------------------------------------------- */

/* Font size definition: the line-heights and vertical margins 
   are automatically calculated from this. 
   The percentage is of 16px (0.75 * 16px = 12px) */
@font-face {
font-family:ae_AlArabiya;
src: url("../fonts/ae_AlArabiya.ttf") format("True Type Fonts");
}
#nav{
	font-family:ae_AlArabiya, Tahoma, Geneva, sans-serif;
	height:38px;
		direction:rtl;

}

#page {
	height:38px;
	width:960px;
}
/* top menu */
#nav ul#mainmenu {
	line-height:33px;
	list-style:none inside none;
	background: url('../images/BG_menu.jpg') repeat-x 0% 100%;
	height:38px;
	min-height:38px;
	height:auto !important;
	position:relative;
	z-index:998;
}
#nav ul#mainmenu li a {
	max-height:38px;
}
#nav li {
	font-size:17px;
	color:#fff;
	position:relative;
	float:right;
	list-style-image: none;
}
#nav li span {
	background-color:transparent;
/*	background-color:rgba(44,44,44,0.5);*/
}
#nav li.dl span {
	background-color:transparent;
	text-decoration: underline;
}
#nav li a {
	display:block;
	padding:0 20px;
	height:38px;
	color:#fff;
	text-decoration:none;
	white-space:nowrap;
}
#nav li.on, #nav li:hover {
	background:transparent url('../images/over.png') no-repeat 50% 100%;
}
#nav li.support {
	text-indent: -999em;
	width:17px;
	float:right;
}
#nav li.support a {
	background:url('../images/support_01.png') no-repeat 0 0;
	padding:0;
}
#nav li.support a:hover {
	background-position: -17px 0;
}

/* Top menu dropdowns */
#nav li ul {
	text-shadow:0 1px 0 #000, 0 1px 4px #fbb6b6;
	position: absolute;
	z-index: 999;
	min-width: 150px;
	background-color: #CC0F16;
	color: #fff;
	top: 38px;
	list-style: none;
	margin: 0 0 0 -999em;
	padding: 5px 0;
	background-image: none;
	opacity: 0;
	transition: opacity 0.25s ease-out;
	-webkit-transition: opacity 0.25s ease-out;
	-moz-transition: opacity 0.25s ease-out;
	text-align:right;

}
#nav li:hover ul, #nav li:active ul, #nav li.sfhover ul {
  margin-left: 0;
  opacity: 1;
}
#nav li ul li,#nav li ul li:hover {
	min-width:150px;
	font-size:16px;
	float: none;
	margin: 0;
	padding: 0;
	background: transparent none;
}

#nav li ul li + li {
	border-top: 1px dotted #FF473F;
	border-collapse: collapse;
}
#nav li ul a, #nav li.on ul a {
	padding: 1em;
	margin:0;
	height: auto;
	color: #fff;
	line-height: 1em;
	display: block;
	background-image: none;
}
#nav li ul a:hover, #nav li ul a:focus, #nav li ul a.sffocus {
	color: #fff;
	background-color: #900;
	background-image: none;
}

#nav li ul li.dl {
	border: 0;
	background-color: #333;
}
#nav li ul li.dl a {
	background: #444 url('../images/dlcircle.png') no-repeat 97% 12px;
}
#nav li ul li.dl {
	border-top: 1px dotted #666;
}
#nav li ul li.dl:hover, #nav li ul li.dl:hover a {
	background-color: #900;
	background-position: 97% -28px;
}
#nav li ul li.dl b {
	display: block;
}
.home, .products, .rentrer, .press, .company, .b2b{
	border-left:1px solid #619fc4;
	height:36px;
}



merci a tous
Bonjour,

Il me semble que les polices TTF (True Type Font) ne fonctionnent pas avec IE, du moins avec les anciennes versions. Je crois que seules les polices EOT sont compatibles avec ce navigateur. Voici l'adresse d'un convertisseur de polices : ttf2eot.
Bonjour,

Les indications min-width, min-height ne sont pas supportées par IE6. Il va falloir recourir à un commentaire conditionnel qui donnera l'adresse d'une feuille de style spécialement conçue pour ce "fameux" navigateur. Feuille dans laquelle toutes tailles devront êtres exprimées en width / height (et pas min-width / min-height). Il y a aussi une vrai pagaille pour l'interprétation des flottements avec IE6. (c'est un complot pour ne pas que les codeurs se reposent Smiley lol )

Espérons qu'un(e) spécialiste de IE6 fasse son apparition pour te conseiller mieux que moi.
Yo l'ami,

Il faut indiquer le chemin du CSS en mode conditionnel pour IE6 : comme toutes indications dans le <head> ne pas oublier les commentaires : (ici, est proposée une version immédiatement inférieure à IE7)
<!--[if lt IE 7]>
   ..ici le lien vers la feuille CSS pour anciennes versions de IE.
<![endif]-->
Bonjour, le principal problème, c'est surtout qu'IE6 ne reconnait la pseudo classe .hover que sur les liens. Sur tout autre élément ça ne fonctionnera pas.

Un bon menu déroulant, accessibilité le et intéropérable se construit avec JavaScript !
Hello,
j'ai mis le commentaire
<!--[if lte IE 6]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /><![endif]--> 

rien ne marche avec IE6
Sans savoir ce que tu as mis dans ce fichier ni où tu l'as inséré, il est impossible de t'aider.

Mais comme je l'ai déjà dit, le problème réel de ton menu ce sont les :hover (min-height et max-height impacteraient le rendu mais ne peuvent empècher un élément d'apparaitre).
Bonjour,
J'ai essayé le code javaScript mais ça ne marche toujour pas avec IE666666666666666666

var my_menu="";
my_menu += "<ul id=\"mainmenu\">";
my_menu += " 	   <li><a href=\"\/cnp.tn\/arabic\/index.htm\">&#1575;&#1604;&#1589;&#1601;&#1581;&#1577; &#1575;&#1604;&#1585;&#1574;&#1610;&#1587;&#1610;&#1577;<\/a><\/li>";
my_menu += "       <li><a href=\"\/cnp.tn\/arabic\/presentationCNP.htm\"><span>&#1575;&#1604;&#1605;&#1585;&#1603;&#1586; &#1575;&#1604;&#1608;&#1591;&#1606;&#1610; &#1575;&#1604;&#1576;&#1610;&#1583;&#1575;&#1594;&#1608;&#1580;&#1610;<\/span><\/a><li>";
my_menu += "       <li><a href=\"#\"><span>&#1575;&#1604;&#1605;&#1606;&#1588;&#1608;&#1585;&#1575;&#1578;<\/span><\/a>";
my_menu += "				<ul class=\"hide-mobile\">";
my_menu += "                    <li><a href=\"\/cnp.tn\/arabic\/manuels-scolaires\/09-10\/09-10.htm\">&#1575;&#1604;&#1593;&#1608;&#1583;&#1577; &#1575;&#1604;&#1605;&#1583;&#1585;&#1587;&#1610;&#1577; 2009-2010<\/a><\/li>";
my_menu += "                    <li><a href=\"\/cnp.tn\/arabic\/manuels-scolaires\/08-09\/08-09.htm\">&#1575;&#1604;&#1593;&#1608;&#1583;&#1577; &#1575;&#1604;&#1605;&#1583;&#1585;&#1587;&#1610;&#1577; 2008-2009<\/a><\/li>";
my_menu += "                    <li><a href=\"\/cnp.tn\/arabic\/manuels-scolaires\/07-08\/07-08.htm\">&#1575;&#1604;&#1593;&#1608;&#1583;&#1577; &#1575;&#1604;&#1605;&#1583;&#1585;&#1587;&#1610;&#1577; 2007-2008<\/a><\/li>";
my_menu += "                    <li><a href=\"\/cnp.tn\/arabic\/manuels-scolaires\/06-07\/06-07.htm\">&#1575;&#1604;&#1593;&#1608;&#1583;&#1577; &#1575;&#1604;&#1605;&#1583;&#1585;&#1587;&#1610;&#1577; 2006-2007<\/a><\/li>";
my_menu += "                    <li><a href=\"\/cnp.tn\/arabic\/manuels-scolaires\/05-06\/05-06.htm\">&#1575;&#1604;&#1593;&#1608;&#1583;&#1577; &#1575;&#1604;&#1605;&#1583;&#1585;&#1587;&#1610;&#1577; 2005-2006<\/a><\/li>";
my_menu += "                    <li><a href=\"\/cnp.tn\/arabic\/manuels-scolaires\/autre-produit.htm\">&#1605;&#1606;&#1588;&#1608;&#1585;&#1575;&#1578; &#1605;&#1582;&#1578;&#1604;&#1601;&#1577;<\/a><\/li>";
my_menu += "				<\/ul>";
my_menu += "		<\/li>";
my_menu += "          ";
my_menu += "          ";
my_menu += "          <li><a href=\"\/cnp.tn\/arabic\/annee-actuelle\/AgNew.htm\"><span>&#1575;&#1604;&#1593;&#1608;&#1583;&#1577; &#1575;&#1604;&#1605;&#1583;&#1585;&#1587;&#1610;&#1577;<\/span><\/a><\/li>";
my_menu += "         ";
my_menu += "         <li><a href=\"\/CNP1\/web\/arabic\/biblio\/man-eleves.jsp\">&#1578;&#1581;&#1605;&#1610;&#1604;<\/a><\/li>";
my_menu += "         <li><a href=\"#\">&#1575;&#1604;&#1578;&#1586;&#1608;&#1583; &#1576;&#1575;&#1604;&#1603;&#1578;&#1576;<\/a>";
my_menu += "				<ul class=\"hide-mobile\">";
my_menu += "                    <li><a href=\"\/cnp.tn\/arabic\/services-vente\/presentation.htm\">&#1575;&#1604;&#1578;&#1593;&#1585;&#1610;&#1601; &#1576;&#1582;&#1583;&#1605;&#1575;&#1578; &#1575;&#1604;&#1578;&#1586;&#1608;&#1583;<\/a><\/li>";
my_menu += "                    <li><a href=\"\/cnp.tn\/arabic\/services-vente\/vlibraires.htm\">&#1578;&#1586;&#1608;&#1610;&#1583; &#1575;&#1604;&#1603;&#1578;&#1576;&#1610;&#1610;&#1606;<\/a><\/li>";
my_menu += "                    <li><a href=\"\/cnp.tn\/arabic\/services-vente\/vprofs.htm\">&#1575;&#1604;&#1576;&#1610;&#1593; &#1604;&#1604;&#1605;&#1585;&#1576;&#1610;<\/a><\/li>";
my_menu += "                    <li><a href=\"\/cnp.tn\/arabic\/services-vente\/veleves.htm\">&#1575;&#1604;&#1576;&#1610;&#1593; &#1604;&#1604;&#1578;&#1604;&#1605;&#1610;&#1584;<\/a><\/li>";
my_menu += "				<\/ul>";
my_menu += "		 <\/li>";
my_menu += "         <li><a href=\"\/cnpCommerce\/arabic\/indexECommerceAr.jsp?IsArabicLg=true\">&#1575;&#1604;&#1578;&#1586;&#1608;&#1583; &#1593;&#1606; &#1576;&#1593;&#1583;<\/a><\/li>";
my_menu += "         <li><a href=\"#\">&#1582;&#1583;&#1605;&#1575;&#1578; &#1575;&#1604;&#1578;&#1608;&#1585;&#1610;&#1583;<\/a>";
my_menu += "				<ul class=\"hide-mobile\">";
my_menu += "                    <li><a href=\"\/CNP1\/web\/arabic\/services-importation\/procedures\/service.htm\">&#1575;&#1604;&#1578;&#1593;&#1585;&#1610;&#1601; &#1576;&#1582;&#1583;&#1605;&#1575;&#1578; &#1575;&#1604;&#1578;&#1608;&#1585;&#1610;&#1583;<\/a><\/li>";
my_menu += "                    <li><a href=\"\/CNP1\/web\/arabic\/services-importation\/login.htm\">&#1601;&#1590;&#1575;&#1569; &#1575;&#1604;&#1581;&#1585;&#1610;&#1601;<\/a><\/li>";
my_menu += "                    <li><a href=\"\/CNP1\/web\/arabic\/services-importation\/fournisseur\/login.htm\">&#1601;&#1590;&#1575;&#1569; &#1575;&#1604;&#1605;&#1586;&#1608;&#1583;<\/a><\/li>";
my_menu += "				<\/ul>";
my_menu += "         <\/li>";
//my_menu += "         <li><a href=\"\/CNP1\/web\/arabic\contact.jsp\"><img src=\"\/cnp.tn\/images\/contact.png\" height=\"38\" width=\#38\"><\/a><\/li>";
my_menu += "         <\/ul>";


document.getElementById("nav").innerHTML = my_menu;


merci
Est-ce que tu pourrais nous fournir une page en ligne (ton code est tout simplement illisible) ?

On ne peut pas t'aider sans savoir exactement ce que tu as (mal) fait.
La propriété 'direction' ne fonctionne pas toute seule, il faut auparavant régler 'unicode-bidi' - se documenter ici : CSS2 : direction et unicode-bidi. J'ai pas compris grand chose à ce sujet et comme je n'utilise jamais….

Dans ton cas, ceci devrait convenir :
#nav { 
   font-family: ae_AlArabiya, Tahoma, Geneva, sans-serif; 
   height: 38px;
   unicode-bidi : bidi-override; 
   direction: rtl; 
}


Sur le code source de la page en ligne, on ne voit pas le commentaire conditionnel qui ne "fonctionne pas"… On ne voit pas grand chose d'ailleurs puisque le menu se résume à rien :
<!--MENU-->
   <div id="nav"></div>
<!--END MENU-->
Page blanche à 100% si javascript désactivé !