Sujet Précédent Sujet Suivant

Probleme de CSS

Fermé
samof02 Messages postés 43 Date d'inscription vendredi 13 février 2009 Statut Membre Dernière intervention 18 juin 2011 - 30 déc. 2009 à 18:41
scriptiz Messages postés 1424 Date d'inscription dimanche 21 décembre 2008 Statut Membre Dernière intervention 14 septembre 2023 - 30 déc. 2009 à 19:10
Bonjour,

Je viens de rencontre un problème de css, et ce la raison pour la quel je viens de vous demander votre aider.
D'après ma mission je voulais faire un menu css et sous menu.
Mon problème est que sous firexfox ça marche impec mais sous IE ça me donne un résultat que j'attendais pas.

voici mon cote htlm ainsi que le css:
/******************************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>

Test de menu
</title>
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="menu.css" title="défaut">
</head>
<body lang="fr">

<div class="barre-menu-corps">
<div class="sam yacin com" >
<ul class="sam yacin com">
<li><span class="menu_r"><a href="./accueil.php"><span class="menu_ar">Accueil</span></a></span>
</li>
<ul class="sam yacin com">
<li><span class="menu_r"><a href="./accueil.php"><span class="menu_ar">OPTIMETRE</span></a></span>
<span class="content">
<ul class="sam yacin com">
<li><a href="www.google.fr"><span class ="ham">Présentation</span></a></li>
<li><a href="www.yahoo.fr"><span class ="ham">Tarifs</span></a></li>
<li><a href="www.yahoo.fr"><span class ="ham">S'abonner</span></a></li>
</ul>
</span>
</li>
<ul class="sam yacin com">
<li><span class="menu_r"><a href="./accueil.php"><span class="menu_ar">OPTIMEX</span></a></span>
<span class="content">
<ul class="sam yacin com">
<li><a href="www.google.fr"><span class ="ham">Présentation</span></a></li>
<li><a href="www.yahoo.fr"><span class ="ham">Tarifs</span></a></li>
<li><a href="www.yahoo.fr"><span class ="ham">S'abonner</span></a></li>
<li><a href="www.yahoo.fr"><span class ="ham">Résultat</span></a></li>

</ul>
</span>
</li>
<li><span class="menu_r"><a href=""><span class="menu_ar">OPTIVAL</span></a></span></li>
<li><span class="menu_r"><a href="./inscription.php"><span class="menu_ar">OPTIGEST</span></a></span></li>
<li><span class="menu_r"><a href=""><span class="menu_ar">S'INSCRIRE</span></a></span></li>
<li><span class="menu_r"><a href=""><span class="menu_ar">CONTACTS</span></a></span></li>
<li><span class="menu_r"><a href=""><span class="menu_ar">30 JOURS d'ESSAI GRATUIT</span></a></span></li>
</ul>
<br class="clearit" />
</div>

</div>
</body>
</html>
/******************************************************************************

Et voici le css:

.barre-menu-corps{
float:left;
width:900px;
background-image:url(../images/fond.jpg);
text-align:left;
height:27px;
}
}
.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}

.sam.yacin {

width: 900px;
height: 27px;
margin: 0;
padding: 0;
background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;


}

.sam.yacin ul {
list-style: none;
margin: 0;
padding: 0;
}
.ham{
padding-right: 35px;
}
.sam.yacin ul li {
float: left;
margin: 0;
padding: 0;
background: transparent url(images/bg-bubplastic-h-purple.gif) top left no-repeat;

}
.sam.yacin .content ul li{
background: transparent url(images/bg-bubplastic-h-orange.gif) top left no-repeat;
}

.sam.yacin ul li a {
display: block;
height: 27px;
padding-left: 35px;
text-transform: uppercase;
font-family: 'Trebuchet MS';
font-size: 70%;
color: #FFFFFF;
text-decoration: none;

}

/****Ceci permet d'afficher le sous menu lors de survoler du sourir****/

ul.sam.yacin li span.content {
display: none;
position: absolute;
left:8px;
width: 900px;
height: 27px;
margin: 0;
padding: 0;
}

/****Ceci permet d'afficher le sous menu lors de survoler du sourir****/
ul.sam.yacin li:hover > span.content {
display: inline;
}

.sam.yacin ul li a span.menu_ar {
display: block;
float: left;
height: 22px;
padding-top: 5px;
padding-right: 17px;
background: transparent url(images/bg-bubplastic-h-purple.gif) top right no-repeat;
cursor: pointer;
text-align:left;

}

ul.sam.com li span a:hover,
.sam.com ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-aqua.gif) top left no-repeat;

}

.sam.com ul li a:hover span.menu_ar,
.sam.com ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-aqua.gif) top right no-repeat;
text-align:left;
}
/******************************************************************************

Sauf q'il manque les images pour le changement en cas d survol du souris

Merci de me débloquer.
A voir également:

1 réponse

Réponse 1 / 1
scriptiz Messages postés 1424 Date d'inscription dimanche 21 décembre 2008 Statut Membre Dernière intervention 14 septembre 2023 425
30 déc. 2009 à 19:10
Bonjour, pour comprendre et résoudre tes problèmes dans IE je te conseille la lecture de cet article :

http://www.siteduzero.com/tutoriel-3-36505-les-hacks-css-pour-internet-explorer.html

0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
CSS/Comment enlever couleur liens ?
alexou1984 -
Tonio -

6 réponses