salut à tous je galère depuis 1 heure. Je suis en train de créer une barre de navigation rapide mais j'ai un problème. Du coté gauche de la barre tout va bien. Mais j'aimerais déplacer un élément à droite dans cette barre.
Voici la liste de base:
http://hapshack.com/images/UfZp.jpg
et quand j'essaie de mettre l'élément 5 à droite je galère
quand je mets l'attribut float sur l'élément 5 il n'y a plus de marge à droite et l'élément n'est plus sur la même ligne que les autres:
http://hapshack.com/images/BwQfW.jpg
j'ai essayé de créer une deuxieme liste mais elle refuse de s'incorporer à la première.
s'il vous plait quelqu'un saurait comment mettre l'élément 5 à droite dans la barre et qu'il soit sur la même ligne que les autres avec une légère marge ? merci d'avance

bah mets un margin-right sur celui qui float a droite

non tous les margin n'ont aucun effet sur lui

On peut avoir ton code CSS stp ? (et HTML par la même occasion)
wall.deblan.fr

biens sur
<div>
<ul id="navhaut">
<li><a href="">Exemple 1</a></li>
<li><a href="">Exemple 2</a></li>
<li><a href="">Exemple 3</a></li>
<li><a href="">Exemple 4</a></li>
<li><a href=""><img src="rss.png" alt="" id="" /></a></li>
<li><a href=""><img src="tw.png" alt="" id="" /></a></li>
<li><a href=""><img src="fb.jpeg" alt="" id="" /></a></li>
<li id="navdroite"><a href="">Exemple 5</a><img src="cale.gif" alt="" id="" /></li>
</ul>
</div>

body
{
background: green;
margin-top: 0px;
padding: 0px;
}

1. navhaut

{
display: block;
background: url('navhaut.jpg');
width: 100%;
height: 28px;
margin: 0px;
padding: 0px;
list-style-type: none;
width: 100%;
margin: 0px;
padding: 0px;
}

1. navhaut li

{
display: inline;
list-style-type: none;
vertical-align: middle;
margin: 0px;
padding: 0px;
}

1. navhaut li a

{
text-decoration: none;
font-size: 1em;
color: #969696;
margin-left: 20px;
}

1. navhaut li a:hover

{
text-decoration: none;
font-size: 1em;
color: #ffffff;
}

1. navdroite

{
font-weight: bold;
float: right;
}

la j'ai réussi à peu près à arriver où je voulais en mettant un gif transparent de 20*16px à droite de l'element 5 mais je me doute bien que cette methode n'est pas la bonne
de plus j'ai essayé d'ajouter d'autres icones que je n'arrive pas à caler correctement

http://hapshack.com/?v=jbZ2m.jpg

C'est normal que les margin ne soient pas pris en compte ;) Tu as un display: inline;

Mets :

display: inline-block;

Ainsi ça reste des blocs mais en inline Et tu pourras leur mettre des margin, width, height, ...

merci de ta réponse même si ça n'a pas résolu le problème je vais me contenter de gifs vierges.

C'est quand même pas bien compliqué... Surtout que ton CSS est rempli de code inutile !

• {margin: 0; padding: 0;}
• a, * a:hover {text-decoration: none;}

body {background: green;}

1. navhaut {background: url('navhaut.jpg'); width: 100%; height: 28px;}

1. navhaut li {display: inline; list-style-type: none; vertical-align: middle;}

1. navhaut li a {color: #969696;}

1. navhaut li a:hover {color: #ffffff;}

1. navdroite {font-weight: bold; display: inline-block; margin: 0 0 0 100px;}

<div>
<ul id="navhaut">
<li><a href="">Exemple 1</a></li>
<li><a href="">Exemple 2</a></li>
<li><a href="">Exemple 3</a></li>
<li><a href="">Exemple 4</a></li>
<li><a href=""><img src="rss.png" /></a></li>
<li><a href=""><img src="tw.png" /></a></li>
<li><a href=""><img src="fb.jpeg" /></a></li>
<li id="navdroite"><a href="">Exemple 5</a></li>
</ul>
</div>