Deplacer menu horizontal a droite

Question

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;
}

jalalnet · Answer

tu met tout le contenu du menu dans un div puis tu place la div en CSS comme tu veut

djodjo · Answer

c'est ce que j'ai fait justement avant de poster, mais je bug...

jalalnet · Answer

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

djodjo · Answer

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

jalalnet · Answer

tu peut met le bout du code du menu avec le CSS qui tu utilise

djodjo · Answer

Je ne vois pas ce que tu me demande de faire

jalalnet · Answer

met le code html du menu

djodjo · Answer

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>

jalalnet · Answer

dsl j'arrive pas ça me grave, faux que je le reprend a 0,seulement  je suis occupé pour le moment !!

aghilas · Answer

<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>

queenvickie · Answer

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.

Deplacer menu horizontal a droite

11 réponses

Discussions similaires

Newsletters