Bonjour,
J'ai trouver pour faire mon menu déroulant et maintenant j'ai un soucis avec un autre menu (enfin pour le copyright). J'arrive à centrer le menu dans la page mais les deux titre ne s'aligne pas ils se mettent l'une au-desss de l'autre.
Voici mon code css:
*
{
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 le 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>
Merci d'avnce si vous trouvé le probléme.
Afficher la suite
