Bonjour,
Hier sur ma page http://olivierbaudrydesign.free.fr/ j'ai décidé d'arranger l'espace rechercher qui était comme
http://olivierbaudrydesign.free.fr/?page_id=5/ auparavant
sur les deux j'ai ajouter une image de loupe en background image
sur http://olivierbaudrydesign.free.fr/ j'ai modifié quelque peu le css et cela me décale la fenêtre de recherche très bizarrement :
voila mon code #s {
width: 150px;
height: 17px;
background-image: url(/wp-content/themes/oupocreanum/images/loupe.gif);
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: grey;
border-right-color: grey;
border-bottom-color: grey;
border-left-color: grey;
vertical-align: text-bottom;
/* partie rajoutée pour le texte rechercher mais comment l'afficher à droite de la loupe il y a pourtant 18 pixels figure sur http://olivierbaudrydesign.free.fr mais pas sur http://olivierbaudrydesign.free.fr/?page_id=5 */
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 18px;
color: #b4b4b4;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 1em;
font-size: 9px;
letter-spacing: 0px;
background-color: #ffffff;
float: left;
padding-right: 0pt;
padding-bottom: 1px;
padding-left: 0pt;
}
Avec ce style CSS j'ai le caractère voulu au texte sa graisse mais seulement le texte devrait apparaître à 18 pixels à droite pour ne pas masquer l'image de la loupe.
Pour plus de détaille voilà sur http://olivierbaudrydesign.free.fr/
le code de ma balise de recherche avec le javascript
<div id="search">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get" name="searchform" id="searchform" onsubmit="if(document.searchform.keyword.value=='Rechercher'){alert('Entrez votre recherche');document.searchform.keyword.focus();return false;}">
<input type="text" name="s" id="s" value="Rechercher" size="12" maxlength="255" onClick="this.value='';" class="champ_recherche" onfocus="if(this.value=='Rechercher'){ this.value=''; }" onblur="if(this.value==''){ this.value='Rechercher'; }"/>
<input type="image" alt="submit" src="/wp-content/themes/oupocreanum/images/return.gif" action="javascript:document.searchform.submit()"/>
</form>
</div>
et sur http://olivierbaudrydesign.free.fr/?page_id=5
voilà mon code :
<div id="search">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get" name="searchform" id="searchform">
<input type="text" name="s" id="s" value="search in blog..." />
<input type="image" alt="submit" src="/wp-content/themes/oupocreanum/images/return.gif" />
</form>
</div>
Configuration: Windows XP
Firefox 3.0