Bonjour,
Désolé pour le cod, je savait pas comment faire.
En faite mon menu se trouve en bas de la page mais centrée, pour le centré, pas de soucis, le soucis, c'est que le menu qui devait être horizontal, se trouve vertical.
Voici le code css complet:
*
{
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
border:none;
}
body
{
}
#ls_principal
{
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: left;
min-height: 500px;
position: relative;
}
/*#ls_logo
{
background: lime;
width: 160px;
height: 100px;
float:left;
}*/
/*#ls_pub
{
background: #ccc;
width: 580px;
height: 100px;
float:left;
}*/
/*#ls_déconexion
{
background: green;
left: 875px;
width: 160px;
height: 100px;
float:left;
}*/
/*#ls_corps
{
background: white;
width: 100%;
height: 100px;
min-height: 350px;
}*/
#ls_menu
{
margin: 0;
padding: 0;
list-style: none;
height: 184px;
font-family:verdana;
font-size:10px;
}
#ls_menu li
{
float: left;
}
#ls_menu a
{
display: block;
padding: 4px 10px;
color: #0075b5;
width:125px;
background:url(../découp/menu_haut.png) no-repeat;
}
#ls_menu a:hover
{
display: block;
padding: 4px 10px;
color: #f68220;
width:125px;
background:url(../découp/menu_haut.png) no-repeat;
}
#ls_menu1
{
margin: 0;
padding: 0;
font-size:11px;
list-style: none;
height: 184px;
}
#ls_menu1 a
{
display: block;
width: 125px;
height: 25px;
padding: 4px 10px;
color: #f68220;
font-size: 11px;
background: url(../découp/menu_colonne.png) no-repeat;
margin: 0 3px;
text-decoration: none;
text-align: center;
}
#ls_menu1 a:hover
{
display: block;
color: #0075b5;
width: 125px;
background:url(../découp/menu_colonne.png) no-repeat;
}
#ls_menu1 .submenu
{
margin: 0;
padding: 0;
list-style: none;
font-size: 8px;
}
#ls_menu1 .submenu a
{
background: none;
padding: 4px 10px;
color: #0075b5;
background:url(../découp/sous_menu_colonne.png) no-repeat;
}
#ls_menu1 .submenu a:hover
{
display: block;
color: #f68220;
width: 125px;
background:url(../découp/sous_menu_colonne.png) no-repeat;
}
#ls_menu1 .submenu2
{
font-size: 8px;
margin: 0;
padding: 0;
list-style: none;
}
#ls_menu1 .submenu2 a
{
background: none;
padding: 4px 10px;
color: #0075b5;
background:url(../découp/sous_menu_colonne_bas.png) no-repeat;
}
#ls_menu1 .submenu2 a:hover
{
display: block;
color: #f68220;
width: 125px;
/*background:url(../découp/sous_menu_colonne_bas.png) no-repeat;*/
}
#ls_menu2
{
margin-left: auto;
margin-right: auto;
padding: 0;
width: 110px;
height: 184px;
list-style: none;
}
#ls_menu2 li
{
float: left;
}
#ls_menu2 a
{
display: block;
padding: 4px 10px;
color: #0075b5;
width:110px;
/* background:url(../découp/menu_haut.png) no-repeat;*/
text-align: center;
font-size:9px;
}
#ls_menu2 a:hover
{
display: block;
padding: 4px 10px;
color: #f68220;
width:125px;
/* background:url(../découp/menu_haut.png) no-repeat;*/
}
/*#ls_contenu
{
background: maroon;
width: 740px;
height: 100%;
float:left;
}*/
/*#ls_mention
{
background: silver;
width: 160px;
height: 50px;
min-height: 50px;
float:left;
}*/
/*#ls_etape
{
background: yellow;
width: 740px;
height: 50px;
float:left;
}*/
Et mon code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
<link href="css/test.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div id="ls_principal">
<div style="height:25px; background: url(découp/barre_haut.jpg) no-repeat;">
<div style="position:absolute; top:3px; left:877px;"><a href=="aaa" title="Langue"><img src="découp/FR.png" alt=""/></a></div>
</div>
<div style="height:151px; background:#fff url(découp/bandeau.png) no-repeat; position: relative;">
<div style="position:absolute; top:5px; left:10px;"><a href=="aaa" title=""><img src="découp/logo.png" /></a></div>
<div style="position: absolute; top:88px; left:557px; ">
<ul id="ls_menu">
<li><a href="">Support commercial</a></li>
<li><a href="">Support technique</a></li>
</ul>
</div>
<div style="position: absolute; top:75px; left:830px;"><a href=""><img src="découp/aide.png"></a></div>
</div>
<table cellpadding="0" cellspacing="0" style="border:0px solid #000; width:900px;">
<tr>
<td rowspan="2" style="width:85px; vertical-align:top; background:url(découp/marge_gauche_suite.png) repeat-y;">
<table cellpadding="0" cellspacing="0" style="border:0px solid #000; width:85px;">
<tr>
<td style="width:85px; height:280px; background: url(découp/marge_gauche.png) no-repeat; "> </td>
</tr>
<tr>
<td style="width:85px; height:*;"> </td>
</tr>
</table>
</td>
<td style=" width:165px; height:184px; background:url(découp/menu_fond.png) no-repeat; vertical-align: top; ">
<ul id="ls_menu1">
<li><a href="" title="Mes envois">Mes envois</a></li>
<ul class="submenu">
<li><a href="dema.html" title="Création">Envoyer</a></li>
<li><a href="suivre.html" title="Suivre">Suivre</a></li>
<ul class="submenu2">
<li><a href=""> </a></li>
</ul>
</ul>
<li><a href="consulter.html" title="Consulter">Consulter</a></li>
<li><a href="tarifs.html" title="Tarifs">Tarifs</a></li>
<li><a href="question.html" title="Questions fréquentes">Questions</a></li>
</ul>
</td>
<td rowspan="2"> </td>
</tr>
<tr>
<td style="width:165px; height:184px;"> </td>
</tr>
</table>
<div style="margin-left:auto; margin-right:auto; width:833px; height:38px; background:url(découp/barre_copyright.png) no-repeat;">
<ul id="ls_menu2">
<li><a href="">Logo</a></li>
<li><a href="">Mentions Legal</a></li>
</ul>
</div>
</div>
</body>
</html>
Voilà mais code, pour le moment c'est une maquéte, sur Firefox tout fontionne sauf le menu du pas qui ne s'aligne pas, par contre sur IE, le menu de gauche ne fonctionne pas correctement et le menu du bas ne s'aligne pas non plus.
Merci d'avance pour vos réponse, je continue à tester des choses.
Bonne journée à tous.
