28173 sujets

CSS et mise en forme, CSS3

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 Smiley fache . 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 Smiley bawling

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&amp;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&amp;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)
Pour simplifier le css, juste avec ça :

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;
}


http://www.lbconseil.net/temp/test.html
le problème est toujours là,la seconde liste se met par dessus la 1ere ce qui rend le menu illisible Smiley decu
Modifié par jimxx (08 Mar 2007 - 11:23)