Donc quelles précautions faut'il prendre pour "encastrer" un design dans
l'autre étant entendu que le design de la "form" à des trucs du genre :
div.row {
clear: both; ////////<<<<<<<<<<<<<<<
width: 335px;
bien sûr je passerai aussi en design fluide et changerai les width de px
en %.
Donc quelles précautions faut'il prendre pour "encastrer" un design dans
l'autre étant entendu que le design de la "form" à des trucs du genre :
div.row {
clear: both; ////////<<<<<<<<<<<<<<<
width: 335px;
bien sûr je passerai aussi en design fluide et changerai les width de px
en %.
Donc quelles précautions faut'il prendre pour "encastrer" un design dans
l'autre étant entendu que le design de la "form" à des trucs du genre :
div.row {
clear: both; ////////<<<<<<<<<<<<<<<
width: 335px;
bien sûr je passerai aussi en design fluide et changerai les width de px
en %.
eh bien non ...
pas possible de fixer des largeurs dans un design "elastique"
il faut que tout reste élastique
à la rigueur on pourra indiquer une largeur minimum
div.row {
min-width: 125px;
width: 80%;
}
par exemple.
> bien sûr je passerai aussi en design fluide et changerai les width de px
> en %.
ben alors puisque tu assouplis la présentation
où est le blème ?
#contenu form
{
position: relative;
width: 90%;
margin: auto;
text-align: right;
background: #777;
color: white;
padding: 6px;
}
#contenu form input[type="text"],
#contenu form textarea
{
width: 69%;
background: #ddd;
color: maroon;
vertical-align: top;
}
et
<form blabla>
<p>nom, prénom : <input name="nom" type="text" /></p>
<p>sujet : <input name="objet" type="text" value=""/></p>
<p>message : <textarea name="info" rows="5" cols="30"></textarea></p>
.../...
eh bien non ...
pas possible de fixer des largeurs dans un design "elastique"
il faut que tout reste élastique
à la rigueur on pourra indiquer une largeur minimum
div.row {
min-width: 125px;
width: 80%;
}
par exemple.
> bien sûr je passerai aussi en design fluide et changerai les width de px
> en %.
ben alors puisque tu assouplis la présentation
où est le blème ?
#contenu form
{
position: relative;
width: 90%;
margin: auto;
text-align: right;
background: #777;
color: white;
padding: 6px;
}
#contenu form input[type="text"],
#contenu form textarea
{
width: 69%;
background: #ddd;
color: maroon;
vertical-align: top;
}
et
<form blabla>
<p>nom, prénom : <input name="nom" type="text" /></p>
<p>sujet : <input name="objet" type="text" value=""/></p>
<p>message : <textarea name="info" rows="5" cols="30"></textarea></p>
.../...
eh bien non ...
pas possible de fixer des largeurs dans un design "elastique"
il faut que tout reste élastique
à la rigueur on pourra indiquer une largeur minimum
div.row {
min-width: 125px;
width: 80%;
}
par exemple.
> bien sûr je passerai aussi en design fluide et changerai les width de px
> en %.
ben alors puisque tu assouplis la présentation
où est le blème ?
#contenu form
{
position: relative;
width: 90%;
margin: auto;
text-align: right;
background: #777;
color: white;
padding: 6px;
}
#contenu form input[type="text"],
#contenu form textarea
{
width: 69%;
background: #ddd;
color: maroon;
vertical-align: top;
}
et
<form blabla>
<p>nom, prénom : <input name="nom" type="text" /></p>
<p>sujet : <input name="objet" type="text" value=""/></p>
<p>message : <textarea name="info" rows="5" cols="30"></textarea></p>
.../...
SAM wrote:width: 80%;
oui; ,ais les 80 % là; j'imagine qu'il réfèrent qu contenant
#contenu form
{
position: relative;
width: 90%;
margin: auto;
ça fait quoi exactement "margin: auto;" ???
Ah oui bien vu ce "vertical-align: top;" !!!
SAM<stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
width: 80%;
oui; ,ais les 80 % là; j'imagine qu'il réfèrent qu contenant
#contenu form
{
position: relative;
width: 90%;
margin: auto;
ça fait quoi exactement "margin: auto;" ???
Ah oui bien vu ce "vertical-align: top;" !!!
SAM wrote:width: 80%;
oui; ,ais les 80 % là; j'imagine qu'il réfèrent qu contenant
#contenu form
{
position: relative;
width: 90%;
margin: auto;
ça fait quoi exactement "margin: auto;" ???
Ah oui bien vu ce "vertical-align: top;" !!!
> oui; ,ais les 80 % là; j'imagine qu'il réfèrent qu contenant
oui, si et *seulement si* ce contenant a une position
(absolute,relative,...)
>> #contenu form
>> {
>> position: relative;
>> width: 90%;
>> margin: auto;
>
> ça fait quoi exactement "margin: auto;" ???
ça centre la boite là dont il est question, ici le form
(les marges s'égalisent totomatiquement)
> Ah oui bien vu ce "vertical-align: top;" !!!
<http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align>
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
> oui; ,ais les 80 % là; j'imagine qu'il réfèrent qu contenant
oui, si et *seulement si* ce contenant a une position
(absolute,relative,...)
>> #contenu form
>> {
>> position: relative;
>> width: 90%;
>> margin: auto;
>
> ça fait quoi exactement "margin: auto;" ???
ça centre la boite là dont il est question, ici le form
(les marges s'égalisent totomatiquement)
> Ah oui bien vu ce "vertical-align: top;" !!!
<http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align>
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
> oui; ,ais les 80 % là; j'imagine qu'il réfèrent qu contenant
oui, si et *seulement si* ce contenant a une position
(absolute,relative,...)
>> #contenu form
>> {
>> position: relative;
>> width: 90%;
>> margin: auto;
>
> ça fait quoi exactement "margin: auto;" ???
ça centre la boite là dont il est question, ici le form
(les marges s'égalisent totomatiquement)
> Ah oui bien vu ce "vertical-align: top;" !!!
<http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align>
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
SAM wrote:oui; ,ais les 80 % là; j'imagine qu'il réfèrent qu contenant
oui, si et *seulement si* ce contenant a une position
(absolute,relative,...)
pas clair,
mais ça semble rouler même dans mon cas où tout est flottant
et en %, ou presque qq petits padding en px.#contenu form
{
margin: auto;
ça fait quoi exactement "margin: auto;" ???
ça centre la boite là dont il est question, ici le form
(les marges s'égalisent totomatiquement)
c'est plus zoli alors...
et l'alignement horizontal d'un texte dans un span, ça se règle comment,
si je touche au padding, ça me va pas car ça change la width, pas zoli.
je lis chez yoyo :
'text-align'
Valeur :
left | right | center | justify |<chaîne> | inherit
on ne peut pas mettre le texte à x% du bord gauche, par exemple, sans
toucher à la largeur ???
SAM<stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
oui; ,ais les 80 % là; j'imagine qu'il réfèrent qu contenant
oui, si et *seulement si* ce contenant a une position
(absolute,relative,...)
pas clair,
mais ça semble rouler même dans mon cas où tout est flottant
et en %, ou presque qq petits padding en px.
#contenu form
{
margin: auto;
ça fait quoi exactement "margin: auto;" ???
ça centre la boite là dont il est question, ici le form
(les marges s'égalisent totomatiquement)
c'est plus zoli alors...
et l'alignement horizontal d'un texte dans un span, ça se règle comment,
si je touche au padding, ça me va pas car ça change la width, pas zoli.
je lis chez yoyo :
'text-align'
Valeur :
left | right | center | justify |<chaîne> | inherit
on ne peut pas mettre le texte à x% du bord gauche, par exemple, sans
toucher à la largeur ???
SAM wrote:oui; ,ais les 80 % là; j'imagine qu'il réfèrent qu contenant
oui, si et *seulement si* ce contenant a une position
(absolute,relative,...)
pas clair,
mais ça semble rouler même dans mon cas où tout est flottant
et en %, ou presque qq petits padding en px.#contenu form
{
margin: auto;
ça fait quoi exactement "margin: auto;" ???
ça centre la boite là dont il est question, ici le form
(les marges s'égalisent totomatiquement)
c'est plus zoli alors...
et l'alignement horizontal d'un texte dans un span, ça se règle comment,
si je touche au padding, ça me va pas car ça change la width, pas zoli.
je lis chez yoyo :
'text-align'
Valeur :
left | right | center | justify |<chaîne> | inherit
on ne peut pas mettre le texte à x% du bord gauche, par exemple, sans
toucher à la largeur ???
>
> pas clair,
c'est limpide :
on règle la largeur proportionnellement à une des boites contenantes
laquelle ?
le 1er ancêtre/parent dont la position est définie (stylée)
c'est valable pour les largeurs, hauteurs, marges, paddings, quand ils
sont stylés en %
> mais ça semble rouler même dans mon cas où tout est flottant
> et en %, ou presque qq petits padding en px.
>
>>
>>>> #contenu form
>>>> {
>>>> margin: auto;
>>>
>>> ça fait quoi exactement "margin: auto;" ???
>>
>> ça centre la boite là dont il est question, ici le form
>> (les marges s'égalisent totomatiquement)
>
> c'est plus zoli alors...
ça fait là c'que tu d'mandes : un 'tit espace, à gauche, à droite
bien propre le même
> et l'alignement horizontal d'un texte dans un span, ça se règle comment,
un span est *in-réglable* pour ce qui est des dimensions ! !
span { width:2000px }
ne fera rien du tout
il faut alors le transformer en block
display: block;
et le + souvent ça met alors la zone
> si je touche au padding, ça me va pas car ça change la width, pas zoli.
heu ... le padding d'un span ?
ça ne devrait pas changer la width de son contenant ... !
ben ... si tu ajoutes de l'espace dans le span, forcément ça l'élargit.
> je lis chez yoyo :
> 'text-align'
> Valeur :
> left | right | center | justify |<chaîne> | inherit
>
> on ne peut pas mettre le texte à x% du bord gauche, par exemple, sans
> toucher à la largeur ???
le texte à x de *quel* bord gauche ?
- celui du span ?
au choix :
span { margin-left: 10px; }
span { padding-left: 10px; }
span { padding-left: 2%; }
- celui de la ligne ?
span:before { content: " "; }
p { margin-left: 10px }
>
> pas clair,
c'est limpide :
on règle la largeur proportionnellement à une des boites contenantes
laquelle ?
le 1er ancêtre/parent dont la position est définie (stylée)
c'est valable pour les largeurs, hauteurs, marges, paddings, quand ils
sont stylés en %
> mais ça semble rouler même dans mon cas où tout est flottant
> et en %, ou presque qq petits padding en px.
>
>>
>>>> #contenu form
>>>> {
>>>> margin: auto;
>>>
>>> ça fait quoi exactement "margin: auto;" ???
>>
>> ça centre la boite là dont il est question, ici le form
>> (les marges s'égalisent totomatiquement)
>
> c'est plus zoli alors...
ça fait là c'que tu d'mandes : un 'tit espace, à gauche, à droite
bien propre le même
> et l'alignement horizontal d'un texte dans un span, ça se règle comment,
un span est *in-réglable* pour ce qui est des dimensions ! !
span { width:2000px }
ne fera rien du tout
il faut alors le transformer en block
display: block;
et le + souvent ça met alors la zone
> si je touche au padding, ça me va pas car ça change la width, pas zoli.
heu ... le padding d'un span ?
ça ne devrait pas changer la width de son contenant ... !
ben ... si tu ajoutes de l'espace dans le span, forcément ça l'élargit.
> je lis chez yoyo :
> 'text-align'
> Valeur :
> left | right | center | justify |<chaîne> | inherit
>
> on ne peut pas mettre le texte à x% du bord gauche, par exemple, sans
> toucher à la largeur ???
le texte à x de *quel* bord gauche ?
- celui du span ?
au choix :
span { margin-left: 10px; }
span { padding-left: 10px; }
span { padding-left: 2%; }
- celui de la ligne ?
span:before { content: " "; }
p { margin-left: 10px }
>
> pas clair,
c'est limpide :
on règle la largeur proportionnellement à une des boites contenantes
laquelle ?
le 1er ancêtre/parent dont la position est définie (stylée)
c'est valable pour les largeurs, hauteurs, marges, paddings, quand ils
sont stylés en %
> mais ça semble rouler même dans mon cas où tout est flottant
> et en %, ou presque qq petits padding en px.
>
>>
>>>> #contenu form
>>>> {
>>>> margin: auto;
>>>
>>> ça fait quoi exactement "margin: auto;" ???
>>
>> ça centre la boite là dont il est question, ici le form
>> (les marges s'égalisent totomatiquement)
>
> c'est plus zoli alors...
ça fait là c'que tu d'mandes : un 'tit espace, à gauche, à droite
bien propre le même
> et l'alignement horizontal d'un texte dans un span, ça se règle comment,
un span est *in-réglable* pour ce qui est des dimensions ! !
span { width:2000px }
ne fera rien du tout
il faut alors le transformer en block
display: block;
et le + souvent ça met alors la zone
> si je touche au padding, ça me va pas car ça change la width, pas zoli.
heu ... le padding d'un span ?
ça ne devrait pas changer la width de son contenant ... !
ben ... si tu ajoutes de l'espace dans le span, forcément ça l'élargit.
> je lis chez yoyo :
> 'text-align'
> Valeur :
> left | right | center | justify |<chaîne> | inherit
>
> on ne peut pas mettre le texte à x% du bord gauche, par exemple, sans
> toucher à la largeur ???
le texte à x de *quel* bord gauche ?
- celui du span ?
au choix :
span { margin-left: 10px; }
span { padding-left: 10px; }
span { padding-left: 2%; }
- celui de la ligne ?
span:before { content: " "; }
p { margin-left: 10px }
class="row">'.$lf;
echo '<span
class="legend">Password :</span>'.$lf;
echo '<span
id="pass" class="content">'.$row['pass'].'</span>'.$lf;
echo '</div>'.$lf
class="row">'.$lf;
echo '<span
class="legend">Password :</span>'.$lf;
echo '<span
id="pass" class="content">'.$row['pass'].'</span>'.$lf;
echo '</div>'.$lf
class="row">'.$lf;
echo '<span
class="legend">Password :</span>'.$lf;
echo '<span
id="pass" class="content">'.$row['pass'].'</span>'.$lf;
echo '</div>'.$lf
ceci me plait assez (on utilise directement le form)
ceci me plait assez (on utilise directement le form)
ceci me plait assez (on utilise directement le form)
Si ça ne merdoie pas entre ton traitement de texte, ton seerveur et ton
SQLite, qui seront tous réglés en utf-8,
normalement,
il devrait suffire d'échoyer :
echo "
<div class='row'>
<span class='legend'>Password :</span>
<span id='pass' class='content'>$row['pass']</span>
</div>";
et même, probablement :
echo "
<div class='row'>
<span class='legend'>Password :</span>
<span id='pass' class='content'>$row[]</span>
</div>";
Sinon pour tes réglages de largeur ...
puisque tu passes tes spans en blocks, il y a une "feature" des css
géniale : laisser faire pour le mieux.
celui de gauche a une largeur et est en float left
celui de droite n'est pas en float et n'a pas de largeur mais a une
marge gauche
(marge = width + padding(s) + margin(s) de gauche)
.legend { float: left; /* pas besoin de 'display' puisque 'float' */
width: 20%; padding: 1%; margin: 0 1%; /* total = 24% */
border: 1px solid; text-align: right; }
.content { display: block; padding: 1%; margin: 0 1%; margin-left: 24%;
border: 1px solid; text-align: center; }
<p>
<span class="legend">Prenom :</span>
<span class="content">Yvon</span>
</p>
<p>
<span class="legend">Nom :</span>
<span class="content">Thoraval</span>
</p>
/*/*/*/*/*/
ça devrait suffire comme ça :
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
border-radius: 0.75em;
/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/
ceci me plait assez (on utilise directement le form)
<style type="text/css">
#test p {
clear: both;
width:98%;
vertical-align:middle;
color: black;
}
#test label {
float: left;
width: 20%;
height: 26px;
line-height: 26px;
padding-right: 1%;
text-align: right;
margin: 0 2px 0 0;
font: bold 11px/14px "Lucida Grande", sans-serif;
background: lightblue;
background: -webkit-gradient( linear, left top, right top,
from(rgb(173,216,230)), to(rgb(214,236,242)) );
background: -moz-linear-gradient(left, rgb(173,216,230),
rgb(214,236,242));
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
border-radius: 0.75em;
}
#test input {
display: block;
width: 77%;
height: 26px;
line-height:26px;
font: normal 11px/14px "Lucida Grande", sans-serif;
margin: 0 0 0 22%;
background:lightblue;
background: -webkit-gradient( linear, left top, right top,
from(rgb(173,216,230)), to(rgb(214,236,242)) );
background: -moz-linear-gradient(left, rgb(173,216,230),
rgb(214,236,242));
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
border-radius: 0.75em;
}
</style>
<form action="" onsubmit="return false" id="test">
<p class="row">
<label for="MdP">Password :</label>
<input id="MdP" name="pass" value="$row['pass']" readonly >
</p>
</form>
Si ça ne merdoie pas entre ton traitement de texte, ton seerveur et ton
SQLite, qui seront tous réglés en utf-8,
normalement,
il devrait suffire d'échoyer :
echo "
<div class='row'>
<span class='legend'>Password :</span>
<span id='pass' class='content'>$row['pass']</span>
</div>";
et même, probablement :
echo "
<div class='row'>
<span class='legend'>Password :</span>
<span id='pass' class='content'>$row[]</span>
</div>";
Sinon pour tes réglages de largeur ...
puisque tu passes tes spans en blocks, il y a une "feature" des css
géniale : laisser faire pour le mieux.
celui de gauche a une largeur et est en float left
celui de droite n'est pas en float et n'a pas de largeur mais a une
marge gauche
(marge = width + padding(s) + margin(s) de gauche)
.legend { float: left; /* pas besoin de 'display' puisque 'float' */
width: 20%; padding: 1%; margin: 0 1%; /* total = 24% */
border: 1px solid; text-align: right; }
.content { display: block; padding: 1%; margin: 0 1%; margin-left: 24%;
border: 1px solid; text-align: center; }
<p>
<span class="legend">Prenom :</span>
<span class="content">Yvon</span>
</p>
<p>
<span class="legend">Nom :</span>
<span class="content">Thoraval</span>
</p>
/*/*/*/*/*/
ça devrait suffire comme ça :
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
border-radius: 0.75em;
/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/
ceci me plait assez (on utilise directement le form)
<style type="text/css">
#test p {
clear: both;
width:98%;
vertical-align:middle;
color: black;
}
#test label {
float: left;
width: 20%;
height: 26px;
line-height: 26px;
padding-right: 1%;
text-align: right;
margin: 0 2px 0 0;
font: bold 11px/14px "Lucida Grande", sans-serif;
background: lightblue;
background: -webkit-gradient( linear, left top, right top,
from(rgb(173,216,230)), to(rgb(214,236,242)) );
background: -moz-linear-gradient(left, rgb(173,216,230),
rgb(214,236,242));
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
border-radius: 0.75em;
}
#test input {
display: block;
width: 77%;
height: 26px;
line-height:26px;
font: normal 11px/14px "Lucida Grande", sans-serif;
margin: 0 0 0 22%;
background:lightblue;
background: -webkit-gradient( linear, left top, right top,
from(rgb(173,216,230)), to(rgb(214,236,242)) );
background: -moz-linear-gradient(left, rgb(173,216,230),
rgb(214,236,242));
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
border-radius: 0.75em;
}
</style>
<form action="" onsubmit="return false" id="test">
<p class="row">
<label for="MdP">Password :</label>
<input id="MdP" name="pass" value="$row['pass']" readonly >
</p>
</form>
Si ça ne merdoie pas entre ton traitement de texte, ton seerveur et ton
SQLite, qui seront tous réglés en utf-8,
normalement,
il devrait suffire d'échoyer :
echo "
<div class='row'>
<span class='legend'>Password :</span>
<span id='pass' class='content'>$row['pass']</span>
</div>";
et même, probablement :
echo "
<div class='row'>
<span class='legend'>Password :</span>
<span id='pass' class='content'>$row[]</span>
</div>";
Sinon pour tes réglages de largeur ...
puisque tu passes tes spans en blocks, il y a une "feature" des css
géniale : laisser faire pour le mieux.
celui de gauche a une largeur et est en float left
celui de droite n'est pas en float et n'a pas de largeur mais a une
marge gauche
(marge = width + padding(s) + margin(s) de gauche)
.legend { float: left; /* pas besoin de 'display' puisque 'float' */
width: 20%; padding: 1%; margin: 0 1%; /* total = 24% */
border: 1px solid; text-align: right; }
.content { display: block; padding: 1%; margin: 0 1%; margin-left: 24%;
border: 1px solid; text-align: center; }
<p>
<span class="legend">Prenom :</span>
<span class="content">Yvon</span>
</p>
<p>
<span class="legend">Nom :</span>
<span class="content">Thoraval</span>
</p>
/*/*/*/*/*/
ça devrait suffire comme ça :
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
border-radius: 0.75em;
/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/
ceci me plait assez (on utilise directement le form)
<style type="text/css">
#test p {
clear: both;
width:98%;
vertical-align:middle;
color: black;
}
#test label {
float: left;
width: 20%;
height: 26px;
line-height: 26px;
padding-right: 1%;
text-align: right;
margin: 0 2px 0 0;
font: bold 11px/14px "Lucida Grande", sans-serif;
background: lightblue;
background: -webkit-gradient( linear, left top, right top,
from(rgb(173,216,230)), to(rgb(214,236,242)) );
background: -moz-linear-gradient(left, rgb(173,216,230),
rgb(214,236,242));
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
border-radius: 0.75em;
}
#test input {
display: block;
width: 77%;
height: 26px;
line-height:26px;
font: normal 11px/14px "Lucida Grande", sans-serif;
margin: 0 0 0 22%;
background:lightblue;
background: -webkit-gradient( linear, left top, right top,
from(rgb(173,216,230)), to(rgb(214,236,242)) );
background: -moz-linear-gradient(left, rgb(173,216,230),
rgb(214,236,242));
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
border-radius: 0.75em;
}
</style>
<form action="" onsubmit="return false" id="test">
<p class="row">
<label for="MdP">Password :</label>
<input id="MdP" name="pass" value="$row['pass']" readonly >
</p>
</form>
SAM wrote:ceci me plait assez (on utilise directement le form)
ouais; le résultat est pas mal du tout :
<http://cjoint.com/11au/AHCtqUVYFmZ_test_SM.jpg>
reste à trouver un moyen d'aligner verticalement "Password :" et "top
secret" càd le label et l'input dà côté.
je trouve aussi que le "t" de "top secret" est trop collé à la
bordure...
SAM<stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
ceci me plait assez (on utilise directement le form)
ouais; le résultat est pas mal du tout :
<http://cjoint.com/11au/AHCtqUVYFmZ_test_SM.jpg>
reste à trouver un moyen d'aligner verticalement "Password :" et "top
secret" càd le label et l'input dà côté.
je trouve aussi que le "t" de "top secret" est trop collé à la
bordure...
SAM wrote:ceci me plait assez (on utilise directement le form)
ouais; le résultat est pas mal du tout :
<http://cjoint.com/11au/AHCtqUVYFmZ_test_SM.jpg>
reste à trouver un moyen d'aligner verticalement "Password :" et "top
secret" càd le label et l'input dà côté.
je trouve aussi que le "t" de "top secret" est trop collé à la
bordure...