Champs de recherche qui change de taille
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Champs de recherche qui change de taille
Bonjour
J'aime beaucoup le champs de recherche qui s'agrandit quand on clique dedans
comme ici, en haut à droite
comment peut-on avoir cela ?
merci
J'aime beaucoup le champs de recherche qui s'agrandit quand on clique dedans
comme ici, en haut à droite
comment peut-on avoir cela ?
merci
Dernière édition par Anya31 le Sam 22 Sep 2012 - 8:16, édité 1 fois
Re: Champs de recherche qui change de taille
Bonsoir, ceci est réalisé grâce à un code CSS, je vous conseille de vous renseigner sur la propriété « transition » ...
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Champs de recherche qui change de taille
bonjour
merci de cette piste
alors j'ai essayé 2-3 trucs, mais sans résultat...
dernière tentative :
sur ma page d’accueil (dans : PA/affichage/page d'accueil/généralité/message de la page d'accueil)
j'ai mis un petit tableau :
et dans la feuille CSS, j'ai mis :
Qu'est ce c'est qui ne va pas ?
merci
merci de cette piste
alors j'ai essayé 2-3 trucs, mais sans résultat...
dernière tentative :
sur ma page d’accueil (dans : PA/affichage/page d'accueil/généralité/message de la page d'accueil)
j'ai mis un petit tableau :
- Code:
<table width="70%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td><br />
<form action="/search.forum" method="get">
<div class="gensmall">
<input type="text" class="bginput" name="search_keywords" size="24" style="width:80px;" /> <input type="submit" class="button" value="Go" />
</td>
<td><br />
<input id="interne" type="radio" name="typerecherche" value="interne" checked="checked" /><label for="interne"> Forum Touslesloulous</label>
<input id="google" type="radio" name="typerecherche" value="google" /><label for="google"> <b><font color="#0039b6">G</font><font color="#c41200">o</font><font color="#f3c518">o</font><font color="#0039b6">g</font><font color="#30a72f">l</font><font color="#c41200">e</font></b></label><br /><br />
<a href="/search.forum"> Recherche avancée</a>
</div>
</form>
</td>
</tr>
</table><br />
et dans la feuille CSS, j'ai mis :
- Code:
.bginput {
-moz-transition-duration: 1s;
width: 150px;
}
Qu'est ce c'est qui ne va pas ?
merci
Re: Champs de recherche qui change de taille
Une transition se fait entre deux états, dans votre cas vous souhaitez faire une transtion de largeur selon que le visiteur donne le focus au champ de recherche ou pas (clique dans le champ ou pas), remplacez votre code par celui-ci:
- Code:
.bginput {
-moz-transition:width 1s;
-o-transition:width 1s;
-webkit-transition:width 1s;
-ms-transition:width 1s;
transition:width 1s;
width: 100px;
}
.bginput:focus{
width: 200px;
}
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Champs de recherche qui change de taille
Je me disais bien qu'il manquait des choses
merci beaucoup
je vais aller voir ce que ça donne
EDIT:
yeah ça marche !
en enlevant dans le code html plus haut la notion style="width:80px;
alors, tant qu'à y être:
- je voudrais mettre un fond blanc dans la zone de saisie...
- et : là la transition se fait vers la droite. Comment faire pour que ça aille vers la gauche ?
merci beaucoup
je vais aller voir ce que ça donne
EDIT:
yeah ça marche !
en enlevant dans le code html plus haut la notion style="width:80px;
alors, tant qu'à y être:
- je voudrais mettre un fond blanc dans la zone de saisie...
- et : là la transition se fait vers la droite. Comment faire pour que ça aille vers la gauche ?
Re: Champs de recherche qui change de taille
Pour la couleur de fond, il faut la spécifier avec la propriété "background-color", quand à la direction faite lors de la transition, celle-ci dépend du positionnement de votre champ de recherche, si vous le bloquez côté droit, la transition sera donc forcée d'opérer sur la gauche.
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Champs de recherche qui change de taille
oki
super !
merci
alors une petite question
j'ai mis :hover au lieu de :focus
y a-t-il un moyen en CSS de bloquer ce hover quand on fait un click dans le champs de recherche ?
Edit:
non, idiot!
il faut plutot que je revois la facon dont j'ai "conçu" mon espèce de tableau plutôt
super !
merci
alors une petite question
j'ai mis :hover au lieu de :focus
y a-t-il un moyen en CSS de bloquer ce hover quand on fait un click dans le champs de recherche ?
Edit:
non, idiot!
il faut plutot que je revois la facon dont j'ai "conçu" mon espèce de tableau plutôt
Re: Champs de recherche qui change de taille
De rien mais le but du focus est que la transition ait lieu que lorsque le visiteur clique dans le champ de recherche, n'était-ce pas ce que vous souhaitiez réaliser ?!?
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Champs de recherche qui change de taille
Si, c'est effectivement ce que je recherchais
mais j'explorai les "options''
en tout cas merci de m'avoir fait découvrir ces effets de transition sur des champs en CSS
Je mets en résolu
mais j'explorai les "options''
en tout cas merci de m'avoir fait découvrir ces effets de transition sur des champs en CSS
Je mets en résolu
Sujets similaires
» La taille du forum change tout seul
» Mettre une grande bannière qui ne change pas la taille des catégories ?
» Tri et recherche d'utilisateurs grâce aux champs de profil personnalisés
» Le choix de la taille des polices a changé. Il n'y a plus 7 et 9 !!!
» changé la taille de la police de la barre de navigation
» Mettre une grande bannière qui ne change pas la taille des catégories ?
» Tri et recherche d'utilisateurs grâce aux champs de profil personnalisés
» Le choix de la taille des polices a changé. Il n'y a plus 7 et 9 !!!
» changé la taille de la police de la barre de navigation
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum