Bonjour à tous,
voila 2 jours que je lutte avec la mise en page d'un menu sous IE7 et j'ai remarqué que j'avais également un soucis sur IE6 . Je n'arrive plus à avancer j'ai donc isolé la partie qui foire pour vous la montrer et espérer que quelqu'un ait une solution
Voici la partie html :
la partie CSS :
et un exemple de ce que cela donne : http://www.lbconseil.net/temp/test.html
(edit: ss mozilla la mise en page est nickel !)
J'espère vraiment qu'on puisse m'aider, je ne suis pas vraiment un débutant en CSS mais là j'avoue ne plus savoir quoi faire...
Cordialement,
JimmY.
Modifié par jimxx (08 Mar 2007 - 13:59)
voila 2 jours que je lutte avec la mise en page d'un menu sous IE7 et j'ai remarqué que j'avais également un soucis sur IE6 . Je n'arrive plus à avancer j'ai donc isolé la partie qui foire pour vous la montrer et espérer que quelqu'un ait une solution
Voici la partie html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link rel="stylesheet" href="defaut.css" type="text/css" media="screen" />
</head>
<body>
<div id="droite">
<h4 class="quotidien">Particulier</h4>
<ul id="menu">
<li><a id="first" href="/debit-credit/index2.php?composants=comp_clients">En bref</a></li>
<li id="gpmenu5" class="gpmenufree">Mon tableau de synthèse</li>
<ul>
<li><a href="/debit-credit/index2.php?composants=comp_telechargement" class="ssmenu">Télécharger mes comptes</a></li>
<li><a href="/debit-credit/index2.php?action=add&composants=comp_ecritures" class="ssmenu">Effectuer une nouvelle saisie</a></li>
<li><a href="/debit-credit/index2.php?composants=comp_ecritures" class="ssmenu">Mes saisies manuelles</a></li>
<li><a href="/debit-credit/index2.php?composants=comp_tableaux" class="ssmenu">Mon tableau de synthèse</a></li>
</ul>
<li><a class="current" href="/debit-credit/index2.php?composants=comp_ratios&ratio=part_depenses">Mes visuels</a></li>
<li><a href="/debit-credit/index2.php?composants=comp_ratioperso">Mes calculs</a></li>
<li><a id="last" href="/debit-credit/index2.php?composants=comp_users">Mes infos perso</a></li>
</ul>
</div>
</body>
</html>
la partie CSS :
body
{
margin: 0;
padding: 0;
border:0;
background-color: #fff;
}
h1, h2, h3, h4, h5, h6, div, form, fieldset, ol, ul, dl, dt, dd{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
#droite{
float:right;
margin-top: 105px;
min-height: 670px;
padding: 0 4px 25px 4px;
width: 180px;
font-family: Arial, Helvetica, sans-serif;
}
#droite h4.quotidien{
padding: 10px 10px 0 15px;
width: 155px;
height: 26px;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #C1DE2A;
background: url('../images/quotidien.gif') no-repeat;
}
#droite #menu li {
width: 180px;
height: 25px !important;
height: 23px;
list-style: none;
font-size: 11px;
}
#droite #menu ul li{
height: 18px !important;
background: none #bbbbbb;
}
#droite #menu li a{
display: block;
padding-left: 25px;
height: 23px;
line-height: 23px;
color: #4D5752;
border-top: solid 1px #969595;
border-bottom: solid 1px #ffffff;
background: url('../images/fl-menu.gif') no-repeat 16px center;
}
#droite #menu li a#first{
border-top: solid 1px #EBEBEC;
}
#droite #menu li a#last{
border-bottom: solid 1px #EBEBEC;
}
#droite #menu li a:hover{
padding-left: 15px;
height: 23px;
line-height: 23px;
color: #B2CC2F;
border-top: solid 1px #4D5752;
border-bottom: solid 1px #4D5752;
background: url('../images/fl-menu-over.gif') no-repeat #4D5752 7px center;
}
#droite #menu ul li a.ssmenu, #droite #menu ul li a.ssmenu:hover{
display: block;
text-align:center;
width: 180px;
font-size: 10px;
padding: 0;
margin:0;
height: 18px !important;
height: 18px;
line-height: 18px !important;
color: #4D5752;
border-top: solid 1px #999999;
border-bottom: none;
background: none #bbbbbb;
}
#droite #menu ul li a.ssmenu:hover{
color: #ffffff !important;
}
#droite #menu li.gpmenuUp a, #droite #menu li.gpmenuUp a:hover{
padding-left: 15px;
height: 25px;
line-height: 25px !important;
line-height: 24px;
color: #B2CC2F;
border: none;
background: url('../images/fl-menu-over2.gif') no-repeat #4D5752 7px center;
}
#droite #menu li.gpmenu a:hover{
background: url('../images/fl-menu-over2.gif') no-repeat #4D5752 7px center;
}
/*Modifs pour le menu tableau synthèse déroulé*/
#droite #menu li.gpmenufree {
padding-left: 15px;
width:165px;
height: 25px;
line-height: 25px !important;
line-height: 24px;
color: #B2CC2F;
border: none;
background: url('../images/fl-menu-over2.gif') no-repeat #4D5752 7px center;
}
#droite #menu li.gpmenuupfree {
padding-left: 15px;
width:165px;
height: 25px;
line-height: 25px !important;
line-height: 24px;
color: #B2CC2F;
border: none;
background: url('../images/fl-menu-over2.gif') no-repeat #4D5752 7px center;
}
#droite #menu li a.current{
padding-left: 15px;
height: 25px;
line-height: 25px !important;
line-height: 24px;
color: #B2CC2F;
border: none;
background: url('../images/fl-menu-current.gif') no-repeat #3A413E 7px center;
}
et un exemple de ce que cela donne : http://www.lbconseil.net/temp/test.html
(edit: ss mozilla la mise en page est nickel !)
J'espère vraiment qu'on puisse m'aider, je ne suis pas vraiment un débutant en CSS mais là j'avoue ne plus savoir quoi faire...
Cordialement,
JimmY.
Modifié par jimxx (08 Mar 2007 - 13:59)