Moteur de recherche google

Résolu
trickylola Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   -  
trickylola Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour, je viens de créer un moteur de recherche google pour mon site perso mais lorsque je l'intègre dans ma page, la fenêtre de recherche prend toute la largeur de l'écran.

Voici le code: 

<script>
  (function() {
    var cx = '002218182929357581679:wh3pn0_vkgy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>


quelqu'un peut-il me dire quoi modifier pour que la fenêtre soit plus petite?

Merci
A voir également:

1 réponse

Réponse 1 / 1
dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   1 452
 
Bonjour,

Tu peux créer une class dans ta feuille de styles, par exemple google et appliquer cette class à une div.

Par exemple : 

<div class="google">
<script>
  (function() {
    var cx = '002218182929357581679:wh3pn0_vkgy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>
</div> 



.google {
margin-left:auto;
margin-right:auto;
width:50%;
}
0
trickylola Messages postés 28 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour Dugenou et merci.
J'ai collé les deux codes que tu viens de mettre dans mon document html mais le résultat est identique.
Dois-je modifier une valeur dans ceux-ci ? De plus, je les ai placé à la suite dans le document. Aurais-je fait une erreur?
0
dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   1 452 > trickylola Messages postés 28 Date d'inscription   Statut Membre Dernière intervention  
 
Le code CSS est à mettre dans ta feuille de styles ou entre des balises <style>. 

.google {
margin-left:auto;
margin-right:auto;
width:50%;
}
0
trickylola Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   > dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention  
 
Génial, ça marche. Merci infiniment Dugenou. Pour finir, en espérant ne pas abuser, puis-je savoir quel code ajouter afin que la fenêtre de recherche se situe par exemple à gauche du site, ou a droite, ou plus haut, ou plus bas, car en cet instant précis, elle se situe au milieu alors même que j'ai ajouté la balise </center> au dessus du code que tu m'as donné :). Une balise qui ici, ne semble avoir aucun effet sur le positionnement de la fenêtre de recherche.
0
dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   1 452 > trickylola Messages postés 28 Date d'inscription   Statut Membre Dernière intervention  
 
Il ne faut pas utiliser la balise <center>, il faut jouer sur les marges (margin-left ou margin-right) pour positionner ton champs de recherche plus à droite ou plus à gauche.

Au pire, dans la balise <div> tu peux appliquer un style de cette manière : 

<div style="text-align: center;">


Pour les autres positions, c'est assez variable, ça dépend de la structure de ta page.
Pour faire simple, tu peux placer ton script et sa balise <div> à l'endroit de la page de ton choix, c'est à dire, en haut ou en bas. Si tu as créé une partie "footer", ça peut être un bon emplacement.
0
trickylola Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   > dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention  
 
Super, j'ai obtenu ce que je voulais et ce, grâce à toi.
MILLE MERCIS !!!

:)
0