OVH Cloud OVH Cloud

positionnement élements de formulaire impossible

5 réponses
Avatar
Christophe PEREZ
Bonjour,

Quelqu'un saurait-il détecter pourquoi, dans :

http://novazur.homedns.org/chris_scoop/index2.html

je suis totalement incapable de réduire cette marge au dessus des
éléments de formulaire dans le bandeau "Rechercher" du haut ?

Parce que franchement, moi, je rame, je rame...

J'ai beau mettre tout ce que je veux comme margin, positif voire même
négatif sur mes #cadre_recherche SELECT {} et #cadre_recherche INPUT {},
ça ne change strictement rien.
Et que ce soit sous firefox/Linux ou IE6/Windows XP, c'est idem.

Ça doit être un truc tout bête, mais comme par définition, c'est le
truc introuvable quand on a fait soit même la page.
Le code du formulaire est à la ligne 82 du html, et la partie CSS ligne
184.

Merci d'avance à ceux qui voudront bien se donner la peine car je sais
bien que ce n'est pas simple de décoder comme ça un truc au pied levé.

--
Christophe PEREZ
Écrivez moi sans _faute !

5 réponses

Avatar
François Battail
Le Tue, 30 Nov 2004 15:28:17 -0400, Christophe PEREZ a écrit :

Bonsoir,

Quelqu'un saurait-il détecter pourquoi, dans :

http://novazur.homedns.org/chris_scoop/index2.html

je suis totalement incapable de réduire cette marge au dessus des
éléments de formulaire dans le bandeau "Rechercher" du haut ?



Juste fait ça dans FF :

#cadre_recherche SELECT {
color: #0100FE;
width: 100px;
font-size: 90%;
margin: 0;
position: relative ;
top: -20px;

}
#cadre_recherche INPUT {
color: #505050;
font-size: 90%;
position: relative ;
top: -20px;

}

Et c'est OK, (pas testé sous IE because sous Linux), enfin peut être
utiliser des em plutôt que des px.

@+
fb
Avatar
Christophe PEREZ
Le Tue, 30 Nov 2004 21:42:21 +0100, François Battail a écrit:

position: relative ;
top: -20px;



Mais c'est dingue, d'où elle sort cette marge haute ?
Car là, tu avoueras comme moi que c'est tricher que de faire ça, même
si je suis vais me contenter de cette solution pour l'instant ;-)

Pourquoi "me contenter" ? parce que malgré cette "remontée" des
champs, je me retrouve toujours avec une espace entre #cadre_recherche et
#menu_interne qui n'existe pas si je vire les champs. Comme si le fait de
les faire remonter laissait malgré tout quelque chose en bas.

Et c'est OK, (pas testé sous IE because sous Linux



moi aussi sous Linux, mais pour faire ce genre de chose, je suis obligé
d'avoir le portable allumé rien que pour tester ;-)


), enfin peut être
utiliser des em plutôt que des px.



Ben, en général, c'est ce que je fais, mais faut avouer qu'une mise en
page en px, c'est quand même plus fastoche ;-)

--
Christophe PEREZ
Écrivez moi sans _faute !
Avatar
Christophe PEREZ
Le Tue, 30 Nov 2004 17:14:21 -0400, Christophe PEREZ a écrit:

je me retrouve toujours avec une espace entre #cadre_recherche et
#menu_interne qui n'existe pas si je vire les champs. Comme si le fait de
les faire remonter laissait malgré tout quelque chose en bas.



En fait, je me rends compte que je n'ai plus ce PB que sous IE.
Et que c'est le FORM qui descend jusque là... Pourquoi ? Allez savoir.

Ce qui est donc réglé salement mais provisoirement par un :
FORM { -margin-bottom: -2px;}

--
Christophe PEREZ
Écrivez moi sans _faute !
Avatar
Philippe Chaissac
Christophe PEREZ a écrit :
Le Tue, 30 Nov 2004 21:42:21 +0100, François Battail a écrit:


position: relative ;
top: -20px;





Vire moi ça tout de suite, goret ;-) !

Mais c'est dingue, d'où elle sort cette marge haute ?



Tes champs sont alignés sur la ligne de base comme ton image.

Car là, tu avoueras comme moi que c'est tricher que de faire ça, même
si je suis vais me contenter de cette solution pour l'instant ;-)



Corrige par :
#cadre_recherche IMG{ vertical-align:middle }
Avatar
Christophe PEREZ
Le Tue, 30 Nov 2004 23:01:08 +0100, Philippe Chaissac a écrit:

position: relative ;
top: -20px;





Vire moi ça tout de suite, goret ;-) !



Oui m'sieur !

Mais c'est dingue, d'où elle sort cette marge haute ?



Tes champs sont alignés sur la ligne de base comme ton image.



Non, pas dans la version initiale.
Mes images font 39px de haut, le <div> contenant, 41px, et les champs du
formulaire, sans le top=-.., sont à cheval sur le bas du cadre du <div>.

Corrige par :
#cadre_recherche IMG{ vertical-align:middle }



Ah !!!!
Je viens enfin de comprendre à quoi sert le vertical-align ailleurs que
dans un tableau... et comme je n'utilise plus de tableau pour la mise en
page, j'en avais même oublié son existence ;-)

Merci _beaucoup_ !

--
Christophe PEREZ
Écrivez moi sans _faute !