Déplacer les boutons du menu à droite

**Stéph utilisateur d'acces** · 09/07/2009, 19h22

Bonjour à tous

J ai insérer une barre de navigation sous mon footer, voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="navbar2">
<ul>
<li><a href="link1.html">Bouton 1</a></li>
<li><a href="link2.html ">Bouton 2</a></li>
<li><a href="link3.html ">Bouton 3</a></li></ul>
</div>

et voici le css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
/* Navigation */
div#navbar2 {
    height: 30px;
    width: 90%;
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    background-color:#03C;
}
div#navbar2 ul {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
}
div#navbar2 li {
    list-style-type: none;
    display: inline;
}
div#navbar2 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
}
div#navbar2 li a:link {
    color: #FFF:
}
div#navbar2 li a:visited {
    color: #CCC;
}
div#navbar2 li a:hover {
    font-weight: bold;
    color: #FFF;
    background-color: #3366FF;
}

mon problême est que les item du menu collent a gauche de ma barre.

Comment puije les déplacer un peu a droite?

merci car j ai essayer de jouer sur les padding left, mais rien a faire et je séche

steph

**Macmillenium** · 09/07/2009, 22h13

Bonsoir,

Tes <li> sont en display:inline, tu peux donc attribuer un text-align:right ou un padding-left: xxx au <ul> pour décaler un peu.

**Stéph utilisateur d'acces** · 10/07/2009, 07h44

merci Macmillenium

je regarde ça et je reviens vers toi.

bonne journée.

steph

**Stéph utilisateur d'acces** · 10/07/2009, 15h34

ok Macmillenium ça fonctionne bien avec le padding left.

Par contre j aurai voulu intégrer un form de recherche dans cette barre de navigation mais je n arrive pas à la placer, voici le code de ce form:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
  <form action="pages.php" method="post" name="recherche" >
    <div id="search">Chercher&nbsp;
        <input name="motcle" id="motcle" type="text"/>
        <input name="submit" type="submit" class="blue" value="OK" />
    </div>
  </form>

je pense avoir compris que le form est un élément block donc il se place sous ma barre de navigation, comment le mettre dedans à droite de mon menu précédent?

merci de cette dernière aide si tu peux.

steph

**Macmillenium** · 10/07/2009, 15h57

Envoyé par Stéph utilisateur d'acces

je pense avoir compris que le form est un élément block donc il se place sous ma barre de navigation

Oui, la plupart des navigateurs appliquent un display:block par défaut sur l'élément form (via une feuille de style par défaut).

Envoyé par Stéph utilisateur d'acces

comment le mettre dedans à droite de mon menu précédent?

Flotter le menu à gauche et le formulaire à droite :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
div#navbar2 {
    height: 30px;
    width: 90%;
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    background-color:#03C;
    overflow:hidden; /* permet à la div d'englober son contenu flottant */
}

div#navbar2 ul {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
    float:left;
}


div#navbar2 form {
    float:right;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="navbar2">
	<ul>
	<li><a href="link1.html">Bouton 1</a></li>
	<li><a href="link2.html ">Bouton 2</a></li>
	<li><a href="link3.html ">Bouton 3</a></li></ul>
 
  <form action="pages.php" method="post" name="recherche" >
    <div id="search">Chercher&nbsp;
        <input name="motcle" id="motcle" type="text"/>
        <input name="submit" type="submit" class="blue" value="OK" />
    </div>
  </form>
 
</div>

**Stéph utilisateur d'acces** · 10/07/2009, 17h51

bon

j ai fait tout ça mais j ai perdu mon form

je te mets le css complet que j ai intégré a mon html comme ça tu pourras voir direct la page.

mon souhait donc; mettre le form dans la barre de menu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<style type="text/css" title="css1" media="screen">
body {
	color: #F0E39E;
	background-color:#CCC;
padding: 10px 5px;
}
#global {
	width: 90%;
	max-width: 90em;
	min-width: 850px;
	margin-left: auto;
	margin-right: auto;
}
#entete {
	padding: 20px 0;
	background-color:#006;
	height:100px;
 
}
#entete  img {
	float: left;
	margin: 7px 20px 10px 0;
}
/* Navigation */
div#navbar2 {
    height: 30px;
 
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    background-color:#F00;
	overflow:hidden; /* permet à la div d'englober son contenu flottant */
}
 
 
div#navbar2 ul {
    margin: 0px;
    padding-left: 19%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
	div#navbar2 form {
    float:left;
}
	div#navbar2 form {
    float:right;
}
 
 
 
}
div#navbar2 li {
    list-style-type: none;
    display: inline;
	background-color:#009;
	padding-left:0px;
}
div#navbar2 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
}
div#navbar2 li a:link {
    color: #FFF:
}
div#navbar2 li a:visited {
    color: #CCC;
}
div#navbar2 li a:hover {
    font-weight: bold;
    color: #FFF;
    background-color: #3366FF;
}
 
 
</style>
 
<body>
 
<div id="global">
 
	<div id="entete"><img src="../images/logo_LCN_JPEG" alt="" width="295" height="87" /></div>
	<!-- #entete -->
 
<div id="navbar2">
<ul>
<li><a href="link1.html">Bouton 1</a></li>
<li><a href="link2.html ">Bouton 2</a></li>
<li><a href="link3.html ">Bouton 3</a></li></ul> 
 <form action="pages.php" method="post" name="recherche" >
    <div id="search">Chercher&nbsp;
        <input name="motcle" id="motcle" type="text"/>
        <input name="submit" type="submit" class="blue" value="OK" />
    </div>
  </form>
 
</div>
 
</body>
</html>

vraiment merci car les css ça peut rendre fou à force

steph

**Macmillenium** · 10/07/2009, 17h58

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
div#navbar2 ul {
    margin: 0px;
    padding-left: 19%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
	div#navbar2 form {
    float:left;
}
	div#navbar2 form {
    float:right;
}
 
 
 
}

Pourtant c'est bien marqué en rouge ! :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div#navbar2 ul {
    margin: 0px;
    padding-left: 19%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
	float:left;
}

div#navbar2 form {
    float:right;
}

**Stéph utilisateur d'acces** · 10/07/2009, 18h00

désolé Macmillenium

j em "étais planté dans mon code,

je le remets et ça a l air bon

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<style type="text/css" title="css1" media="screen">
body {
	color: #F0E39E;
	background-color:#CCC;
padding: 10px 5px;
}
#global {
	width: 90%;
	max-width: 90em;
	min-width: 850px;
	margin-left: auto;
	margin-right: auto;
}
#entete {
	padding: 20px 0;
	background-color:#006;
	height:100px;
 
}
#entete  img {
	float: left;
	margin: 7px 20px 10px 0;
}
/* Navigation */
div#navbar2 {
    height: 30px;
 
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    background-color:#F00;
	overflow:hidden; /* permet à la div d'englober son contenu flottant */
}
 
 
div#navbar2 ul {
    margin: 0px;
    padding-left: 19%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
	float:left;
}
 
	div#navbar2 form {
    float:right;
}
 
 
 
 
div#navbar2 li {
    list-style-type: none;
    display: inline;
	background-color:#009;
	padding-left:0px;
}
div#navbar2 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
}
div#navbar2 li a:link {
    color: #FFF:
}
div#navbar2 li a:visited {
    color: #CCC;
}
div#navbar2 li a:hover {
    font-weight: bold;
    color: #FFF;
    background-color: #3366FF;
}
 
 
</style>
 
<body>
 
<div id="global">
 
	<div id="entete"><img src="../images/logo_LCN_JPEG" alt="" width="295" height="87" /></div>
	<!-- #entete -->
 
<div id="navbar2">
<ul>
<li><a href="link1.html">Bouton 1</a></li>
<li><a href="link2.html ">Bouton 2</a></li>
<li><a href="link3.html ">Bouton 3</a></li></ul> 
 <form action="pages.php" method="post" name="recherche" >
    <div id="search">Chercher&nbsp;
        <input name="motcle" id="motcle" type="text"/>
        <input name="submit" type="submit" class="blue" value="OK" />
    </div>
  </form>
 
</div>
 
</body>
</html>

Si je voulais avoir un deuxième form de recherche à coté de l autre, je l écrit en html et il va se placer à coté de l autre? ( j ai une recherche par mot clés et une recherche sur la liste des produits)

mais c est déja sympa

steph