Bienvenue sur le forum d'entraide d'OverBlog.
Nous vous conseillons de chercher une réponse sur notre base de connaissances avant de poster une demande sur le forum.
[RÉSOLU] Module "recherche" à positionner en premier plan du menu horizontal
  • http://www.regardactu.com/
    Bonjour,
    Suite à la mise en place d'une bannière personnalisée, j'aimerais changer la position du module recherche actuellement en haut à droite du header

    Si je le fais descendre tout simplement en bas du header à droite au niveau du menu horizontal il se trouve en arrière plan du dit menu

    Par la suite si je fais évoluer mon menu celui ci se retrouvera caché sous le module recherche, j'aimerais donc l'intégrer carrément dans le menu ... Est-ce possible ?
    Mais dans un premier temps le faire passer en premier plan me conviendrait largement ...
    Merci d'avance

  • Tu as dû le retirer, je ne vois pas de fenêtre Recherche dans ton en-tête.
    Une autre solution pourrait être de rendre plus visible la fenêtre Recherche de la barre OB, comme tu peux le voir sur mon blog (j'ai le même thème que toi, Social Boards)...
  • Merci de ta réponse, j'ai réussi à intégrer (provisoirement) le module recherche dans ma colonne de gauche afin de dégager l'en-tête c'est pour ça qu'il a disparu. Mais le résultat ne me convient pas vraiment, (je n'arrive pas à mettre la loupe à droite de la fenêtre recherche).

    Mais quel benêt je fais j'avais même pas remarqué la recherche de la barre OB ...
    Comment tu fais ça, c'est intéressant ?
    S'il n'y a pas la possibilité de l'intégrer dans mon menu horizontal je choisirai ta solution
    Contrairement à toi j'ai la place, je n'ai que 5 petits boutons
    Merci Maitre Po
  • A priori, tu n'arriveras pas à le mettre dans le menu, puisque celui-ci n'est composé que de liens, alors que la recherche est un formulaire.

    D'autre part, si tu n'as pas vu la recherche dans la barre, certains visiteurs ne la verront pas plus.
    Avec les lignes suivantes :
    .ob-ShareBar-search {background:#fff!important;}
    .ob-ShareBar-input  {color:#000!important;}
    elle sera beaucoup plus visible.
    (tu peux modifier les couleurs)

    Cela dit, en haut du module de gauche, ce n'est pas si mal.
    Moi, je n'en ai pas mis, donc je n'ai pas le choix...

  • Bonsoir,

    tu peut faire un module recherche en collant dans un module texte libre à droite: (en html)

    <div class = "search">

    <h3>Recherche</h3>
    <form class="search" action="/search" method="post" id="yui_3_5_0_1_1363003669934_309">
    <div id="yui_3_5_0_1_1363003669934_308">
    <input type="text" name="q" placeholder="Recherche" value="" id="yui_3_5_0_1_1363003669934_307">
    <button type="submit">OK</button>
    </div>
    </form>

    </div>
  • J'avais déjà fait ça Mehdi en m'inspirant de ton code et je l'ai placé dans ma colonne de gauche
    J'ai pallié au problème en copiant ce code dans une nouvelle page que j'ai mise au menu, faute de mieux je vais m'en satisfaire pour l'instant
    Merci les gars je vais attendre un peu voir si un petit génie du CSS a d'autres solutions
  • Au passage Mehdi as-tu une solution afin que le bouton de validation (une image "petite loupe" dans mon cas) soit placé à droite de la fenêtre de recherche au lieu qu'il soit positionné systématiquement en dessous
    j'ai tout essayé sans succès ... sauf la bonne solution of course
    http://www.regardactu.com/
  • Bonsoir,
    en simulation, j'arrive à positionner la recherche sur la ligne de ton menu, avec ces lignes

    .ob-ShareBar-search { margin-top: 190px ; margin-right: 50px ; }
    a.ob-ShareBar-admin.ob-ShareBar--connected   { margin-top:-170px ; }

    essaie et regarde ce que cela donne, avec la simulation je ne vois pas si la loupe est présente ou non.


    Pour la loupe dans le module, colle cette ligne
    button {position:absolute; height:39px ; }

  • re bonsoir

    moi en simulation, j'arrive a mettre ta loupe a droite de la zone recherche en jouant sur 2 paramètres

    la largeur du bouton

    .search {
        right: 10px;
        top: 1px;
        width: 190px;
    }


    et en reduisant de 100% à 77 % cette valeur

    .search input[type="text"] {
       width: 77%;
    }


    ces 2 lignes devant se mettre bien sur avant ta dernière balise "</style>"


    tu a donc les 3 solutions, le code de kinou pour mettre recherche dans le menu...et 2 codes pour ta loupe

    celui de kinou me paraissant le plus simple  button {position:absolute; height:39px ; }

    donc, juste vérifier le déplacement de la loupe

  • Merci les gars c'est nickel