28173 sujets

CSS et mise en forme, CSS3

Casse tête de mise en page

Bonjour à tous,

J'ai un gros soucis de mise en page. Bien sûr j'ai déjà regardé un peu partout sur le site mais je trouve pas vraiment de réponse à mon problème.

Voilà, j'essai de me faire un truc tout simple de saisie login/mdp avec des css (sans tableaux, c'est pour moi une première Smiley cligne ). Mon problème vient des alignements de mes éléments.
Comme une image parle plus que des mots voilà ce que j'obtiens:
upload/5603-mauvais.jpg

et voilà ce que je voudrais:
upload/5603-bon.jpg

et mon code pour finir (je l'ai bricolé dans tous les sens mais j'arrive à rien...):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
.fnt
{
	font:bold 12px "Comic Sans MS", Arial, Georgia, sans-serif; color:white;
	background-color:transparent; width:95px;
}
#cnx
{
	background-image:url(essai.jpg);
	width:160px; height:104px; padding:7px 0 0 10px;
	text-align:left;
}
</style>
</head>
<body>
	<form name="formcnx" method="post" action="" id="cnx" class="fnt">
		<label for="pseudo">Pseudo:<br />
			<input type="text" name="pseudo" maxlength="20"/>
		</label>
		<label for="mdp">Mot de passe:<br />
			<input type="password" name="mdp" maxlength="15"/>
		</label>
		<input type="submit" value="Rec"/>
	</form>
</body>
</html>


Si quelqu'un pouvait m'aider et me dire comment arriver à faire ca en restant si possible dans la norme (sans utiliser de tableaux)...merci d'avance.
Mince je viens de me rendre compte que mes images sont pourries...Faut les envoyer en gif pour qu'elles apparaissent correctement ?

Je retente, ca c'est ce que j'obtiens:
upload/5603-mauvais.gif

ca c'est ce que je voudrais:
upload/5603-bon.gif

... bon c'est mieux mais la dimension en bas cache un peu le bouton rec...
Modifié par charles ingalls (15 Mar 2006 - 14:04)
Salut,

pour les images, c'est ok, si on clique dessus, on les voie bien Smiley cligne

Pour ton problème, il semble que tes champs textes sont trop grands et agrandissent ton blog. Tu peux régler leur taille en css en redéfinissant par exemple la balise input:


input {
width: 200px;
height: 20px;
line-height: 20px;
}


Sinon, j'aime bien ta femme Charles...
Tututut pas touche à Caroline... Smiley cligne

Merci pour ta réponse, j'ai donc ajouter et un peu régler le 'input' mais ca reste toujours pas terrible:
upload/5603-bad.jpg

J'ai déjà le soucis du padding (mais koi mettre à la place ?) pour laisser un bord autour du formulaire, il me decale l'image à droite et en bas...
Ensuite le bouton rec s'agrandit en même temps que les autres champs input (normale mais pas top, je le remplacerai s'il faut par une image), mais je sais toujours pas comment le positionner correctement en bas à droite...

Si t'as des solutions pour ca aussi...
Modifié par charles ingalls (15 Mar 2006 - 22:24)
Sujet clos
Aller à