Comment faire pour aligner le champ "recherche" et un bouton OK ?

Bonjour à toutes et à tous,

Je sais, c’est vraiment basique, mais je panouille dans habillage.css pour réussir à aligner le champ « Rechercher » avec un bouton « OK » à droite.

Merci d’avance pour le tuyau, je promets de me flageller dès que j’aurai lu la réponse… :slight_smile:

Jean-Luc GARNIER

Comme ça à brule pour point(g?) en html align="absmidle"..
en css align : middle??

Bernard

GARNIER Jean-Luc a écrit :

Bonjour à toutes et à tous,
Je sais, c'est vraiment basique, mais je panouille dans habillage.css pour réussir à aligner le champ "Rechercher" avec un bouton "OK" à droite.
Merci d'avance pour le tuyau, je promets de me flageller dès que j'aurai lu la réponse... :slight_smile:
*Jean-Luc GARNIER
*
------------------------------------------------------------------------

_______________________________________________
liste spip
spip@rezo.net - désabonnement : spip-off@rezo.net
Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP : http://www.spip.net/
irc://irc.freenode.net/spip
FAQ : http://www.spip-contrib.net/spikini/FaQ
  ------------------------------------------------------------------------

No virus found in this incoming message.
Checked by AVG Free Edition. Version: 7.5.484 / Virus Database: 269.12.4/969 - Release Date: 23/08/2007 16:04
  

Désolé, je n'ai pas été assez clair: je veux juste avoir une disposition en ligne : "Rechercher" [OK].

Il y a du div là-dessous, mais j'ai du mal à me réveiller (un grand merci à mon fils qui dansait la java à 3h du mat)...

Jean-Luc GARNIER

-----Message d'origine-----
De : monnaieancienne [mailto:monnaieancienne@free.fr]
Envoyé : vendredi 24 août 2007 09:06
À : GARNIER Jean-Luc
Cc : spip@rezo.net
Objet : Re: [Spip] Comment faire pour aligner le champ "recherche" et un bouton OK ?

Comme ça à brule pour point(g?) en html align="absmidle"..
en css align : middle??

Bernard

GARNIER Jean-Luc a écrit :

Bonjour à toutes et à tous,

Je sais, c'est vraiment basique, mais je panouille dans habillage.css
pour réussir à aligner le champ "Rechercher" avec un bouton "OK" à droite.

Merci d'avance pour le tuyau, je promets de me flageller dès que
j'aurai lu la réponse... :slight_smile:

*Jean-Luc GARNIER
*
------------------------------------------------------------------------

_______________________________________________
liste spip
spip@rezo.net - désabonnement : spip-off@rezo.net
Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP : http://www.spip.net/
irc://irc.freenode.net/spip
FAQ : http://www.spip-contrib.net/spikini/FaQ
  
------------------------------------------------------------------------

No virus found in this incoming message.
Checked by AVG Free Edition.
Version: 7.5.484 / Virus Database: 269.12.4/969 - Release Date: 23/08/2007 16:04
  

Comme ça à brule pour point(g?) en html align="absmidle"..
en css align : middle??

Vertical-align ?

Vertical-align est pour autre choses.

Il faudrait un peux plus d’info pour te répondre. Ton site est déjà on ligne pour qu’on puisse aller voir?

joz

Olivier GENDRIN wrote:

Comme ça  à brule pour point(g?) en html align="absmidle"..
en css align : middle??
    

Vertical-align ?

  

Ton site est déjà on ligne pour qu’on puisse aller voir?
Non, je travaille en local avec EasyPHP… Mais le code est super simple: j’utilise le formulaire.html fourni avec la dist comme modèle, ci-dessous… Mon ajout est en rouge, je veux juste que le champ texte et le bouton soient côte à côte: [Rechercher…] [OK]

[(#ENV{lien}|form_hidden)] [] <:info_rechercher:>   <:rechercheavancee:recherche_avancee:>

Merci pour ton aide !

Jean-Luc GARNIER


De : joz [mailto:doppeltgemoppelt@gmail.com]
Envoyé : vendredi 24 août 2007 10:56
À : GARNIER Jean-Luc
Cc : spip@rezo.net
Objet : Re: [Spip] Comment faire pour aligner le champ « recherche » et unbouton OK ?

Vertical-align est pour autre choses.

Il faudrait un peux plus d’info pour te répondre. Ton site est déjà on ligne pour qu’on puisse aller voir?

joz

Olivier GENDRIN wrote:

Comme ça  à brule pour point(g?) en html align="absmidle"..
en css align : middle??
    

Vertical-align ?

  

  Vertical-align est pour autre choses.
  
  Il faudrait un peux plus d'info pour te répondre. Ton site est déjà
on ligne pour qu'on puisse aller voir?
  
Ah oui. Alors margin: 0 auto;.

  joz
  
  Olivier GENDRIN wrote:

      Comme ça à brule pour point(g?) en html
align="absmidle"..
      en css align : middle??
          
    Vertical-align ?
    

Tu va devoir placer tes boutons dans un tableau.
++
joz

GARNIER Jean-Luc wrote:

Ton site est déjà on ligne pour qu’on puisse aller voir?
Non, je travaille en local avec EasyPHP… Mais le code est super simple: j’utilise le formulaire.html fourni avec la dist comme modèle, ci-dessous… Mon ajout est en rouge, je veux juste que le champ texte et le bouton soient côte à côte: [Rechercher…] [OK]

[(#ENV{lien}|form_hidden)] [] <:info_rechercher:>   <:rechercheavancee:recherche_avancee:>

Merci pour ton aide !

Jean-Luc GARNIER

joz a écrit :

Tu va devoir placer tes boutons dans un tableau.

heu, de memoire, dans des li, en specifiant le line-height et vertical-align:middle, ca marche.
donc sans doute aussi dans un div.

il n'y a pas un article la dessus chez alsacreation ?

@++

une liste avec des éléments d’un formulaire ???
j

Stephane wrote:

Ben voui !.. C’est ce que j’ai fait, à regrets…

Merci encore !

Jean-Luc GARNIER


De : joz [mailto:doppeltgemoppelt@gmail.com]
Envoyé : vendredi 24 août 2007 12:48
À : GARNIER Jean-Luc
Cc : spip@rezo.net
Objet : Re: [Spip] Comment faire pour aligner le champ « recherche » et unbouton OK ?

Tu va devoir placer tes boutons dans un tableau.
++
joz

GARNIER Jean-Luc wrote:

Ton site est déjà on ligne pour qu’on puisse aller voir?
Non, je travaille en local avec EasyPHP… Mais le code est super simple: j’utilise le formulaire.html fourni avec la dist comme modèle, ci-dessous… Mon ajout est en rouge, je veux juste que le champ texte et le bouton soient côte à côte: [Rechercher…] [OK]

[(#ENV{lien}|form_hidden)] [] <:info_rechercher:>   <:rechercheavancee:recherche_avancee:>

Merci pour ton aide !

Jean-Luc GARNIER

Piqué sur Alsacréation : Il parit que ça marche du tonnerre!

  <style type="text/css" media="all">

* {padding: 0; margin: 0;}

h1, p {

   margin: 0.5em;

}

p.flag {

   line-height: 1em;

}

p.flag img, span {

   vertical-align: middle;

}

p.flag span {

   padding-left: 5px;

}

  </style>

<div>

   <h1>Test</h1>

   <p class="flag"><img src="drapeau.gif" width="20" height="14" alt="" /><span>Texte</span></p>

  </div>

Bernard

GARNIER Jean-Luc a écrit :

This is a multi-part message in MIME format.
Mime-Version: 1.0
Content-Type: multipart/mixed; boundary="===============0203930899=="

--===============0203930899==
Content-class: urn:content-classes:message
Content-Type: multipart/alternative; boundary="----_=_NextPart_001_01C7E646.BD9B33D2"

------_=_NextPart_001_01C7E646.BD9B33D2
Content-Type: text/plain; charset=iso-8859-1
Content-Transfer-Encoding: quoted-printable

Ben voui !.. C'est ce que j'ai fait, =E0 regrets...
=20
Merci encore !

Jean-Luc GARNIER

________________________________

De : joz [mailto:doppeltgemoppelt@gmail.com]=20
Envoy=E9 : vendredi 24 ao=FBt 2007 12:48
=C0 : GARNIER Jean-Luc
Cc : spip@rezo.net
Objet : Re: [Spip] Comment faire pour aligner le champ "recherche" et =
unbouton OK ?

Tu va devoir placer tes boutons dans un tableau.
++
joz

GARNIER Jean-Luc wrote:=20

  >Ton site est d=E9j=E0 on ligne pour qu'on puisse aller voir?=20
  Non, je travaille en local avec EasyPHP... Mais le code est super =
simple: j'utilise le formulaire.html fourni avec la dist comme mod=E8le, =
ci-dessous... Mon ajout est en rouge, je veux juste que le champ texte =
et le bouton soient c=F4te =E0 c=F4te: =
[Rechercher...........................] [OK]
  =20
  <div class=3D"formulaire_spip formulaire_recherche">
  <a name=3D"formulaire_recherche" id=3D"formulaire_recherche"></a>
  <form action=3D"[(#ENV{lien})]" method=3D"get"><div>
   [(#ENV{lien}|form_hidden)]
   [<input type=3D"hidden" name=3D"lang" value=3D"(#ENV{lang})" />]
   <label for=3D"recherche"><:info_rechercher:></label>
   <input type=3D"text" class=3D"forml" name=3D"recherche" =
id=3D"recherche" value=3D"[(#ENV{recherche}|sinon{<:info_rechercher:>" =
onfocus=3D"this.value=3D'';})]" />
     &nbsp;<input class=3D"spip_bouton" type=3D"submit" value=3D"ok">
   <small class=3Drecherche_avancee><a =
href=3D"?page=3Drecherche&avancee=3D1&recherche=3D#RECHERCHE"><:recherche=
avancee:recherche_avancee:></a></small>
  </div>
  </form>
  </div>
=09
  Merci pour ton aide !

  Jean-Luc GARNIER

------_=_NextPart_001_01C7E646.BD9B33D2
Content-Type: text/html; charset=iso-8859-1
Content-Transfer-Encoding: quoted-printable

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=3DContent-Type content=3D"text/html; =
charset=3Diso-8859-1">
<META content=3D"MSHTML 6.00.2900.3132" name=3DGENERATOR></HEAD>
<BODY text=3D#000000 bgColor=3D#ffffff>
<DIV dir=3Dltr align=3Dleft><SPAN class=3D979070212-24082007><FONT =
face=3DTahoma=20
size=3D2>Ben voui !.. C'est ce que j'ai fait, =E0 =
regrets...</FONT></SPAN></DIV>
<DIV><SPAN style=3D"FONT-SIZE: 10pt; FONT-FAMILY: =
Tahoma"></SPAN>&nbsp;</DIV>
<DIV><SPAN style=3D"FONT-SIZE: 10pt; FONT-FAMILY: Tahoma">M<SPAN=20
class=3D979070212-24082007>erci encore !</SPAN><BR><B=20
style=3D"mso-bidi-font-weight: normal"></B></SPAN></DIV>
<DIV><SPAN style=3D"FONT-SIZE: 10pt; FONT-FAMILY: Tahoma"><B=20
style=3D"mso-bidi-font-weight: normal">Jean-Luc GARNIER<BR></B></SPAN>
<HR tabIndex=3D-1>
<FONT face=3DTahoma size=3D2><B>De&nbsp;:</B> joz=20
[mailto:doppeltgemoppelt@gmail.com] <BR><B>Envoy=E9&nbsp;:</B> vendredi =
24 ao=FBt=20
2007 12:48<BR><B>=C0&nbsp;:</B> GARNIER Jean-Luc<BR><B>Cc&nbsp;:</B>=20
spip@rezo.net<BR><B>Objet&nbsp;:</B> Re: [Spip] Comment faire pour =
aligner le=20
champ "recherche" et unbouton OK ?<BR></FONT><BR></DIV>
<DIV></DIV>
<META content=3D"OpenOffice.org 2.0 (Linux)" name=3DGENERATOR>
<META content=3D20070824;10275200 name=3DCREATED>
<META content=3D20070824;11434400 name=3DCHANGED>
<STYLE type=3Dtext/css>
  <!--
    @page { size: 21cm 29.7cm; margin: 2cm }
    P { margin-bottom: 0.21cm }
  -->
  </STYLE>

<P style=3D"MARGIN-BOTTOM: 0cm"><FONT face=3Dsans-serif>Tu va devoir =
placer tes=20
boutons dans un tableau.<BR>++<BR>joz<BR></FONT></P><BR><BR>GARNIER =
Jean-Luc=20
wrote:=20
<BLOCKQUOTE=20
cite=3DmidDAD1A8073128274AA5A00A45BE12A92D053CB4C5@GMSEXC03.CORP.DS.GEMPL=
US.COM=20
type=3D"cite">
  <META content=3D"MSHTML 6.00.2900.3132" name=3DGENERATOR>
  <DIV dir=3Dltr align=3Dleft><SPAN class=3D489040609-24082007><FONT =
face=3DTahoma=20
  size=3D2>&gt;<FONT face=3D"Times New Roman" size=3D3>Ton site est =
d=E9j=E0 on ligne pour=20
  qu'on puisse aller voir? </FONT><BR>Non, je travaille en local avec =
EasyPHP...=20
  Mais le code est super simple: j'utilise le formulaire.html fourni =
avec la=20
  dist comme mod=E8le, ci-dessous... Mon ajout est en rouge, je veux =
juste que le=20
  champ texte et le bouton soient c=F4te =E0 c=F4te:=20
  [Rechercher...........................] [OK]</FONT></SPAN></DIV>
  <DIV dir=3Dltr align=3Dleft><SPAN =
class=3D489040609-24082007></SPAN>&nbsp;</DIV>
  <DIV dir=3Dltr align=3Dleft><SPAN =
class=3D489040609-24082007></SPAN>&nbsp;</DIV>
  <DIV dir=3Dltr align=3Dleft><SPAN class=3D489040609-24082007><FONT =
face=3DTahoma=20
  size=3D2>&lt;div class=3D"formulaire_spip =
formulaire_recherche"&gt;<BR>&lt;a=20
  name=3D"formulaire_recherche"=20
  id=3D"formulaire_recherche"&gt;&lt;/a&gt;<BR>&lt;form =
action=3D"[(#ENV{lien})]"=20
  =
method=3D"get"&gt;&lt;div&gt;<BR>&nbsp;[(#ENV{lien}|form_hidden)]<BR>&nbs=
p;[&lt;input=20
  type=3D"hidden" name=3D"lang" value=3D"(#ENV{lang})" =
/&gt;]<BR>&nbsp;&lt;label=20
  =
for=3D"recherche"&gt;&lt;:info_rechercher:&gt;&lt;/label&gt;<BR>&nbsp;&lt=
;input=20
  type=3D"text" class=3D"forml" name=3D"recherche" id=3D"recherche"=20
  value=3D"[(#ENV{recherche}|sinon{&lt;:info_rechercher:&gt;"=20
  onfocus=3D"this.value=3D'';})]" /&gt;<BR><FONT =
color=3D#ff0000>&nbsp;&nbsp;=20
  &amp;nbsp;&lt;input class=3D"spip_bouton" type=3D"submit"=20
  value=3D"ok"&gt;<BR></FONT>&nbsp;&lt;small =
class=3Drecherche_avancee&gt;&lt;a=20
  =
href=3D"?page=3Drecherche&amp;avancee=3D1&amp;recherche=3D#RECHERCHE"&gt;=
&lt;:rechercheavancee:recherche_avancee:&gt;&lt;/a&gt;&lt;/small&gt;<BR>&=
lt;/div&gt;<BR>&lt;/form&gt;<BR>&lt;/div&gt;<BR></FONT></SPAN></DIV>
  <DIV dir=3Dltr align=3Dleft><SPAN class=3D489040609-24082007><FONT =
face=3DTahoma=20
  size=3D2>Merci pour ton aide !</FONT></SPAN></DIV>
  <DIV class=3DSection1>
  <P><SPAN style=3D"FONT-SIZE: 10pt; FONT-FAMILY: Tahoma"><B>Jean-Luc=20
  GARNIER</B></SPAN></P></DIV></BLOCKQUOTE><BR></BODY></HTML>

------_=_NextPart_001_01C7E646.BD9B33D2--
--===============0203930899==
MIME-Version: 1.0
Content-Type: text/plain; charset=iso-8859-1
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

_______________________________________________
liste spip
spip@rezo.net - d=E9sabonnement : spip-off@rezo.net
Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP : http://www.spip.net/
irc://irc.freenode.net/spip
FAQ : FAQ webmestre - SPIP

--===============0203930899==
Content-Type: text/plain; x-avg=cert; charset=us-ascii
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline
Content-Description: "AVG certification"

No virus found in this incoming message.
Checked by AVG Free Edition. Version: 7.5.484 / Virus Database: 269.12.4/969 - Release Date: 23/08/2007 1=
6:04

--===============0203930899==--

joz a écrit :

une liste avec des éléments d'un formulaire ???

ah, c'est mal ca aussi ?
:slight_smile:

Mais bon, je disais que ca devait aussi marcher avec un div.
en fait, je l'ai fait pour du texte, pas pour un bouton, mais ca doit etre pareil.
je crois me souvenir que j'avais renoncé pour les textarea, mais reussit pour les input et les options.
J'utilise plus ce genre de truc maintenant qu'on a des javascripts pour bidouiller...

@++

Stephane a écrit :

joz a écrit :
  

une liste avec des éléments d'un formulaire ???
    
ah, c'est mal ca aussi ?
:slight_smile:

Mais bon, je disais que ca devait aussi marcher avec un div.
en fait, je l'ai fait pour du texte, pas pour un bouton, mais ca doit etre pareil.
je crois me souvenir que j'avais renoncé pour les textarea, mais reussit pour les input et les options.
J'utilise plus ce genre de truc maintenant qu'on a des javascripts pour bidouiller...
  

<div id="search">
                    <form action="recherche.php" method="get">
                        <h2><label for="recherche"><:info_rechercher:></label></h2>
                        <p class="field">
                        <input name="recherche" id="recherche" type="text" size="10" value="" accesskey="4" />
                                               <input type="submit" class="submit" value="OK" /></p>
                    </form></div>

#search {
background : transparent;
color : inherit;
line-height : 2.3em;
}
#search fieldset, #search p {
margin : 0;
padding : 0;
}

Le 24 août 07 à 15:02, Stephane a écrit :

joz a écrit :

une liste avec des éléments d'un formulaire ???

ah, c'est mal ca aussi ?
:slight_smile:

J'utilise plus ce genre de truc maintenant qu'on a des javascripts pour
bidouiller...

Houlà ! Alors JS, ça, c'est TRÉS mal ! :slight_smile:

--
Frédéric Urbain
Webmestre du site http://www.chefprestige.com

Frédéric URBAIN a écrit :

J'utilise plus ce genre de truc maintenant qu'on a des javascripts pour
bidouiller...

Houlà ! Alors JS, ça, c'est TRÉS mal ! :slight_smile:

Non, non, je fais du clean pur CSS qui marche bien pour tout le monde, mais celui qui a droit à JS, il a du "plus beau".
Faut quand meme reconnaitre que les cases à cocher et les boutons d'options sont pas tres sexy en HTML, alors quand on les remplace par des images pour 99% des utilisateurs, on ne se prend pas trop la tete pour les details...
Bon, c'est vrai que des fois, il vaudrait mieux avoir des formulaires qui ressemblent à des formulaires, meme si c'est moins beau, au moins, les gens savent ou cliquer... mais je suis pas graphiste, je suis juste mecano moi.

Et puis l'idée de faire bosser un peu le super proc. dual core de la secretaire plutot que mon vieux serveur ne me deplait pas !
:slight_smile:

Le 24 août 07 à 22:57, Stephane a écrit :

Non, non, je fais du clean pur CSS qui marche bien pour tout le monde,
mais celui qui a droit à JS, il a du "plus beau".

Ah, alors, rien à dire.

Et puis l'idée de faire bosser un peu le super proc. dual core de la
secretaire plutot que mon vieux serveur ne me deplait pas !
:slight_smile:

Attention à ne pas trop charger le dual core ; pour taper une lettre, c'est limite suffisant.

Cela dit, des secrétaires, y'en a plus beaucoup. Depuis que les managères font leur courrier eux-mêmes, je reçois des florilèges de fautes d'orthographe.

--
Frédéric Urbain
Webmestre du site http://www.chefprestige.com