Menu de bas de page qui ne s'aligne pas
Résolu
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.
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.
Configuration: Windows Vista Internet Explorer 7.0 Firefox
3 réponses
-
ta pas un lien vers la page en question parceque la on sait pas de quel menu il sagi
-
C'est juste une maquéte donc j'ai pas de lien. Désolé c'est vrai, j'ai pas présisé pour quel menu. C'est pour le menu #ls_menu2.
-
Bonjour,
J'ai résolu le probléme que j'avais pour mon menu grâce a un tuto que j'ai trouver sur Alsacreations.
Merci pour vos réponses.
Bonne journée.
