[Résolu] Problème de mise en "form"

Après plusieurs essais, j'aimerais pour un site professionnel, insérez un moteur de recherche tout simple comme celui réalisé sur la page d'accueil d'apple.

Comme vous pouvez le voir, j'ai laissé une illustration de ce qu'est le moteur de recherche apple et celle juste en dessous de l'entreprise pour qui je travaille.

Jusque là, au niveau de l'apparence, tout va bien, en revanche, lors de l'affichage, j'ai un soucis qui me surprend, vous remarquerez que l'arrondi qui devait se trouver à droite après mon champs de texte, au final se retrouve dessous.

Voici ma syntaxe
html :

<div id="recherche">
      <div id="search_global">
            <div class="form_left"></div>
                 <form action="lien.html">
                     <input name="q"type="text" class="form" id="q" value="recherche" size="14" />
                </form>
            <div class="form_right"></div>

CSS :

#search_global
{
	width:140px;
	height:20px;
	float:right;
	margin-right: 20px;
}

form 
{
	height:20px;
	width: auto;
}

.form_left
{
	float:left;
	background:url(css/themes/img/left_form.gif)top left;
	width:17px;
	height:20px;
}

.form_right
{
	float:right;
        background:url(css/themes/img/right_form.gif) top right;
	width:9px;
	height:20px;
}

input
{
	background:url(css/themes/img/bg_form.gif) repeat-x;
	font-size:11px;
	color:#fff;
	width:auto;
	height:20px;
	border:0;
	margin-left:auto;
	margin-right:auto;
}

Merci d'avoir pris le temps de me lire
Modifié par gensou (11 Sep 2009 - 15:09)

Salut, il n'y as pas d'images donc difficile de t'aider .

Sinon j'ai l'impression que tu veux faire des coins arrondis et que le coin n'est pas à sa place. Tu peux utiliser des valeurs négatives en marge si ton formulaire est fixe, sinon mettre la div qui englobe tes coins en position:relative et tes coins en position:absolute. Tu les positionnes alors en top:0px;right:0px et bottom:0px;right:0px. En retirant bien sûr les float:left et right en place

En attendant ton image je n'ai que ça à te proposer ^^
Modifié par N-J (09 Sep 2009 - 17:09)

Tout d'abord merci d'avoir répondu si vite

Pourquoi n'y ai-je pas penser plus tôt, je sais pas si c'est parceque je broutte du css toute la journée, mais en attendant ta solution est efficace avec firefox, bon pas trop avec IE, mais bon tout le monde sait ce que je pense de lui...je le met bien profond dans..BIIIP

Merci encore N-J

Salut

gensou a écrit :
j'aimerais pour un site professionnel

gensou a écrit :
ta solution est efficace avec firefox, bon pas trop avec IE, mais bon tout le monde sait ce que je pense de lui...je le met bien profond dans..BIIIP

Ha oui ? Même pour un site soit disant professionnel ?

Non je plaisantais, je sais que IE est encore utilisé à 35%, donc je vais devoir faire marcher mes neurones pour que l'affichage se face correctement pour tous...

Je retouche ce matin et je vous tiens au courant...

Finalement j'ai opté pour autre chose de plus simple et qui fonctionne parfaitement pour tous les naviguateurs, tant pis pour les arrondis sur le côté.

HTML :

<form action="lien.html">
    <input type="text" class="form" value="Rechercher" />
</form> 

CSS :

form {
	background:url(css/themes/img/form_leurre.gif);
	height:20px;
	width: 144px;
	margin-left: 140px;
}


input
{
	background:url(css/themes/img/bg_form.gif) repeat-x;
        border: 0;
	width:118px;
	height:20px;
	margin-left: 17px;
}

c'est tricher je sais, mais bon...
Merci pour vos réponses ^^

Je reviens une nouvelle fois demander votre avis, concernant toujours la balise <form>
mais pour modifier l'apparence du <select>.

Question, peux-t'on modifier la flèche du <select> qui fait dérouler les <option> ?

Merci encore de prendre de votre temps pour me répondre

Bonjour,

C'est impossible en CSS.

Cependant il existe des solutions à base de JS pour le faire.

Je viens de faire une recherche sur mon ami google
et je suis tombé sur ce topic pour ceux qui sont intéressés...http://forum.alsacreations.com/topic-4-38710-1-Masquer-la-fleche-du-menu-deroulant-dun-SELECT-en-CSS.html

Merci pour votre réponse