[HTML] alignement des zone text

Marsh Posté le 30-05-2005 à 14:30:10

salut, comment je peux faire pour alligner des zone de texte dans une page HTML merci :jap:

Reply

Marsh Posté le 30-05-2005 à 14:30:10

Reply

Marsh Posté le 30-05-2005 à 14:32:12

Avec une règle...

Plus sérieusement, ils sont comment ? Post un peu de code, parce que là c'est dur de répondre...

Reply

Marsh Posté le 30-05-2005 à 15:56:55

d'accord je m'excuse voilà le code source de la page:
il ya un peu de Vbscript bon je suis débutant en HTML,tu exécutes ce code et tu vas voir les zones de text sont décalés

<html>
<head>
<title>les fonctions date_time</title>
</head>

Nom:<input type=texte name=Tnom><br>
prénom:<input type=text name=Tprenom><br>
Date de naissance:<input type=text name=Tdate><p>
<select name=sel1 size=4>
<option>Date
<option>Mois
<option>Jour
<option>Année
</select>
<select name=sel2 size =3>
<option>Heure
<option>Minute
<option>Seconde
</select>
<p>
Heure:<input type=text name=Theur><br>
Minute:<input type=text name=Tmin><br>
Seconde:<input type=text name=Tsec><br>
<br>
Commentaire:<textarea name=Tarea rows=6 cols=50></textarea>
<p>
<input type=Reset name=Raf value="Rafraîchir">
<input type=Reset name=Efac value="Effacer">

<Script language="vbscript">
sub sel1_onclick()
indx=sel1.selectedindex
if Tdate.value="" then
msgbox "Entrer la date de naissance svp!",vbexclamation,"Attention"
end if
if indx=0 then
msgbox "la date est:" & cdate(Tdate.value),vbinformation,"Information"
end if
if indx=1 then
msgbox "le mois est:" & month(Tdate.value),vbinformation,"Information"
end if
if indx=2 then
msgbox "le jour est:" & day(Tdate.value),vbinformation,"Information"
end if
if indx=3 then
msgbox "l'année est:" & year(Tdate.value),vbinformation,"Information"
end if
end sub
sub sel2_onclick()
msgbox time
indx=sel2.selectedindex
if indx=0 then
Theur.value=hour(time)
end if
if indx=1 then
Tmin.value=minute(time)
end if
if indx=2 then
Tsec.value=second(time)
end if
end sub
sub Raf_onfocus()
Tarea.value="votre nom est :" & Tnom.value & chr(13) & "votre prénom est :" & Tprenom.value & chr(13) & "Date de naissance : " & Tdate.value
end sub
sub Efac_onclick()
dim var

Tnom.value=""
Tprenom.value=""
Tdate.value=""
Theur.value=""
Tmin.value=""
Tsec.value=""
Tarea.value=""

end sub
</script>
</body>
</html>

Reply

Marsh Posté le 30-05-2005 à 16:07:31

L'interet de poster 50 lignes de script VB alors que ta question porte sur la partie HTML ?

Reply

Marsh Posté le 30-05-2005 à 19:19:59

ok tu peux dire ce que tu veux sans prb mais au moins réponds à ma question svp.
moi c'est expret que j'ai envoyé tous le code pour le copier et le coller pour directement voir le prb que j'aie voilà si tu veux le partie où il est le prb voilà

Nom:<input type=texte name=Tnom><br>
prénom:<input type=text name=Tprenom><br>
Date de naissance:<input type=text name=Tdate><p>

Heure:<input type=text name=Theur><br>
Minute:<input type=text name=Tmin><br>
Seconde:<input type=text name=Tsec><br>

comment je peux alligner ces zones de texte !!!

Reply

Marsh Posté le 30-05-2005 à 19:34:39

.form div {
float: left;
width: 200px;
}

<div class="form"><div>Nom :</div>Pouet</div>

Message édité par afbilou le 30-05-2005 à 19:47:31

Reply

Marsh Posté le 30-05-2005 à 20:51:20

merci j'ai pas bien compris ce code ou je peux le faire???

Reply

Marsh Posté le 30-05-2005 à 20:53:46

est ce que tu peux m'expliqué un peu et merci

Reply

Marsh Posté le 30-05-2005 à 21:09:08

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
.form div {
float: left;
width: 80px;
text-align: right;
padding-right: 5px;
}
</style>
</head>
<body>
<div class="form"><div>Nom :</div><input type="text" /></div>
<div class="form"><div>Prénom :</div><input type="text" /></div>
<div class="form"><div>Pouet :</div><input type="text" /></div>
<div class="form"><div>Super :</div><input type="text" /></div>
</body>
</html>

Voila en gros un rapide exemple.
Ca utilise Une feuille de style CSS pour mettre en forme. Renseigne toi sur google pour trouver des tuto qui t'expliqueront en quoi ca consiste.

Reply

Marsh Posté le 30-05-2005 à 22:27:24

afbilou a écrit :

Code :

<div class="form"><div>Nom :</div><input type="text" /></div>
<div class="form"><div>Prénom :</div><input type="text" /></div>
<div class="form"><div>Pouet :</div><input type="text" /></div>
<div class="form"><div>Super :</div><input type="text" /></div>

[:johneh]
Mais c'est quoi cette saleté?

[:natas]

Puis d'ailleurs pourquoi les div se finissent par deux </div> simultanés?

Message édité par masklinn le 30-05-2005 à 22:28:20

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 30-05-2005 à 22:27:24

Reply

Marsh Posté le 30-05-2005 à 23:15:01

masklinn a écrit :

[:johneh]
Mais c'est quoi cette saleté?

[:natas]

Puis d'ailleurs pourquoi les div se finissent par deux </div> simultanés?

:heink:

Reply

Marsh Posté le 30-05-2005 à 23:18:43

masklinn a écrit :

[:johneh]
Mais c'est quoi cette saleté?

[:natas]

Puis d'ailleurs pourquoi les div se finissent par deux </div> simultanés?

ben c'est de la grosse marde ki pue

dans tes styles :

Code :

LABEL.form {
width:200px;
display:block;
float:left;
}

et ton HTML

Code :

<label class="form">Nom:</label><input type=texte name=Tnom><br>
<label class="form">prénom::</label><input type=text name=Tprenom><br>
<label class="form">Date de naissance::</label><input type=text name=Tdate><p>
<label class="form">Heure::</label><input type=text name=Theur><br>
<label class="form">Minute::</label><input type=text name=Tmin><br>
<label class="form">Seconde::</label><input type=text name=Tsec><br>

Reply

Marsh Posté le 30-05-2005 à 23:20:36

et en plus afbilou tu as tout utilisé a l'envers.

c'est pas .form DIV dans ton cas mais DIV.form

si ca avait été .FORM DIV
au niveau du code ca serait :
<form class="form">
<DIV></div>
</form>

Reply

Marsh Posté le 30-05-2005 à 23:33:08

bah non

Reply

Marsh Posté le 30-05-2005 à 23:36:29

bah si

parce que dans ton cas toi
tu défini l'attribut DIV qui se trouve dans un élément de classe "form"
alors que en temps normal ca aurait plutot été de désigné un attribut div de classe FORM

Reply

Marsh Posté le 30-05-2005 à 23:38:56

bah non

tu fais bien comme tu veux ... mais le CSS associé a mon exemple est juste.

Reply

Marsh Posté le 31-05-2005 à 00:09:36

afbilou a écrit :

bah non

tu fais bien comme tu veux ... mais le CSS associé a mon exemple est juste.

...

putain j'avais pas vu, tu fais des nesting de div multiples et tu utilises pas de <form>, ce code est encore plus merdique que ce que je pensais [:mlc]

(et gatsudat ton code est aussi moche que le sien, BTW)

<html>
<head>
<title>test</title>
</head>
<body>
<form action="" method="post">
<fieldset id="identity">
<legend>Identité</legend>
<label for="idNom">Nom: <input type="text" id="idNom" name="idNom" /></label>
<label for="idPrenom">Prenom: <input type="text" id="idPrenom" name="idPrenom" /></label>
<label for="idMachin">Machin: <input type="text" id="idMachin" name="idMachin" /></label>
</fieldset>
</form>
</body>
</head>

#identity label {
display: block;
width: 250px;
text-align: right;
}
#identity label input {
width: 150px;
}

Et voila, un formulaire avec un markup correct [:spamafote]

Message édité par masklinn le 31-05-2005 à 00:18:41

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 31-05-2005 à 00:37:26

masklinn a écrit :

Et voila, un formulaire avec un markup correct
[:spamafote]

:heink: La question n'est absolument pas la ...
<label> et <form> ne sont pas le sujet ... il souhaite une methode pour que les champs de texte a gauche soient correctement alignés par rapport aux champs qui se trouveront a droite. Si l'envie lui vient de mettre un <select> ou un <textarea> dans les champs de droite (ou meme une image) les labels ne seront plus alignes dans ton exemple : ce n'est donc pas ce k'il veut. Voila pourquoi j'ai fait des <div> imbriqués. A lui de les remplacer par des elements semantiques plus adaptés par la suite ...

Message édité par afbilou le 31-05-2005 à 00:37:55

Reply

Marsh Posté le 31-05-2005 à 00:41:20

afbilou a écrit :

Voila pourquoi j'ai fait des <div> imbriqués. A lui de les remplacer par des elements semantiques plus adaptés par la suite ...

Quel dommage que tu n'ais pas mentionné la chose
Et que l'utilisation des divs reste inadaptée
Et que mon exemple tienne la route même en cas d'utilisation d'options ou textareas

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 31-05-2005 à 00:45:53

Bah non si tu mets un select dans ton exemple ca ne sera jamais bien aligné puiske tu donnes une largeur aux elements de droite et que cette largeur n'aura pas le meme rendu avec un input ou un select par exemple.

Reply

Marsh Posté le 31-05-2005 à 01:12:45

Dans l'etat actuel ton code ne peut pas lui assurer un affichage comme celui-ci :

C'est de cette maniere que j'interprete sa demande. Alors je me suis peut-etre trompé dans l'interpretation mais pour arriver au resultat de l'image ma solution tiens tout a fait la route. Tu arriveras peut-etre a comprendre que dans un code qui te parait faux il y a peut-etre derriere une conceptualisation et/ou un but differents des tiens. La prochaine fois tu garderas peut-etre tes sarcasmes deplacés sur un forum public.

Reply

Marsh Posté le 31-05-2005 à 01:16:01

Citation :

Bah non si tu mets un select dans ton exemple ca ne sera jamais bien aligné puiske tu donnes une largeur aux elements de droite et que cette largeur n'aura pas le meme rendu avec un input ou un select par exemple.

[:mlc]

Bien sûr que si [:mlc]

afbilou a écrit :

Dans l'etat actuel ton code ne peut pas lui assurer un affichage comme celui-ci :
http://afbilou.free.fr/tmp/exemple.jpg

bien sûr que non, le code actuel tient en tant que tel mais n'est pas autoextensible

Citation :

pour arriver au resultat de l'image ma solution tiens tout a fait la route

graphiquement peut être, sémantiquement elle n'a strictement aucun sens [:itm]

Message édité par masklinn le 31-05-2005 à 01:18:38

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 31-05-2005 à 01:34:29

Citation :

[:mlc]
Bien sûr que si [:mlc]

Ecoute mets un select dans un des champs dans ton code et tu verras que la largeur n'est pas la meme : la difference se joue a 2 / 3 pixels et ca reste inesthetique.

Citation :

bien sûr que non, le code actuel tient en tant que tel mais n'est pas autoextensible

C'est pour cela que je parle de difference de conceptualisation et de but a atteindre.

Citation :

graphiquement peut être, sémantiquement elle n'a strictement aucun sens [:itm]

Je me risquerait pas a mettre du semantique dans un code d'exemple pour une question de positionnement des elements.
Pour le coup ca n'a aucun sens ... on ne sait pas comment Toti2006 va ecrire sa page au final. Il veut du potionnement alors je lui offre un code sans me preocuper de la semantique et a ce titre <div> remplacera n'importe quel balise block et span une balise inline.

Reply

Marsh Posté le 31-05-2005 à 01:40:54

voilà merci afbilou c'est corecte ton source 100% mais comme tu m'a dit c'est de style CSS, je vais essayer aussi de faire un alignement par une table je pense que ca va marcher

Reply

Marsh Posté le 31-05-2005 à 01:46:59

Toti2006 a écrit :

voilà merci afbilou c'est corecte ton source 100% mais comme tu m'a dit c'est de style CSS, je vais essayer aussi de faire un alignement par une table je pense que ca va marcher

Bah non, si tu debutes autant commencer par des bonnes methodes. Pour la mise en page et le positionnement des elements il ne faut pas utiliser table. Certes ca fonctionnera mais ce n'est pas le but de cette balise et tu t'exposes a un code lourd, penible a maintenir, absolument pas souple. Essaie de faire l'effort d'assimiler la mise en forme d'un document avec des CSS

Reply

Marsh Posté le 31-05-2005 à 01:53:46

voilà ca marche avec une table
<table>
<tr>
<td>Nom:</td><td><input type=texte name=Tnom></td><br>
</tr>
<td>prénom:</td><td><input type=text name=Tprenom></td><br>
</tr>
<td>Date de naissance:</td><td><input type=text name=Tdate></td><p>
</tr>
</table>

Reply

Marsh Posté le 31-05-2005 à 01:58:51

Fait comme tu veux mais c'est tout de meme dommage d'utiliser une table pour cela.

Par contre le code de ta table est bourré d'erreur :
<tr> PUIS </tr> determinent une ligne, donc il ne faut pas oublier l'un ou l'autre (tu as fait plein d'oublis)

<td> PUIS </td> determinent une case et mettre du code en dehors (comme <br> ) n'est pas valide.

Reply

Marsh Posté le 31-05-2005 à 01:59:03

oui tu as raison mon ami mais tu sais j'ai pas compris à quoi ça sert la balise <div>
et aussi moi je connais pas c'est koi CSS??

Reply

Marsh Posté le 31-05-2005 à 02:03:01

bon si tu veux sbilou je te donne mon msn pour discuter si tu as un peu du temps pour moi

Reply

Marsh Posté le 31-05-2005 à 02:03:49

afbilou a écrit :

Dans l'etat actuel ton code ne peut pas lui assurer un affichage comme celui-ci :
http://afbilou.free.fr/tmp/exemple.jpg

C'est de cette maniere que j'interprete sa demande. Alors je me suis peut-etre trompé dans l'interpretation mais pour arriver au resultat de l'image ma solution tiens tout a fait la route. Tu arriveras peut-etre a comprendre que dans un code qui te parait faux il y a peut-etre derriere une conceptualisation et/ou un but differents des tiens. La prochaine fois tu garderas peut-etre tes sarcasmes deplacés sur un forum public.

son code permet de faire un affichage comme tu veux. Je fais grosso modo la même chose

Sauf que a la place de

Code :

<label for="idPrenom">Prenom: <input type="text" id="idPrenom" name="idPrenom" /></label>

je fais

Code :

<label for="idPrenom">Prenom: </label> <input type="text" id="idPrenom" name="idPrenom" />

(sémentiquement, c'est peut être différent :??: )

d'autre exemple :
http://www.fastclemmy.com/index.ph [...] ement-beau

Message édité par zapan666 le 31-05-2005 à 02:04:58

---------------
my flick r - Just Tab it !

Reply

Marsh Posté le 31-05-2005 à 02:20:11

Que d'activite sur ce topic

Sémantiquement ton code me parait juste : rien ne t'oblige a faire un <label> qui englobe le champs du formulaire auquel il fait reference. Cela dit j'aime bien la solution qu'utilise Masklinn.

Pour ce qui est du positionnement y a tout de meme une difference importante du fait du <label> englobant justement. En tout cas il n'y a pas de solution plus juste qu'une autre du point de vue du positionnement : il y a autant de solutions que de maniere d'aborder le probleme et le resultat depend des contraintes qu'on se fixe. La methode que j'utilise, la tienne, et celle de Masklinn ne repondent pas au memes attentes et ne sont pas du tout equivalentes.

Message édité par afbilou le 31-05-2005 à 02:22:21

Reply

Marsh Posté le 31-05-2005 à 02:43:29

j'attends ta réponse afbilou tu veux?

Reply

Marsh Posté le 31-05-2005 à 02:50:42

Je n'avais pas vu ton poste sur msn.

Tu ferais mieux de poser tes questions sur le forum pour que :

1. tu es plus d'avis et de conseils
2. que d'autres personnes par la suite puisse profiter des questions et reponses données dans ce topic et dans les autres.

Et enfin je n'ai pas trop le temps ni l'envie de m'investir dans un cours particulier

Reply

Marsh Posté le 31-05-2005 à 02:58:34

:-) ah bon ok je m'excuse afbilou et merci bcp pour tous que tu m'a dit, l'essentiel maint le code source ca marche bien

Reply

Marsh Posté le 31-05-2005 à 08:14:16

zapan666 a écrit :

son code permet de faire un affichage comme tu veux. Je fais grosso modo la même chose

Sauf que a la place de

Code :

<label for="idPrenom">Prenom: <input type="text" id="idPrenom" name="idPrenom" /></label>

je fais

Code :

<label for="idPrenom">Prenom: </label> <input type="text" id="idPrenom" name="idPrenom" />

(sémentiquement, c'est peut être différent :??: )

d'autre exemple :
http://www.fastclemmy.com/index.ph [...] ement-beau

Sémantiquement la valeur est la même, mais les effets produits ne sont pas les mêmes (donc on peut jouer sur les deux solutions ):
Avec la méthode que tu décris les tailles du label et du champ sont indépendants, et l'alignement des mots (text-align) sont indépendants, alors qu'avec la mienne la taille du label doit prendre en compte celle du champ et l'alignement des mots est le même pour le label et le champ.

Les contraintes ne sont pas exactement les mêmes au niveau stylistiques et on n'obtient pas exactement les mêmes effets dans les deux cas

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le

Reply

[HTML] alignement des zone text

Sujets relatifs:

Leave a Replay