Discussion :

[Invité]

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 :

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

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 :

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

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 :

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

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 !

[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

[Invité]

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

malheureusement ca n'a pas suffit car j'ai aucun changement :-(

[c_s_s]

Tu as une adresse pour voir la page ?

[Invité]

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 :

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

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 :

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

#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 :-)

[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 :

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

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

Soit tu utilises un raccourci :

Code :

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

background: #000 url(../../IMG/calques/moteur.png) no-repeat;