Deplacer menu horizontal a droite

Fermé
djodjo - 12 nov. 2010 à 16:39
 bimo - 17 oct. 2022 à 15:47
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;
}
A voir également:

11 réponses

jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
Modifié par jalalnet le 12/11/2010 à 17:14
tu met tout le contenu du menu dans un div
<div id="menu"> 
----Element-------- 
</div> 

puis tu place la div en CSS comme tu veut
1
c'est ce que j'ai fait justement avant de poster, mais je bug...
0
jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
12 nov. 2010 à 20:36
normalement si tous le contenu du menu dedans un div tu peut la positionné avec position:absoltute
position: absolute;
right: 10px;


non ,pas avec text-align
0

ça marche merci

0
ca ne marche toujours pas : avec tes conseils, la barre prend toute la largeur de la page.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
13 nov. 2010 à 12:30
tu peut met le bout du code du menu avec le CSS qui tu utilise
0
Je ne vois pas ce que tu me demande de faire
0
jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
13 nov. 2010 à 14:45
met le code html du menu
0
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>
0
jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
13 nov. 2010 à 17:07
dsl j'arrive pas ça me grave, faux que je le reprend a 0,seulement je suis occupé pour le moment !!
0
<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>
0
Dans CSS, tu vas sur l'élément que tu veux mettre à droite (ex. div) et tu fais:

div {
float : right
}

Ca va te mettre tout ton contenu qui se trouve dans cet élément(div) à droite "en flottant", c'est à dire sans écraser chaque partie de ton menu par exemple.
0
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
7 mai 2014 à 11:39
Heu ... le post est de 2010 ! j'espere qu'il a trouvé une solution depuis :)
0