28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un soucis de placement de span sous IE6/7 et pas sous firefox.

Voici le formulaire html à afficher :

<form action="index.php?action=login" method="POST">
<p id="connexion">
Login : <input name="login" type="text" size="15" maxlength="15">
Mot de passe : <input name="mdp"type="password" size="10" maxlength="10">
<input type="submit" value=" Me connecter ">
</form>
<span id="register">
<a href="index.php?action=register">Pas encore inscrit ?</a>
<a href="index.php?action=sendMdp">J\'ai oublié mon mot de passe</a>
</span>
</p>


Et voici le CSS (j'espère qu'il n'y a pas trop d'erreurs :x)

p#connexion{	
	margin:0px;
	padding:0px;
	margin-top:10px;
	padding-left:13px;
	padding-right:0px;
	margin-bottom:0;
	padding-top:0.1em;
	padding-bottom:0.1em;
	top:50%;
	background-color:rgb(192,192,192);
	width:1008px;
	font-weight:bold;
	line-height:27px;
	font-size:0.9em;
	word-spacing:2px;
	border-width:medium;
	border-style:solid;
	border-color:rgb(144,145,147);
}

#register, #forgotmdp{
	margin : 0px;
	padding : 0px;
	margin-left:20px;
}


C'est la première fois que je code avec du CSS, donc suite à mes nombeux essais le #connexion a beaucoup grandi, et peut être qu'il y a beaucoup de lignes inutiles.

Mais comment faire pour avoir le même affichage sous Firefox et IE.

Ce que je ne comprends pas c'est que <span> est de type en ligne, donc il devrait ce trouver à côté (comme sous FF) et pas dessous.

Merci d'avance pour vos réponses.
Modifié par Jabberwock (03 Apr 2007 - 21:30)
salut,
oui, il y a beaucoup de lignes, pas forcément inutiles mais qui pourraient être condensée un poil par ex

padding: 0.1em 0 0.1em 13px;

dans le sens des aiguilles d'une montre, et hop, une ligne au lieu de quatre Smiley smile

sinon, afin d'être un poil plus solide il faudrait remédier avant tout à un truc anti... tout, ton paragraphe connexion qui commence sous le <form> et se finit, après avoir tout englobé, après la fin du formulaire, ça, ça ne peut pas le faire, il faut finir les éléments dans l'ordre inverse où il ont été initialisés, par ex

<div><p><span></span></p></div>


dans ton code il y a lutte intestine et ça, ça se finit toujours mal Smiley cligne

have swing
Merci beaucoup pour cette réponse, qui a résolu mon problème Smiley biggrin

Petite erreur toute bête, j'essai de faire attention aux ouvertures/fermetures mais parfois sa passe.

Une question subsidiaire pour me coucher moins bête.

Si je mets :
<p id="connexion">
<form action="index.php?action=login" method="POST">
Login : <input name="login" type="text" size="15" maxlength="15">
Mot de passe : <input name="mdp"type="password" size="10" maxlength="10">
<input type="submit" value=" Me connecter ">
</form>
<span id="register">
<a href="index.php?action=register">Pas encore inscrit ?</a>
<a href="index.php?action=sendMdp">J\'ai oublié mon mot de passe</a>
</span>
</p>


Ce qui donne en gros :
<p><form></form><span></span></p>


Et bien mon <p> se retrouve comme une petite ligne de 3mm d'épaisseur et en dessous mon formulaire, celui-ci étant hors du bloc.

Je ne comprends pas normalement mon formulaire devrait être inclus dans le bloc <p>, et celui-ci l'englobant, non ? (apprement je me trompe Smiley confused )

Si je mets :
<form action="index.php?action=login" method="POST">
<p id="connexion">
Login : <input name="login" type="text" size="15" maxlength="15">
Mot de passe : <input name="mdp"type="password" size="10" maxlength="10">
<input type="submit" value=" Me connecter ">
<span id="register">
<a href="index.php?action=register">Pas encore inscrit ?</a>
<a href="index.php?action=sendMdp">J\'ai oublié mon mot de passe</a>
</span>
</p>
</form>


En gros :
<form><p><span></span></p></form>


La c'est bon. Smiley sweatdrop
Modifié par Jabberwock (03 Apr 2007 - 21:20)
Oui, ok, mais on peut toujours parler dedans ?

(supprimez ce message svp Smiley smile )
Modifié par Jabberwock (03 Apr 2007 - 21:30)
Bien sûr, il n'est pas clos, et ouvert à la discussion, mais il est juste indiqué qu'il est résolu pour quelqu'un qui pourrait avoir le même problème et qui serait content d'y trouver la solution.

Quant à supprimer ce message, relis bien les règles de ce forum Smiley cligne