champ texte (form) avec background-image

Version imprimable

Bonjour à tous,

Je suis débutant en CSS et je n'arrive pas coder un champ de formulaire (moteur de recherche) avec une image rectangulaire en arrière-plan (+ idéalement une autre en survol) qui vient envelopper ce champ et son bouton OK.

Le code de mon formulaire (fonctionne) :
Code:

1 2 3 4 5 6 7 <div id="champ_recherche"> <form action="/spip.php?page=recherche" method="get"> <input type="text" name="recherche" id="moteur" alt="Recherche" class="Recherche" value="Recherche" /> <input name='page' value='recherche' type='hidden' /> <input type="submit" value=" ok " /> </form> </div>
CSS :

1ere alternative :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 #champ_recherche { background-image: url(../../IMG/calques/moteur.png) no-repeat!important; } #champ_recherche hover { background-image: url(../../IMG/calques/moteur-rollover.png) no-repeat!important; } #champ_recherche input[type=texte] { width: 150px; } #champ_recherche input[type=submit] { width: 30px; }
ou :

2eme alternative :

Juste :
Code:

1 2 3 4 5 6 7 8 9 #champ_recherche form {background-image: url(../../IMG/calques/moteur-rollover.png) no-repeat!important; } #champ_recherche input[type=texte] { width: 150px; } #champ_recherche input[type=submit] { width: 30px; }
Aucune de ces 2 alternatives ne fonctionne... :-(

A L'AIDE SVP ... MERCI !

02/10/2010, 10h11
c_s_s

Bonjour,

Il faut laisser un espace avant !important

Sinon, pour changer l'état au survol de la souris, on utilise la pseudo-classe :hover, ce qui donne :

#champ_recherche:hover et pas #champ_recherche hover
02/10/2010, 10h19
Invité

ok je te remercie, c'est déjà çà de corriger !

malheureusement ca n'a pas suffit car j'ai aucun changement :-(
02/10/2010, 12h08
c_s_s

Tu as une adresse pour voir la page ?

salut c-s-s,

voici :
- ce que j'ai actuellement avec le code ci-dessous : http://cjoint.com/data/kcmoyBUkk4.htm
- ce que je voudrais avoir (maquette graphique) : http://cjoint.com/data/kcmrgn42Mt.htm (avec l'image moteur.png)

Code actuel :

Code:

1
2
3
4
5
<div id="menu_haut"> (5 premiers boutons ok...)
<div id="champ_recherche">
<form action="/spip.php?page=recherche" method="get"><input type="text" name="recherche" id="moteur" alt="Recherche" class="Recherche" value="Recherche" /><input name='page' value='recherche' type='hidden' /><input type="submit" value="ok" /></form>
</div>
</div>

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
38

#menu_haut {
width: 784px;
position: absolute;
left: 206px;
top:40px;
}

#champ_recherche {
background-image: url(../../IMG/calques/moteur.png) no-repeat !important;
width: 185px;	
height : 46px;
float:right;
background-color:#000;
border-top-right-radius:10px;
-moz-border-radius-topright :10px;
-webkit-border-top-right-radius:10px;
border-bottom-right-radius:10px;
-moz-border-radius-bottomright :10px;
-webkit-border-bottom-right-radius:10px;
}

#champ_recherche:hover {
background-image: url(../../IMG/calques/moteur-rollover.png) no-repeat !important;	
width: 185px;	
height : 46px;
float:right;
}

#champ_recherche input[type=text] {
margin: 15px 5px 5px 10px;
width: 130px;
height : 10px;
}
#champ_recherche input[type=submit] {
width: 30px;
}

ce qui est en bleu est évidemment provisoire dans l'attente de pouvoir appliquer l'image de fond moteur.png (et moteur-rollover.png en survol).

MERCI POUR TON AIDE :-)

02/10/2010, 13h23
c_s_s
Le propriété background-image sert à afficher une image, tu ne peux pas définir de répétition dans cette prorpriété.

Soit tu écris :
Code:

1 2 3 background-image: url(../../IMG/calques/moteur.png); background-repeat: no-repeat; background-color:#000;
Soit tu utilises un raccourci :

Code:

background: #000 url(../../IMG/calques/moteur.png) no-repeat;
02/10/2010, 13h44
Invité

Bien vu ... merci beaucoup à toi !

Question subsidiaire : si je veux mettre le petit gif "loupe" à la place du bouton OK, comment dois-je faire ?

Encore merci.
02/10/2010, 21h57
Bovino

Tu peux utiliser un input de type image à la place du submit en lui ajoutant un attribut src.