28172 sujets

CSS et mise en forme, CSS3

[Résolu] Css moteur de recherche

Pages :
Bonsoir,

J'ai défini le css de ma zone de texte qui permet de saisir les mots clés d'une recherche mais je bute sur certains détails :

- Je souhaiterais que le mot recherche, qui figure par défaut dans la zone de texte, disparaisse au moment où l'on clique dans cette zone de texte
- Que le mot "recherche" soit décalé un peu de la marge gauche mais mon padding-left ne fonctionne pas

Pour le code
#search {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #84929a;
	background-attachment: scroll;
	background-color: #eceef0;
	background-image: url(img/moteurLoupe.png);
	background-repeat: no-repeat;
	background-position: 104px center;
	text-align: left;
	vertical-align: middle;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #de0059;
	border-bottom-color: #de0059;
	width: 129px;
	height: 20px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: none;
	border-left-style: none;
	padding-left: 10px;
}
</style>
</head>

<body>
<form id="form2" name="form2" method="post" action="">
  <label for="search"></label>
  <input name="search" type="text" id="search" value="Recherche"/>
</form>
</body>


Est-ce que c'est faisable ? Smiley ohwell
Modérateur
Salut,
En CSS pur ce n'est pas possible. Soit tu utilises l'attribut placeholder (html5) et ce seront les browsers récents qui comprendront cet attributs soit tu passes par la case JS :

/*js natif*/


window.onload = function(){
	var search = document.getElementById('search');
	
	search.onfocus = function(){
		if(this.value == 'Recherche'){
			this.value = "";
		}
	}
}

/*en jQuery*/

(function($){
	$('#search').bind('focus',function(){
		if($(this).val() == 'Recherche'){
			$(this).val('');
		}
	});
})(jQuery);
Merci pour cette réponse pro Smiley cligne , cela dit, je suis vraiment plus que limité en js, J'ai inséré le code js natif (le site un peu ancien, n'est pas en html5) mais ça ne change rien.

Est-ce que je dois insérer/modifier une valeur particulière ?

Pour info, j'utilise Safari
Modérateur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>bla</title>
    <style type="text/css">

#search {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #84929a;
	background-attachment: scroll;
	background-color: #eceef0;
	background-image: url(img/moteurLoupe.png);
	background-repeat: no-repeat;
	background-position: 104px center;
	text-align: left;
	vertical-align: middle;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #de0059;
	border-bottom-color: #de0059;
	width: 129px;
	height: 20px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: none;
	border-left-style: none;
	padding-left: 25px;/*ça fonctionne le décalage*/
}
</style>
</head>

<body>
<form id="form2" name="form2" method="post" action="">
  <label for="search"></label>
  <input name="search" type="text" id="search" value="Recherche"/>
</form>
<script type="text/javascript">
    window.onload = function(){
	var search = document.getElementById('search');
	//quand le curseur est dans le champs
	search.onfocus = function(){
		//si la valeur du champ vaut Recherche
		if(this.value == 'Recherche'){
			this.value = '';
		}
	}
        
	//quand le curseur n'est plus dans le champs
        search.onblur = function(){
            //si la valeur du champ vaut rien
            if(this.value == ''){
                    this.value = 'Recherche';
            }
        }
}
</script>
</body>
</html>

Modifié par niuxe (18 Nov 2012 - 01:10)
Tu me livres la solution toute chaude et tu m'évites donc un grosse prise de tête avec cette bricole... Que dire à part un grand merci ! Smiley cligne C'est l'esprit de Noël qui commence à gagner les esprits Smiley ravi
Modérateur
Salut,

De rien. Smiley smile

Cependant, il faudrait que :
1. tu lises ce que j'ai écris : Avoir la solution, c'est bien. La comprendre, c'est mieux. Si tu as des questions, n'hésite pas à les poser sur le forum
1.1 Tu remarqueras que le JS est bien externalisé et qu'il n'est pas intrusif/obstructif. pour un code encore plus classe, on pourrait imaginer un truc comme :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>bla</title>
    <style type="text/css">

#search {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #84929a;
	background-attachment: scroll;
	background-color: #eceef0;
	background-image: url(img/moteurLoupe.png);
	background-repeat: no-repeat;
	background-position: 104px center;
	text-align: left;
	vertical-align: middle;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #de0059;
	border-bottom-color: #de0059;
	width: 129px;
	height: 20px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: none;
	border-left-style: none;
	padding-left: 25px;
}
</style>
</head>

<body>
<form id="form2" name="form2" method="post" action="">
  <label for="search">Recherche : </label>
  <input name="search" type="text" id="search" value=""/>
  <button type="submit">ok</button>
</form>
<script type="text/javascript">
    window.onload = function(){
	var search = document.getElementById('search'),
	    label = document.getElementsByTagName('label'),
	    strRecherche = 'Recherche';
	
	if(search){
	    search.value = strRecherche;
	    for (var j = 0; j < label.length; j++) {
		if(label[j].getAttribute('for') == "search"){
		    label[j].innerText = "";
		    label[j].appendChild(search);
		}
	    }
	    
	    
	    search.onfocus = function(){
		if(this.value == strRecherche){
		    this.value = '';
		}
	    }
	    
	    search.onblur = function(){
		if(this.value == ''){
		    this.value = strRecherche;
		}
	    }
	}
    }
</script>
</body>
</html>

<<<EDIT
1.2 Vérifier la compatibilité avec le machin développé par µcro$oft
EDIT;
2. tu externalises la CSS pour un travail plus propre
3. soit tu entoures ton champ par le label soit tu mets un texte au label (toujours par soucis d'un code propre :

<label for="search">Recherche :</label>
<input name="search" type="text" id="search" value="Recherche"/>

ou 

<label for="search"><input name="search" type="text" id="search" value="Recherche"/></label>

3.1. Sinon, tu regardes ma solution ci-dessus §1.1.
4. tu édites ton premier message en mettant entres crochets "Résolu"
Modifié par niuxe (18 Nov 2012 - 11:02)
Effectivement, je te remercie pour ta mise en garde, je me suis réjoui un peu rapidement puisque je n'avais pas testé sur IE ! Erreur de taille, sachant que mes principaux visiteurs utilisent IE.

J'ai donc testé le code actuel et le code précédent avec IE8 et aucun ne permet de faire disparaître le texte "Recherche" par défaut quand on clique dans la zone de texte.

Par ailleurs, je pense que si je souhaite que ce soit en cliquant sur la loupe qu'on lance la recherche (remplacement du bt "ok), je dois ajouter un style spécial sur "OK" avec la loupe en background ?

Sinon, la css sera bien entendu externalisée au final.

Bref, une fois de plus, Microsoft va me pourrir la vie !!!!

Encore merci pour ton aide, désolé de relancer encore cette discussion
Modérateur
A ce stade, il faudrait faire un test de navigateur et mettre les instructions différentes pour le boulet. paye tes lignes de code supplémentaires. Là, je ne peux pas faire de test sur le boulet puisque je tourne sur Linux. Au passage, le boulet n'est plus le number one des navigateurs (utilisation et autres....). Il est désormais 3e en France.

Ce que tu peux faire et en peu de lignes, passer par jcuicui. En gardant le dernier code source html, ça donne un truc comme :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>bla</title>
    <style type="text/css">

#search {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #84929a;
	background-attachment: scroll;
	background-color: #eceef0;
	background-image: url(img/moteurLoupe.png);
	background-repeat: no-repeat;
	background-position: 104px center;
	text-align: left;
	vertical-align: middle;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #de0059;
	border-bottom-color: #de0059;
	width: 129px;
	height: 20px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: none;
	border-left-style: none;
	padding-left: 25px;
}
</style>
</head>

<body>
<form id="form2" name="form2" method="post" action="">
  <label for="search">Recherche : </label>
  <input name="search" type="text" id="search" value=""/>
  <button type="submit">ok</button>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    (function($){
	var strRecherche = 'Recherche';	
	
	$('label[for=search]').empty();
	$('#search').val(strRecherche).bind('focus',function(){
	    if($(this).val() == strRecherche){
		$(this).val('');
	    }
	}).bind('focusout',function(){ //évite bogue IE (blur).....
	    if($(this).val() == ''){
		$(this).val(strRecherche);
	    }
	}).appendTo($('label[for=search]'));
	
    })(jQuery);
</script>
</body>
</html>


goudurisc a écrit :
Encore merci pour ton aide, désolé de relancer encore cette discussion

de rien Smiley smile
Modifié par niuxe (18 Nov 2012 - 15:48)
Au final, le résultat devrait être celui-ci tout simplement : quand on clique sur la loupe, on lance la recherche, il n'y aurait donc pas de bouton submit apparent upload/16785-search.png

Avec ton nouveau test (merci toujours pour le boulot), ça affiche la zone de recherche en trois parties : 1) le mot "recherche" non stylé, à sa droite la zone de texte avec la loupe en fond, et encore à droite le bouton "ok"

Et pour les stats Explorer, il est vrai que Chrome est passé un temps en tête mais malheureusement, Explorer reprend du poil de la bête, wondoxs8 étant fait pour ça, de lourde galère en perspective Smiley fache

Cela dit, je sais malheureusement que mes visiteurs sont majoritairement sous IE et tu penses bien que je m'en serai passé si c'était possible...

Je reconnais que même si cette demande semble simple, la réponse ne l'est pas et je ne voudrais pas te faire passer ton dimanche la-dessus...
Modérateur
nan t'inquiête. Je surfe un peu. Donc j'ai un peu de temps avant ce soir. Bref, le comportement est ok apparemment.

Pour ton histoire de loupe, je pense que c'est une méconnaissance html de ta part. Tu as le choix :
Soit tu utilises un élément input type submit ou img, soit tu utilises un élément button avec à l'intérieur une image

<form id="form2" name="form2" method="post" action="">
  <label for="search">Recherche : </label>
  <input name="search" type="text" id="search" value=""/>
  <button type="submit"><img src="http://www.trucenbois.fr/_t/0/images/loupe.png" alt="loupe" /></button>
</form>



<form id="form2" name="form2" method="post" action="">
  <label for="search">Recherche : </label>
  <input name="search" type="text" id="search" value=""/>
  <input type="image" src="http://www.trucenbois.fr/_t/0/images/loupe.png" alt="loupe" />
</form>
Méconnaissance, je crois que c'est le bon terme...

La difficulté est de pouvoir intégrer le bouton submit dans le design (tel que mon modèle).

Pour le résultat dans IE8 upload/16785-captmoteur.jpg

Et pour confirmer que j'en suis à la bonne version de ton code (j'ai bien entendu changé le chemin pour le fichier loupe mais il s'affiche correctement dans le bt submit, comme tu le constateras) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>bla</title>
    <style type="text/css">

#search {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #84929a;
	background-color: #eceef0;
	text-align: left;
	vertical-align: middle;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #de0059;
	border-bottom-color: #de0059;
	width: 129px;
	height: 20px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: none;
	border-left-style: none;
	padding-left: 25px;
}
</style>
</head>

<body>
<form id="form2" name="form2" method="post" action="">
  <label for="search">Recherche : </label>
  <input name="search" type="text" id="search" value=""/>
  <button type="submit"><img src="img/moteurLoupe.png" /></button>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    (function($){
	var strRecherche = 'Recherche';	
	
	$('label[for=search]').empty();
	$('#search').val(strRecherche).bind('focus',function(){
	    if($(this).val() == strRecherche){
		$(this).val('');
	    }
	}).bind('focusout',function(){ //évite bogue IE (blur).....
	    if($(this).val() == ''){
		$(this).val(strRecherche);
	    }
	}).appendTo($('label[for=search]'));
	
    })(jQuery);
</script>
</body>
</html>


Merci !
Modérateur
Ce que je ne comprends pas, c'est le txt "Rechercher :". Or il ne devrait pas être à l'écran puisque dans le script entres autres, on vide ce texte et on remplace par le mot recherche dans le champ. J'ai l'impression que ton JS est désactivé ou que tu travailles strictement en local (du style l'url est : c:\un%20chemin\un%20fichier.html) et que tu n'as pas accepté la pseudo alerte de sécurité IE Smiley lol (contenu bloquer, veuillez cliquer sur je suis plus quoi et bla bla et bla bla)

Pour ton souci d'image, bin c'est simple. vertical-align ou moins bien margin-top. Sur le bouton, tu vires les border (border:none) et le background (background:none). Après si tu veux que la loupe soit dans le champ :
1. penser à mettre les padding right et left apropriés sur le input
2. le noeud parent du input (!attention piège) et du button (!attention piège) sera en position relative
3 le button en position absolu avec un top et un right

<<<EDIT
Demain, j'essaierai vite fait ce script sur un wmachin 7
EDIT;
Modifié par niuxe (18 Nov 2012 - 21:48)
Oui exact, je n'avais pas remarqué la ligne jQuery qui devait forcément pointer dans le vide en local.
Donc, tout fonctionne nickel, très fort ! Smiley cligne

Pour le css du bouton OK, ça se gâte un peu. Si je peux définir les propriétés en css, mes tests pour les associer au bouton submit ne fonctionnent pas... j'ai tenté d'intégrer ma class (et pas ID) dans la ligne
  <button type="submit"><img src="img/moteurLoupe.png" class="submit"></button>

Mais si je supprime la partie "img src..." pour ne conserver que l'image en background de ma loupe dans la class, ça ne fonctionne plus... je reconnais que je n'avais jamais stylé des objets formulaires auparavant, pourrais-tu avoir la patience de me livrer cette dernière astuce ?


Comme ce n'est ni une div ni une classe
bon, je n'y arrive toujours pas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>search</title>
    <style type="text/css">

#search {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #84929a;
	background-color: #eceef0;
	text-align: left;
	vertical-align: middle;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #de0059;
	border-bottom-color: #de0059;
	width: 129px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: none;
	border-left-style: none;
	padding-left: 25px;
	position: relative;
	height: 20px;
}
.submit {
	font-family: Arial, Helvetica, sans-serif;
	color: #84929a;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #de0059;
	border-bottom-color: #de0059;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: none;
	border-left-style: none;
	position: absolute;
}
    </style>
</head>

<body>
<form id="form2" name="form2" method="post" action="">
  <label for="search">Recherche : </label>
  <input name="search" type="text" id="search" value=""/>
  <button type="submit"><img src="img/moteurLoupe.png" class="submit"></button>
</form>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    (function($){
	var strRecherche = 'Recherche';	
	
	$('label[for=search]').empty();
	$('#search').val(strRecherche).bind('focus',function(){
	    if($(this).val() == strRecherche){
		$(this).val('');
	    }
	}).bind('focusout',function(){ //évite bogue IE (blur).....
	    if($(this).val() == ''){
		$(this).val(strRecherche);
	    }
	}).appendTo($('label[for=search]'));
	
    })(jQuery);
  </script>
</body>
</html>
Modérateur
1.Ce n'est pas la peine de rajouter une classe submit. Tu as tous les éléments pour cibler correctement ton img 

/*form2 étant ton ciblage de base à cet endroit dans ta feuille de style*/
#form2 button img{/*etc.*/}


2. Je vois que tu t'emmêles les pinceaux sur le positionnement. Je t'invite à lire ou à relire ce petit tuto et ceux là (part-1 et part-2) qui sont très biens sur le positionnement. Sachant qu'en générale le positionnement absolu est à utiliser avec parcimonie (c'est qui ça parcimonie ?). Là pour le coup, tu devrais avoir un rendu impec après ce type de positionnement. Comme je te l'ai dit dans un post précédent, il y a un piège (Tu trouveras une phrase clef dans le tuto de Benjamin DC.).

En css et en JS, maîtriser le ciblage, cela évite de surcharger l'html pour rien et donc ton code est de ce fait, optimisé. En CSS aussi, bien connaître les différents types de positionnement est une étape cruciale.
Modifié par niuxe (19 Nov 2012 - 00:30)
Le tuto est quand même par endroit un peu chaud pour ce qui me concerne et surtout, quand il n'y a pas d'exemple en image, mon cerveau bloque parfois.

Bref, après mes tests de position relative/absolute, le bouton reste apparent alors que j'ai supprimé border+background. Et pas moyen de ramener la loupe dans mon champ de recherche, comme s'il y avait une muraille css. C'est peut-être le piège dont tu parles.

    <style type="text/css">

#search {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #84929a;
	background-color: #eceef0;
	text-align: left;
	vertical-align: middle;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #de0059;
	border-bottom-color: #de0059;
	width: 129px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: none;
	border-left-style: none;
	padding-left: 25px;
	height: 20px;
	position: relative;
}
#form2 button img {
	background:none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	position: absolute;
}
    </style>
</head>

<body>
<form id="form2" name="form2" method="post" action="">
  <label for="search">Recherche : </label>
  <input name="search" type="text" id="search" value=""/>
  <button type="submit"><img src="img/moteurLoupe.png"></button>
</form>


Si tu as un autre petit indice qui peut me débloquer, je suis preneur Smiley smile
Modérateur
goudurisc a écrit :
Si tu as un autre petit indice qui peut me débloquer, je suis preneur Smiley smile


prenons cet exemple (ça va piquer les IE) :

<div class="grandPere">
    <div class="parent">
	<div class="enfant"></div>
    </div>
</div>

en css

.grandPere{
    background:red;width:300px;height:300px;/*règles de base*/
    /*règles sur le positionnement*/
    position:relative;
}
.enfant{
    background:blue;width:50px;height:50px;/*règles de base*/
    /*règles sur le positionnement*/
    position:absolute;
    right:0;
    bottom:0;
}

Lis bien les tutos que je t'ai envoyé Smiley cligne

Sur openweb (qui d'ailleurs est un site qui va t'être très utile par la suite), tu peux trouver une autre manière de comprendre les types de positionnement : http://openweb.eu.org/articles/initiation_absolue

Au passage, dans ton code tu as enlevé l'attribut alt à l'élément img. Or c'est une erreur. Cet attribut est très important :
1. obligatoire
2. accessibilité
3. référencement
4. etc.

De ce fait, tu rends invalide ta page. Et donc potentiellement, tu risques des bogues par la suite. Une page non valide -> pas bien Smiley cligne
Modifié par niuxe (19 Nov 2012 - 02:09)
Ton exemple est parfaitement clair, j'ai donc très bien compris le principe (ça faisant longtemps que je me m'interrogeais sur ce point, j'ai donc atterri, un pas de géant pour l'humanité, enfin, pour moi...), merci beaucoup !!!.

Cela dit, en fonctionnement div, le principe de dépendance est limpide mais mais quand il s'agit d'input et de button, je ne sais absolument pas comment rendre par exemple mon button, enfant de mon input, ce qui est à mon sens la clé de la solution.

Si ma zone de texte englobe le bouton, l'utilisation relative/absolute

J'ai bien réintégré le alt
Modérateur
goudurisc a écrit :

Cela dit, en fonctionnement div, le principe de dépendance est limpide mais mais quand il s'agit d'input et de button, je ne sais absolument pas comment rendre par exemple mon button, enfant de mon input, ce qui est à mon sens la clé de la solution.

Si ma zone de texte englobe le bouton, l'utilisation relative/absolute


niuxe a écrit :
Comme je te l'ai dit dans un post précédent, il y a un piège (Tu trouveras une phrase clef dans le tuto de Benjamin DC.)



<div class="uneDiv">
    <div class="uneAutreDiv1"></div>
    <div class="uneAutreDiv2"></div>
    <div class="uneAutreDiv3"></div>
</div>


Quel est le parent ? Quels sont les enfants ? (pas la peine de me répondre)
Modifié par niuxe (19 Nov 2012 - 08:35)
Pages :
Sujet clos
Aller à