Login form horizontal

[BerBiX]

Bonjour,

Je souhaiterais créer un entête à mon site contenant une navigation bar avec les menus "signin : ", "signup", "help", "about".

"signin" est juste un label et je voudrais positionner un form "login", "password", "submit" horizontal juste après.

Tout ceci doit être positionné horizontalement sur une zone gris clair. Cf. le fichier en pièce jointe.

Le résultat que j'obtiens pour l'instant est en pièce jointe. Je n'arrive pas à obtenir que tout soit aligné horizontalement. Je précise que je suis novice dans tout ce qui touche au développement web et aux css.

Est-ce que quelqu'un serait susceptible de m'aider ? D'avance merci.

Voici mon code html (c'est du rails donc .html.erb) :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<nav class="header_nav">	
	<ul>
	    <li>
	        Signin :
	    </li>
	    <%= form_for(:session, :url => sessions_path) do |f| %>
	        <li>
		    <div class="field">
	                <%= f.label :email %>
			    <%= f.text_field :email, :style=>'width: 100px'%>
		    </div>
		</li>
		<li>
		    <div class="field">
	                <%= f.label :password, :style=>'margin-left: 5px' %>
			<%= f.password_field :password, :style=>'width: 100px' %>
		    </div>
		</li>
		<li>
		    <div class="actions">
		        <%= f.submit "GO" %>
	            </div>
		</li>
	    <% end %>
	    <li>
	        <%= link_to "Signup", signup_path %></p>
	    </li>
	    <li><%= link_to "Help", help_path %></li>
	    <li><%= link_to "About", about_path %></li>
    </ul>
</nav>

et mon code css :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
NAV
{
	background-color: #797979;
	padding: 0 0.7em;
	white-space: nowrap;
	margin-bottom: 0;
	height: 100px;
}
NAV.header_nav {
	background-color: #dddddd;
	margin-bottom: 20px;
	text-align: right;
	height: 25px;
}
NAV UL
{
	margin: 0;
	padding: 0;
}
NAV UL LI
{
	list-style-type: none;
	display: inline-block;
	padding: 0.2em 0;
}
NAV A
{
	padding: 0 5px;
	font-weight: bold;
	color: #09C;;
}
NAV A:hover
{
	text-decoration: underline;
	color: #09C;
}