Display block et retour à la ligne

Bonjour,

Pour éviter une marge indésirable sur une image qui me sert de submit à un formulaire, je lui ai appliqué un display:block. Seulement maintenant, mon image va à la ligne et je ne veux pas! Comment faire? Je remarque que lorsque je met mon image en dehors du fieldset, elle ne va pas à la ligne...

Voilà ce que ça me fait :


Voilà le css :

.formulaire_cnx {
width:765px;
float:left;
position:relative;
margin:0;
padding:2px 3px;
color:#3C618E;
border:1px solid #E2E2E2;
background:url(../images/fond_connexion.png) repeat-x;
}

.formulaire_cnx fieldset, label, a, input {
margin:0;
padding:0;
}

.formulaire_cnx fieldset {
border:0;
float:left;
}

.formulaire_cnx input {
width:136px;
background-color:#E2E2E2;
border:1px solid #CCCBCB;
-moz-border-radius: 4px;
}


.formulaire_cnx img {
display:block;
vertical-align:bottom;
border:0;
}

et le html dans du php:

echo"<div id='connexion'>";
echo"<form class='formulaire_cnx' id='login' onsubmit='return verif(document.form.nom.value,document.form.mdp.value);' action='verifmembre.php' method='post' enctype='multipart/form-data'>";
echo "<fieldset>";
echo "<label for='login'> Login </label>";
echo "<input name='nom' type='text' id='nom' tabindex='1' />";
echo "<label for='mdp'> Mot de passe </label>";
echo "<input name='mdp' value='' id='mdp' tabindex='2' type='password' onkeypress=\"sendForm(event,'login')\"/>";
echo "<a class='btn' href=\"javascript:document.getElementById('login').submit();\"><img src='images/btn_connexion.png' alt='Connexion' width='17' height='18' /></a>";						
echo "</fieldset>";
echo "</form>";
echo "<p class='inscription'>Si vous n'etes pas encore membre, <a href='inscription/inscription.php'>inscrivez-vous</a></p>";
echo"</div>";

Merci pour votre aide
Modifié par Seb1.9 (18 Feb 2007 - 13:50)

Salut,
la solution logique serait un d'appliquer un diplay:inline-block mais Firefox
ne l'implémente pas encore, mais ça ne va pas durer puisque la
version 3 en préparation va rectifier le tir. Ce qui est une excellente nouvelle au vu des possibilités supplémentaires que cette propriété
peut apporter.

En principe le passage en mode Almost standard (doctype transitional) qui
à justement été implémenté pour pallier à ce décalage vertical réglerait ton
problème.

Si tu souhaites conserver le mode strict alors tu as 2 solution:
> Appliquer une marge infèrieur négative d'environ 4px (pour un texte de taille assez standard).
Cet espace doit se calculer en fonction de la taille du texte puisqu'il
correspond à la hauteur du jambage infèrieur de la lettre.
> ou utiliser une vertcal-align avec la valeur adéquate sachant que
les chiffres sont pris en compte.

Attention : la propriété vertical-align ne s'applique qu'aux éléments en-ligne
et aux éléments de type table-cell (td), donc convertir ton image
en boîte bloc annulera son effet.
Modifié par Hermann (18 Feb 2007 - 16:04)

Ok merci.

J'ai mis en transitional, j'ai mis l'image en display:inline et une marge interne négative à la balise <a> et ça marche. C'est un peu du bidouillage mais bon...

Seb1.9 a écrit :
Ok merci.

J'ai mis en transitional, j'ai mis l'image en display:inline et une marge interne négative à la balise <a> et ça marche. C'est un peu du bidouillage mais bon...

Tu n'as pas compris ce que j'ai essayé de t'expliquer:
le seul passage en mode transitionnal devrait resoudre ton problème
sans avoir a ajouter inutilement de display:inline (les image sont deja de type
inline) ou de marge négative qui peut etre utile que si tu veux conserver
le mode strict.
Modifié par Hermann (18 Feb 2007 - 15:57)

Ok j'ai viré le display inline. Par contre pour que mes input soient alignés avec mon image, j'ai quand même du leur appliquer : position:relative; top:-3px; ...

Bonjour,

Mon Dieu, que vous êtes compliqués, parfois !

Enlevez-moi tous ces flottants, et traitez l'ensemble (form, fieldset, paragraphe) en display:inline.
Modifié par Laurent Denis (18 Feb 2007 - 16:11)

Ce dernier point aurait pu être traité avec une vertical-align (en CSS) sur l'image.

Au passage, il s'agit d'un envoi de formulaire passant obligatoirement par Javascript ?

La position relative même si elle sert à décaler un élément de son
emplacement n'est pas la solution la plus adaptée dans ton cas.
La propriété vertcal-align est à privilégier.
Tu devrais essayer avec

vertical-align:bottom 

ou un valeur en px.

Bon alors j'ai suivi vos recommandation.
Comme a dit Laurent, j'ai tt mis en display:inline et c'est déjà mieux.
Ensuite pour aligner verticalement, j'ai utilisé vertical-align quand c'était possible, sinon position:relative;.

Florent, je passe par Javascript car je veux que le formulaire s'envoit en utilisant la toucher entrer du clavier...

Voici mon nouveau css :

#connexion {
width:773px;
height:24px;
margin:0;
padding:0;
background:url(../images/fond_connexion.png) repeat-x;
}

.formulaire_cnx {
margin:0;
padding:0;
display:inline;
position:relative;
left:15px;
color:#3C618E;
}

.formulaire_cnx fieldset, label, a, input {
display:inline;
margin:0;
padding:0;
}

.formulaire_cnx fieldset {
border:0;
}

.formulaire_cnx label {
vertical-align:middle;
}

.formulaire_cnx input {
position:relative;
top:3px;
background-color:#E2E2E2;
border:1px solid #CCCBCB;
-moz-border-radius: 4px;
}
.formulaire_cnx .btn a {
margin:0;
padding:0;
}


.formulaire_cnx .btn img {
vertical-align:middle;
border:0;
}

#connexion .inscription {
margin:0;
padding:0;
display:inline;
height:24px;
vertical-align:top;
position:relative;
top:3px;
left:30px;
color:#3C618E;
}

#connexion .inscription a {
text-decoration:none;
color:#000000;
}

C'est mieux?

Seb1.9 a écrit :

Florent, je passe par Javascript car je veux que le formulaire s'envoit en utilisant la toucher entrer du clavier...

Uh ?

On se dépêche d'enlever cette horreur, et de faire un bouton de soumission en bonne et due forme !

Laurent Denis a écrit :


Uh ?

On se dépêche d'enlever cette horreur, et de faire un bouton de soumission en bonne et due forme !

C'est à dire?
Mon bouton c'est une image, je ne veux pas que ce soit le bouton tout gris tout moche... comment je fais?

Je voudrais aligner 3 animations flash. Avec IE elles s'affichent très bien, mais dans Firefox il y a un espace blanc à droite de chaque animation. J'ai l'impression que display:block résoud le problème mais je ne veux pas de retour à la ligne. Comment faire?

Seb1.9 a écrit :
Je voudrais aligner 3 animations flash. Avec IE elles s'affichent très bien, mais dans Firefox il y a un espace blanc à droite de chaque animation. J'ai l'impression que display:block résoud le problème mais je ne veux pas de retour à la ligne. Comment faire?

Ceci est un autre problème qui mériterait son propre sujet, histoire de ne pas tout mélanger.


Pour revenir au bouton de formulaire, il est possible d'utiliser un élément de formulaire qui va bien, et qui soit une image.

<input type="image" src="mon-bouton.png" />

C'est pas si compliqué que ça.
Modifié par Florent V. (18 Feb 2007 - 18:56)

Seb1.9 a écrit :
Je voudrais aligner 3 animations flash. Avec IE elles s'affichent très bien, mais dans Firefox il y a un espace blanc à droite de chaque animation. J'ai l'impression que display:block résoud le problème mais je ne veux pas de retour à la ligne. Comment faire?

Cela pourrait venir d'un retour à la ligne de la 2eme balise <object>
au niveau du code. Donc essayer avec

</object><object>

Modifié par Hermann (18 Feb 2007 - 19:01)

<input type="image" src="mon-bouton.png" [b]alt="ici texte alternatif du bouton"[/b] />

Please...

Laurent Denis a écrit :

<input type="image" src="mon-bouton.png" [b]alt="ici texte alternatif du bouton"[/b] />

Please...

Argh, j'avions oublié l'espace d'un instant.
Modifié par Florent V. (24 Feb 2007 - 23:23)