28173 sujets

CSS et mise en forme, CSS3

Un formulaire de recherche différent dans FF et IE

Bonjour

Je viens de modifier la construction du formulaire de recherche de mon site sur ma home.

<div id="recherche">
   <div class="textRecherche">
   <span>Rechercher sur le site</span>
   </div>
   <div class="formRecherche">
   <form action="recherche.php" method="get">
   <span><input class="champRecherche" type="text" name="recherche" maxlength="50"></span>
   <span>
   <input type="hidden" name="id_rubrique" value="6"><input type="submit" class="btSub" value="ok">
</span></form>
</div>



Dans ma feuille de style :

#recherche{
	width:171px;
	
	border:1px solid red;
}


.textRecherche	 {
	height:14px;
	border:0px solid black;
	padding-top:1px;
	padding-left:6px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
	font-style: normal;
	line-height: normal;
	font-weight: lighter;
	font-variant: normal;
	color: #FFFFFF;
}

.formRecherche {
	height:18px;
	border:1px solid yellow;
	padding-left:8px;
}

.btSub{
	height:18px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	color: #000000;
}

.champRecherche{
	height: 18px;
	width: 103px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
	color: #000000;
}


Tout se passe bien sur FF mais sur IE 6 le div contenant le champ et le bouton submit étant trop haut ça casse ma mise en page.

Que faut il faire pour régler ça ?
Pour voir cette page : ht**://www.francomix.com j'ai laissé les bordures des div. Le formulaire de recherche est en haut à droite.

D'avance merci
Philippe
Salut,

pour ton soucis, je n'ai pas regardé en détail, peut être à voir du côté de line-height, ou de height.

Mais ce détail de mise en page me paraît moins important qu'un élément plus fondamental, à savoir le balisage de ton formulaire.

 <div class="textRecherche">

   <span>Rechercher sur le site</span>

   </div>

L'art et la manière d'utiliser un élément dénué de sens alors qu'un équivalent sémantique existe à savoir <fieldset> couplé à <legend>

 <fieldset>

   <legend>Rechercher sur le site</legend>
<!-- ... le reste de mon formulaire -->
   </fieldset>


Par ailleurs, l'utilisation de <label> est très appréciable.

++
Bonjour Olivier et merci pour ta réponse rapide.
Je comprend que tu me proposes cette solution.

Comment enlever la bordure du fieldset ?
Les caractéristiques du texte "rechercher" se définissent dans legend ?

Merci
Philippe
ensemblevide a écrit :
Bonjour Olivier et merci pour ta réponse rapide.
Je comprend que tu me proposes cette solution.

Comment enlever la bordure du fieldset ?
Les caractéristiques du texte "rechercher" se définissent dans legend ?

Merci
Philippe



Pour la bordure du fiedset, comme pour n'importe quelle bordure :

border: 0 none;


En, fait pour un tel formulaire (simple), il n'y a peut être pas besoin de fieldset (je ne sais plus quels sont les points essentiels en terme d'accessibilité), il me semble qu'un champ label serait plus judicieux que le couple fieldset/legend et les 2 ensemble aurait un effet plutôt redondant.

Donc pour conclure sur la structure HTML du formulaire :

<form ...>
<div><label [b]for[/b]="[i]search[/i]">Rechercher</label> <input type="text" name="search" [b]id[/b]="[i]search[/i]" /></div>
<div><input type="submit" name=".." value="Ok" /></div>
</form>


A noter que les enfants direct de l'élément <form> doivent être de type block.
Modifié par Olivier (18 Sep 2006 - 11:12)
Merci Olivier
Mon formulaire de recherche est simple en effet, je t'invite à le voir sur cette page http://www.francomix.com/rubrique-1__Selection_Francomix-2.html
Ce qu'il faut donc c'est que le texte "rechercher" soit sur une ligne et le reste sur une autre ligne

Je ne sais donc pas si le code que tu proposes peut s'adapter ?

a écrit :
A noter que les enfants direct de l'élément <form> doivent être de type block.


tu parles des div ou des input ?

Philippe
Olivier a écrit :

En, fait pour un tel formulaire (simple), il n'y a peut être pas besoin de fieldset (je ne sais plus quels sont les points essentiels en terme d'accessibilité)


Bonjour à tous,

Fieldset permet de regrouper des champs de formulaire par catégories.
Pas forcément utile ici.

Pour plus de détails : http://openweb.eu.org/articles/formulaire_accessible/
ensemblevide a écrit :
Merci Olivier
Mon formulaire de recherche est simple en effet, je t'invite à le voir sur cette page http://www.francomix.com/rubrique-1__Selection_Francomix-2.html
Ce qu'il faut donc c'est que le texte "rechercher" soit sur une ligne et le reste sur une autre ligne

Je ne sais donc pas si le code que tu proposes peut s'adapter ?

A noter que les enfants direct de l'élément <form> doivent être de type block.


tu parles des div ou des input ?

Philippe

Je dis que les enfants direct de <form> doivent être de type block, hors ni <span> ni <input /> ne le sont, et c'est ce que tu utilisais Smiley cligne d'où ma remarque et ma correction dans l'exemple donné.

Pour réaliser ce que tu cherches, on peut baliser ça comme ça :

<form ...>
<div>
<label for="search">Rechercher sur le site</label>
<input type="text" name="search" id="search" />
<input type="submit" name="blabla" value="Ok" />
</div>
</form>

Ca, c'est une bonne base saine de code HTML.

Ensuite, tu peux y appliquer la mise en forme CSS souhaitée.
Ici, un simple display: block; sur le label suffira à obtenir le résultat souhaité.

Fait un essai et nous rediscutterons ensuite des éventuelles différences de rendu entre IE et firefox.
Merci

Je suis parti de ton code :

<form action="recherche.php3" method="get">
<div id="recherche">
<label class="textRecherche" for="recherche">Rechercher</label>
<input class="champRecherche" type="text" name="recherche" maxlength="50">
<input type="hidden" name="id_rubrique" value="6"> <input type="submit" class="btSub" value="ok">
</div>
</form>



avec les styles suivants :

#recherche{	
	border:1px solid red;
	padding-left:6px;
	padding-top:1px;
}
.label{
	display: block;
	padding-bottom:10px;
}
.textRecherche	 {
	height:14px;
	border:0px solid black;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
	font-style: normal;
	line-height: normal;
	font-weight: lighter;
	font-variant: normal;
	color: #FFFFFF;
}
.btSub{
	height:18px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	color: #000000;
}


J'arrive à obtenir ce que je veux, sauf que je n'arrive pas à gérer l'espace entre le label et le champs texte et il y a un gros espace sous le div qui casse la mise en page. Ex marge blanche au dessus de la navig
Compare http://www.francomix.com et http://www.francomix.com/rubrique-1__Selection_Francomix-2.html (ancien code)

Merci pour ton aide

Philippe
hmm, j'avais pas vraiment regardé le code, mais... comment dire... c'est de la soupe !!

L'utilisation de tableaux de mise en page, c'est franchement pas l'idéal et là pour s'y retrouver et déterminer la provenance du problème... dur dur...

Dans la logique tableau de présentation, il te manquerait pas un <td> pour encadrer le formulaire ?

Enfin, de toute façon, ça serait bien mieux de partir d'une base de code HTML saine...

Sinon pour les styles CSS :

.label { ... }

NON Smiley cligne c'est pas une class CSS, c'est une balise donc :

label { ... }


Par ailleurs, tu utilises un id="recherche" dans la division englobante, et un attribut for="recherche" sur le label.

C'est pas bon Smiley cligne (cf mon post plus haut et la faq pour les détails)
http://forum.alsacreations.com/faq/#item50

++
Merci

Avant de m'attaquer à la refonte du code de mon site je cherche seulement quand c'est nécessaire à débugguer avec les css.

J'ai pris en compte tes remarques

Pour le gros espace sous le div qui casse la mise en page j'avoue ne pas trop savoir. Si j'enlève les <input> la mise en page redevient normale

Philippe
ensemblevide a écrit :

Avant de m'attaquer à la refonte du code de mon site je cherche seulement quand c'est nécessaire à débugguer avec les css.


Mwé, on peut comprendre, mais c'est amasser plus de boulot que nécessaire à mon avis.

Effectuer la refonte totale te prendra peut être plus de temps tout de suite, mais tu y gagneras par la suite et là, bidouiller sur une base de soupe, c'est pas l'idéal pour débugguer et s'assurer d'un comportement logique...

En tout cas, le bordel dans une page web, c'est hors de mes compétences Smiley cligne (dans ma chambre ou sur le bureau, ça je maitrise pas mal ! mais pas dans une page web Smiley cligne )
++
Sujet clos
Aller à