Problème: Barre de recherche dans menu horizontal.

Bonjour à tous,

Je suis débutant en HTML/CSS et j'ai réussis à faire mon menu horizontal et à le styliser comme je voulais:
http://s29.postimg.org/c9s31satz/photo_1.png

Mais lorsque je zoom sur Firefox (CTRL + Molette), le menu se déforme:
http://s29.postimg.org/kgk2td0wn/photo_2.png

De plus, sur Google Chrome, l'espace après la barre de recherche est plus grand:
http://s29.postimg.org/z115o6vvb/photo_3.png

J'ai placé la barre de recherche comme élément de mon menu horizontal (<li>). J'ai tenté de placé ma barre de recherche en positionnement absolu mais ça ne marche pas très bien sur tous les navigateurs, de plus ça fait buggé la petite ligne que j'ai placé sous le menu.

Voici mon code HTML:

<nav>
				<ul id="menu">
				<li><a href="#">Accueil</a></li>
				<li><a href="#">Créer un thème</a></li>
				<li><a href="#">Statistiques<img src="images/fleche_stats.png" alt="Flêche Statistiques" id="fleche_stats" /> </a></li>
				<li><a href="#">Messages au hasard</a></li>
				<li><a href="#">À propos</a></li>
				<li><form method="post" action="include/form.php">
						<input type="text" id="champs_recherche" name="Recherche" placeholder="Rechercher un thème..." />
						<input type="submit" id="bouton_recherche" value="" />
					</form>
				</li>
				</ul>
				
			</nav>

Et mon code CSS:

#champs_recherche
{
	margin-top: 4px;
	margin-left: 185px;
	width: 230px;
	border: 1px black solid;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	background: url('./images/loupe.png') no-repeat 238px 2px white;
	padding-left: 4px;
	padding-right: 20px;
	box-shadow: 1px -1px 3px -1px inset;
}

#bouton_recherche
{
	margin-bottom: 2px;
	margin-left: -22px;
	background: transparent;
	border: none;
	cursor: pointer;
}

Voila je ne m'y connais pas très bien, si vous avez besoins d'autres éléments de mon code pour comprendre ce qui ne va pas faites le moi savoir.

Merci.

Bonjour, votre site est en ligne on peu avoir le lien ?

Bonjour,

Non désolé il n'est pas encore en ligne.

Bonjour,

Tu peux utiliser quelques solutions en ligne qui sont forts pratiques :
Dabblet, jsFiddle, jsBin ou encore CodePen pour ne citer que les plus célèbres.
Et reproduire uniquement la partie de code qui pose souci

Merci pour l'info, je ne connaissais pas.

Voici sur Dabblet: http://dabblet.com/gist/d4c0e157b33ca70069c7

Il y a juste le menu, ma loupe dans la barre de recherche et le petit triangle à coté de "Statistiques" qui ont disparu mais je pense que ce n'est pas très grave pour la compréhension du problème.

Par contre je ne comprend pas pourquoi mais la barre qui était sous le menu est maintenant au-dessus et pousse le menu si je la descend.
Modifié par Tommyisk4 (07 Oct 2014 - 14:36)