Barre recherche rapide

[godzlove]

Salut à tous, depuis quelques jours il m'est venu en tête de rajouter le même effet d'élargissement de l'input de la barre de recherche rapide en haut à droite de forum.formactif.com, pour cela j'ai rajouté le css suivant dans les css personnalisés :

Code:


#keywords
{
width:100px;
transition-property:width;
transition-duration:1s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
}

#keywords:focus
{
width:200px;
}


Mais aucun résultat... Quelqu'un aurait une solution ? merci d'avance

[Toad59]

Je pense en avoir une:

Code:

vous pouvez fairz:
envoyer un MP a un Adminactif
Lui demander de copier/coller le code ccs que le forum des forums a mis

!

Cordialement !

[godzlove]

en dernier recours ouai

[Toad59]

Ou sinon je pense qu'un adminactif vous dira directement le code css !

[godzlove]

ça serait sympa ouai

[Ea]

Bonjour,


Vous avez une barre de recherche rapide ? ( il y en a sur phpbb3 mais pas sur toutes les autres versions il me semble )

Sinon le code devrait fonctionner, et voici le format cours :

Code:

#keywords
{
width:100px;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition:width 1s;
transition:width 1s;
}
 
#keywords:focus
{
  width:200px;
}

Cordialement.

[godzlove]

Merci pour la réduction du code , j'ai effectivement phpbb3, mais le code ne marche pas, peut être parce que le input est à l'intérieur d'un div qui ne fait que 188px ? Ou alors à cause d'un mauvais réglage de l'application du css personnalisé ?

Voici l'adresse de mon forum :
http://team-ignis.pro-forum.fr/

[Ea]

Il faut mettre :

Code:

#search-box #keywords

Plutôt que :

Code:

#keywords

Il y a un :

Code:

#search-box #keywords{background-color:#b57547;width:95px}

Plus haut dans le css, et le width prend la priorité vu que 2 identifiants ça fait une priorité 0200 ( plus grand que 1 identifiant 0100 ).

Par contre ça m'a l'air de pas l'agrandir du bon côté =]

Cordialement.

ps : pour les priorités de sélecteurs css, il y a cette page assez utile : http://openweb.eu.org/articles/cascade_css

[godzlove]

Super, ça marche !

Merci beaucoup de l'aide efficace et rapide