Modification du bouton "Rechercher"

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modification du bouton "Rechercher"

Message par Zex le Dim 23 Juin 2013 - 4:33

Bonjour, deuxième post déjà (car on m'a dis de poster mes différents problèmes séparément). Je n'ai pas vraiment trouvé de solution qui s'applique a ce que je veut faire donc encore une ouverture!

Comme le nom l'indique je tente de m'attaquer au bouton "Rechercher" qui se trouve en haut a droite de mon forum.
Je voudrais premièrement espacer la case de recherche et le bouton de quelques pixel pour qu'il ne soient plus collé et également changer l'image du bouton de base qui me sort par les yeux. Est-ce possible? Si oui je vous remercie de vos futurs réponses!

A très vite.


Dernière édition par Zex le Dim 23 Juin 2013 - 15:12, édité 2 fois

Zex
*

Masculin
Messages : 39
Inscrit(e) le : 22/06/2013

http://damage.forumsactifs.com/
Zex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification du bouton "Rechercher"

Message par Matriochka le Dim 23 Juin 2013 - 12:23

Bonjour,

Alors, pour espacer le bouton on peut utiliser ceci dans le CSS :
Code:
div#search-box {margin-right:15px;}
15px étant à modifier selon ton envie.

Quant à l’image :
Code:
input.search {background-image:url(…);}
En remplaçant les points de suspension par l’image que tu veux Wink

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification du bouton "Rechercher"

Message par Zex le Dim 23 Juin 2013 - 12:44

Bonjour et merci de ta réponse, cependant cela ne fonctionne pas. J'ai rentré les lignes de code telle qu'elles sans succès que se soit pour l'espacement de la "search-box" ou son image de fond. J'ai essayé différentes possibilité en "px", pour l'image y a t-il une taille a respecter?

Code:
body {
   font-family: Devil Breeze Bold;
   color: #f0b100;
   background-color: #330000;
   background-attachment: scroll;
     background-repeat: no-repeat;
     background-position: center 0;
   font-size: 10px;
   padding: 10px 0px;
   }
.headerbar {
   background-color: #;
   background-image: url('http://illiweb.com/fa/empty.gif');
   margin-bottom: 0px;
   padding: 0pt 5px;
   background-repeat: repeat-x;
     height: 320px;
   }
div#main-content > p {
    display: none;
   }
div#search-box {margin-right:30px;}
input.search {background-image:url("http://i82.servimg.com/u/f82/18/37/26/40/bouton21.png");}

Voici ce qu'il y a dans ma feuille de style CSS. Toutes les autres lignes fonctionnent mais pas les deux que tu m'a donné.

Zex
*

Masculin
Messages : 39
Inscrit(e) le : 22/06/2013

http://damage.forumsactifs.com/
Zex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification du bouton "Rechercher"

Message par Matriochka le Dim 23 Juin 2013 - 12:52

Pour le premier code, je te l’ai fait espacer vers la gauche, tu voulais de haut en bas ?

Pour l’image :
Code:
#search-box input#keywords {background:transparent url("http://i82.servimg.com/u/f82/18/37/26/40/bouton21.png");}

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification du bouton "Rechercher"

Message par Zex le Dim 23 Juin 2013 - 14:30

Euh non c'est bien un espacement entre le bouton et la case donc en gros soit déplacer la case vert la gauche soit déplacer le bouton vers la droite. Mais ton code d'espacement ne fonctionne pas quelque soit la variante choisie (j'ai essayé de 5 à 150px).

De plus pour l'image ce n'est pas le fond de la case de saisie que je cherche a changer (même si sa peut m'intéresser) mais le fond du bouton (en gros le fond blanc trop moche). Voila merci encore de tes réponses.

Zex
*

Masculin
Messages : 39
Inscrit(e) le : 22/06/2013

http://damage.forumsactifs.com/
Zex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification du bouton "Rechercher"

Message par Matriochka le Dim 23 Juin 2013 - 14:36

Merci pour les précisions, je n’avais pas compris ça ainsi.

Pour l’espace :
Code:
#search-box input#keywords {margin-right:5px;}

L’image :
Code:
#search-box input.button2 {background:url(http://i82.servimg.com/u/f82/18/37/26/40/bouton21.png);}

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification du bouton "Rechercher"

Message par Zex le Dim 23 Juin 2013 - 15:06

C'est exactement ce que je recherche a faire merci et encore désolé du manque de précision de mon premier message. Sur ce a un prochain sujet surement car j'ai pas mal de choses encore a modifier! Very Happy

EDIT: Comme on sort pas du sujet de mon premier message (toujours sur bouton rechercher) est-ce que je peut poser une autre question ou alors faut-il que je la post dans un autre sujet?


Dernière édition par Zex le Dim 23 Juin 2013 - 15:13, édité 1 fois (Raison : ,?)

Zex
*

Masculin
Messages : 39
Inscrit(e) le : 22/06/2013

http://damage.forumsactifs.com/
Zex a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum