Deplacer menu horizontal a droite
djodjo
-
bimo -
bimo -
Bonjour,
Je debute en creation de site et je bloque a mon menu horizontal : tout est nickel, sauf que j'aimerais deplacer mon menu a droite (de maniere a ce que tous les titres des menus soit à droite de ma page) ; là, pas moyen d'y arriver, il reste coller à gauche.
Avez-vous une solution ?
Merci.
Mon CSS :
-------------------------------------------------------------------------------------------------------------------
body
{
background-color: #b1d2fb;
}
#container
{
width: 900px;
margin: 10px auto;
background-color: #ffffff;
color: #333;
line-height: 130%;
border : 1px solid;
border-color: #d5d5d5;
}
a:link, a:visited
{
color:#c02976;
}
a:hover
{
color:#ff0082;
}
h1
{
text-indent: -50000px;
}
#logo
{
background: url("images/logo.png") no-repeat;
position: absolute;
width: 234px;
height: 146px;
}
#en_tete {
border-bottom: 1px solid gray;
padding: .5em;
background: url("images/banniere.jpg") no-repeat;
width: 884px;
height: 130px;
}
#en_tete h1
{
margin: 0;
padding: 0;
}
#banniere1
{
position: absolute;
top: 40px;
left: 790px;
}
#menu_horizontal
{
width: 100%;
background-color: #424242;
}
#menu_horizontal ul
{
margin: 0; padding: 0;
float: left;
}
#menu_horizontal ul li
{
display: inline;
}
#menu_horizontal ul li a
{
float: left;
text-decoration: none;
color: white;
padding: 8.5px 9px;
background-color: #424242;
}
#menu_horizontal ul li a:visited
{
color: white;
}
#menu_horizontal ul li a:hover, .menu ul li .current
{
color: #fff;
background-color:#c756a4;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 5px;
}
#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 5px;
}
.menu
{
background-color: #f7f7f7;
border-style: solid;
border-width: 1px;
border-color: #d5d5d5;
margin-bottom: 5px;
}
.menu h3
{
margin: 2px;
height:29px;
background:url("images/menu.png") no-repeat;
line-height:29px;
color:#FFF;
font-size:16px;
text-transform:uppercase;
text-align:center;
}
.menu ul
{
padding-left: 18px;
list-style-type: none;
}
#content
{
margin-left: 165px;
margin-right: 165px;
padding: 5px;
}
.bloc_corps
{
background-color: #f7f7f7;
border-style: solid;
border-width: 1px;
border-color: #d5d5d5;
margin-bottom: 5px;
}
#footer
{
background: url("images/pied.jpg") no-repeat;
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #fdc3eb;
border-top: 1px solid gray;
}
#leftnav p, #rightnav p
{
margin: 0 0 1em 0;
}
#content h2, #footer p
{
margin: 0 0 .5em 0;
}
Je debute en creation de site et je bloque a mon menu horizontal : tout est nickel, sauf que j'aimerais deplacer mon menu a droite (de maniere a ce que tous les titres des menus soit à droite de ma page) ; là, pas moyen d'y arriver, il reste coller à gauche.
Avez-vous une solution ?
Merci.
Mon CSS :
-------------------------------------------------------------------------------------------------------------------
body
{
background-color: #b1d2fb;
}
#container
{
width: 900px;
margin: 10px auto;
background-color: #ffffff;
color: #333;
line-height: 130%;
border : 1px solid;
border-color: #d5d5d5;
}
a:link, a:visited
{
color:#c02976;
}
a:hover
{
color:#ff0082;
}
h1
{
text-indent: -50000px;
}
#logo
{
background: url("images/logo.png") no-repeat;
position: absolute;
width: 234px;
height: 146px;
}
#en_tete {
border-bottom: 1px solid gray;
padding: .5em;
background: url("images/banniere.jpg") no-repeat;
width: 884px;
height: 130px;
}
#en_tete h1
{
margin: 0;
padding: 0;
}
#banniere1
{
position: absolute;
top: 40px;
left: 790px;
}
#menu_horizontal
{
width: 100%;
background-color: #424242;
}
#menu_horizontal ul
{
margin: 0; padding: 0;
float: left;
}
#menu_horizontal ul li
{
display: inline;
}
#menu_horizontal ul li a
{
float: left;
text-decoration: none;
color: white;
padding: 8.5px 9px;
background-color: #424242;
}
#menu_horizontal ul li a:visited
{
color: white;
}
#menu_horizontal ul li a:hover, .menu ul li .current
{
color: #fff;
background-color:#c756a4;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 5px;
}
#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 5px;
}
.menu
{
background-color: #f7f7f7;
border-style: solid;
border-width: 1px;
border-color: #d5d5d5;
margin-bottom: 5px;
}
.menu h3
{
margin: 2px;
height:29px;
background:url("images/menu.png") no-repeat;
line-height:29px;
color:#FFF;
font-size:16px;
text-transform:uppercase;
text-align:center;
}
.menu ul
{
padding-left: 18px;
list-style-type: none;
}
#content
{
margin-left: 165px;
margin-right: 165px;
padding: 5px;
}
.bloc_corps
{
background-color: #f7f7f7;
border-style: solid;
border-width: 1px;
border-color: #d5d5d5;
margin-bottom: 5px;
}
#footer
{
background: url("images/pied.jpg") no-repeat;
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #fdc3eb;
border-top: 1px solid gray;
}
#leftnav p, #rightnav p
{
margin: 0 0 1em 0;
}
#content h2, #footer p
{
margin: 0 0 .5em 0;
}
A voir également:
- Deplacer menu horizontal a droite
- Déplacer colonne excel - Guide
- Menu déroulant excel - Guide
- Windows 11 déplacer la barre des taches à droite - Guide
- Les textes ne doivent pas être en retrait à droite et à gauche - Guide
- Barre droite mac ✓ - Forum MacOS
11 réponses
tu met tout le contenu du menu dans un div
puis tu place la div en CSS comme tu veut
<div id="menu"> ----Element-------- </div>
puis tu place la div en CSS comme tu veut
normalement si tous le contenu du menu dedans un div tu peut la positionné avec position:absoltute
non ,pas avec text-align
position: absolute; right: 10px;
non ,pas avec text-align
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Le voici :
<div id="menu_horizontal">
<ul>
<li><a href="#">JOUETS</a></li>
<li><a href="#">ELECTRICITE</a></li>
<li><a href="#">JARDIN</a></li>
<li><a href="#">ANNUAIRE</a></li>
</ul>
<br style="clear:left"/>
</div>
<div id="menu_horizontal">
<ul>
<li><a href="#">JOUETS</a></li>
<li><a href="#">ELECTRICITE</a></li>
<li><a href="#">JARDIN</a></li>
<li><a href="#">ANNUAIRE</a></li>
</ul>
<br style="clear:left"/>
</div>
<div id="menu_horizontal">
<ul>
<li><a href="#">JOUETS</a></li>
<li><a href="#">ELECTRICITE</a></li>
<li><a href="#">JARDIN</a></li>
<li><a href="#">ANNUAIRE</a></li>
</ul>
<br style="clear:Right"/>
</div>
<ul>
<li><a href="#">JOUETS</a></li>
<li><a href="#">ELECTRICITE</a></li>
<li><a href="#">JARDIN</a></li>
<li><a href="#">ANNUAIRE</a></li>
</ul>
<br style="clear:Right"/>
</div>