18073 sujets

Questions générales et questions de débutants

[Résolu] Champ de type "password" automatiquement reduit

Bonjour a tous!

J' ai un petit pb avec les champs de type password de mon site: il sont plus petits que les autres champs, uniquement sous IE (cf: capture )

upload/2020-pbpass.JPG

Mon formulaire:
<form action="inscription.php" method="post" class="css" >
  <fieldset>
    <legend>Inscription</legend>
	<br />
	<label for="pseudo">Nom d' utilisateur:</label>
    <input name="pseudo" type="text" id="pseudo" maxlength="45" />
	<br />
	<label for="passwd">Mot de passe:</label>
    <input name="passwd" type="password" id="passwd" maxlength="25" />


Mon css:
form.css fieldset 
  {
  padding: 1em;
  }
form.css label 
  {
  display: inline;
  float: left;
  width: 138px;
  }


Merci a vous! Smiley cligne
Modifié par Jol30 (25 Nov 2005 - 21:34)
Moi j'ai le meme genre de probleme mais avec la hauteur des champs.
C'est vrai que c'est assez embêtant.
Je ne sais pas t'aider, mais attends avec toi une réponse Smiley biggol
Bonjour / bonsoir,

Je viens de tester, et j'ai rajouté un WIDTH sur la balise INPUT et la largeur est identique : 


input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	height: 20px;
	width: 100px;
	border: 1px solid #FF0033;
}


Pour exemple. Et là j'ai bien une largeur similaire... Cela fonctionne tant sur I.E. que sur Opéra (et théoriquement sur FF et compagnies...).
Merci , effectivement ca fonctionne!

Mais du coup le champs mode passe devien trop grand sous les autee navigateurs Smiley ohwell . Je vais laisser comme ca, tempi pours les utilisateurs de IE...
Chose bizarre, j'ai testé cela sous I.E. 6.x, FF1.x, O8.x et tout se passe pour le mieux...

As-tu un exemple en ligne ?
C' est normal que ca marche chez toi puisque tu as appliqué ca a tous les INPUT alors que moi je l ai appliqué seulement aux input#motdepasse
pour laisser la mise en forme pour les boutons du form.
Hello,

Si tu regardes l'exemple suivant : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
	border: 0;
}
fieldset {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #000;
	background-color: #CCC;
	width: 90%;
	border: 1px solid #999;
	margin: 40;
}
input {
	font-family: "Courier New", Courier, mono;
	font-size: x-small;
	color: #000;
	border: 1px solid #666;
}
#formulaire1 fieldset .identification {
	height: 20px;
	width: 150px;
}
-->
</style>
</head>

<body>
<form name="form1" method="post" action="" id="formulaire1">
	<fieldset>
  	<p><label>Nom d'utilisateur</label>
  	  <input type="text" name="textfield0" accesskey="u" tabindex="2" class="identification"></p>
  	<p><label>Mot de passe</label>
	<input type="password" name="textfield1" accesskey="p" tabindex="3" class="identification"></p>
	<p><label>Confirmation mot de passe</label>
	<input type="password" name="textfield2" accesskey="c" tabindex="4"></p>
	</fieldset>
</form>
</body>
</html>

Tu peux constater que j'ai la même longueur pour un champ texte et un champ password via la classe .identification ... Le troisième lui est différent car la classe dite n'est pas appliquée.

De ce fait, je ne vois pas pourquoi tu devrais appliquer à tous les INPUT une longueur précise.

Cela fait partie des "Cascades" classique.

Ici j'applique à tous les INPUT une certaines valeur (bordure, arrière plan et tutti quantim). Par après je crée une classe .identification qui permet de déterminer la longueur du champ.

De fait, nous pouvons aussi spécifier différentes identifications et dans ce cas, la cascade peut être changée...

Pour voir les explications en détails, tu peux voir ce tutoriel ainsi que celui-ci.

Tu pourras après lecture distinguer chaque élément de ta page comme unique et de ce fait lui appliquer le style que tu désires tout en tenant compte que tu peux appliquer une généralité.

Dans l'espoir de t'avoir aidé,

G.
Administrateur
Groumphy a écrit :
Eh bien ... Un petit [Résolus] dans le titre du topics serait pas mal.

[Résolu] tout court suffira amplement Smiley langue
Raphael a écrit :

[Résolu] tout court suffira amplement Smiley langue



Hum ... Désolé Smiley confused . L'orthographe et moi ca fait ... Beaucoup trop !

De plus à me corriger comme cela, tu me rappelles ma "dulcinée" qui est professeur de français. Mais bon, comme tu peux le voir, les cours de langue (premier termes) ont été dévié vers d'autres Smiley lol .
Sujet clos
Aller à