28172 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai un petit problème de mise en forme avec ma barre de recherche dans mon header:

upload/31998-Capture.PNG

Je devrais avoir le bouton " >> " vert sur la droite de ma zone de recherche mais je ne trouve pas,.. Merci de votre aide.

Voici, mon code CSS :

/* Mini search */
.mini-search {
    position:relative;
    z-index:99;
    float:right;
	top: -64px;
	right: 535px;
    }
.mini-search .input-text { position: relative; background: #333333 url(../images/mini-recherche.png) no-repeat;  width:189px; margin-right:5px; padding: 7px; border:none; color: white;}
.mini-search .btn{ background:url(../images/search_button.png) no-repeat;position: relative; width: 32px;height:32px; border:none; cursor: pointer;text-indent: -999em;}
.mini-search .input-text:hover { background: #333333 url(../images/mini-recherche_active.png)}
.mini-search .btn:hover  { background: url(../images/search_button_active.png)}
.search-autocomplete { border:1px solid #999; background:#f9f5f0; position:absolute; left:45px !important; top:22px !important; width:216px!important; }
.search-autocomplete li { border-bottom:1px solid #f4eee7; padding:2px 8px 1px 8px; }
.search-autocomplete li .amount { float:right; font-weight:bold; }
.search-autocomplete li.odd { background:#f6f6f6; }
.search-autocomplete li.selected { background:#ecf9ea; }

Modifié par mamsk (23 Aug 2010 - 11:27)
<form id="search_mini_form" action="<?php echo $this->helper('catalogSearch')->getResultUrl() ?>" method="get">
    <fieldset>
    <legend><?php echo $this->__('Search Site') ?></legend>
    <div class="mini-search">
        <input id="search" type="text" class="input-text" name="<?php echo $this->helper('catalogSearch')->getQueryParamName() ?>" value="<?php echo $this->helper('catalogSearch')->getEscapedQueryText() ?>"/>
        <input type="submit" class="btn" value="<?php echo $this->__('') ?>"/>
        <div id="search_autocomplete" class="search-autocomplete"></div>
        <script type="text/javascript">
            var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->helper('catalogSearch')->__('Search entire store here...') ?>');
            searchForm.initAutocomplete('<?php echo $this->helper('catalogSearch')->getSuggestUrl() ?>', 'search_autocomplete');
        </script>
  </div>
    </fieldset>
</form>


Smiley cligne
Hem... je le redis autrement : il nous faudrait le code html et css permettant de reproduire le problème... et ça n'est pas le cas pour l'instant puisque :
* tu nous donnes du PHP dont nous n'avons que faire ! Smiley langue
* même sans ça le code n'est pas suffisant.

Dit encore autrement : pour nous simplifier la vie il faut faire en sorte que l'on n'ait plus qu'à faire un copier / coller pour tester (et le top du top c'est encore une page en ligne).
<div class="mini-search">
        <input type="text" value="" name="q" class="input-text" id="search" autocomplete="off">
        <input type="submit" value="" class="btn">
        <div class="search-autocomplete" id="search_autocomplete" style="display: none;"></div>
        <script type="text/javascript">
            var searchForm = new Varien.searchForm('search_mini_form', 'search', 'Votre recherche...');
            searchForm.initAutocomplete('http://www.mamsk.com/index.php/catalogsearch/ajax/suggest/', 'search_autocomplete');
        </script>
  </div> 

Modifié par mamsk (23 Aug 2010 - 12:28)
Bon ben je crois qu'on ne va pas y arriver : si tu copies simplement les codes css et html que tu fournis... on ne voit rien !

Donc soit tu parviens à nous fournir les codes nécessaires (merci de tester dans une page vide s'ils suffisent à reproduire le problème), soit tu nous donnes un lien vers une page de test en ligne (vu qu'il y a des images ça va être difficile de faire autrement de toute façon), soit... ah ben non tiens ! C'est tout ! Smiley lol