Ajouter deux colonnes dans une colonne

Le 27/08/11 07:58, Une Bévue a écrit :

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;

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>
.../...


à voir ici :
<http://stephane.moriaux.pagesperso-orange.fr/contact>
pour constater qu'il n'y a pas "2" colonnes,
une seule suffit

--
Stéphane Moriaux avec/with iMac-intel

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

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.

oui; ,ais les 80 % là; j'imagine qu'il réfèrent qu contenant, la colonne
de droite, pas au body ???

je veux dire relatif au contenant...

> 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 ?

le blême est que j'avions oublions un "</div>" --> detrimental effect
)))

#contenu form
{
position: relative;
width: 90%;
margin: auto;

ça fait quoi exactement "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;

Ah oui bien vu ce "ertical-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>
.../...

OK, merci beaucoup, que crois que je ne suis pas loin de la "VÉRITÉ" )))

--
« L'homme est capable du meilleur comme du pire,
mais c'est vraiment dans le pire qu'il est le meilleur. »
(Grégoire Lacroix)

Le 27/08/11 11:16, Une Bévue a écrit :

SAM<stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

width: 80%;

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>


--
Stéphane Moriaux avec/with iMac-intel

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
>> {
>> 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)

c'est plus zoli alors...

> 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>

ah ouais, super, merci !

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 ???
--
« L'humanité qui devrait avoir six mille ans d'expérience,
retombe en enfance à chaque génération. »
(Tristan Bernard)

Le 27/08/11 14:21, Une Bévue a écrit :

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,

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: "&nbsp;"; }
p { margin-left: 10px }

--
Stéphane Moriaux avec/with iMac-intel

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

>
> 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 %

bon; là, c'est limpide )))

> 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

pour une fois qu'un browxer m'obéit hein...

> 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

ah ben voila cochon de css va, n'en fait qu'à da tête...

il faut alors le transformer en block
display: block;
et le + souvent ça met alors la zone

ah d'accord

> 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 ?

oui bord gauche.
désolé le code est noyé dans du php :
echo ' <div
class="row">'.$lf;
echo ' <span
class="legend">Password :</span>'.$lf;
echo ' <span
id="pass" class="content">'.$row['pass'].'</span>'.$lf;
echo ' </div>'.$lf;

donc le class legend est ok c'est le côté droit, class content que je
voudrais décoler à gauche du span de gauche, mon css :
div.row {
clear: both;
width:98%;
vertical-align:middle;
}
.legend {
text-align: right;
float: left;
font: bold 11px/14px "Lucida Grande", "Trebuchet MS", Arial,
Helvetica, sans-serif;
width: 20%;
height: 26px;
line-height:26px;
margin: 0;
margin-right: 2px;
margin-bottom: 2px;
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-top-left-radius: 0.75em;
-webkit-border-top-right-radius: 0.75em;
-webkit-border-bottom-left-radius: 0.75em;
-webkit-border-bottom-right-radius: 0.75em;
-moz-border-radius-topleft: 0.75em;
-moz-border-radius-topright: 0.75em;
-moz-border-radius-bottomleft: 0.75em;
-moz-border-radius-bottomright: 0.75em;
border-top-left-radius: 0.75em;
border-top-right-radius: 0.75em;
border-bottom-left-radius: 0.75em;
border-bottom-right-radius: 0.75em;
}
.content {
display: block;
float: left;
font: normal 11px/14px "Lucida Grande", "Trebuchet MS", Arial,
Helvetica, sans-serif;
width: 78%;
height: 26px;
margin: 0;
margin-bottom: 2px;
padding-left: 0.5em;
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-top-left-radius: 0.75em;
-webkit-border-top-right-radius: 0.75em;
-webkit-border-bottom-left-radius: 0.75em;
-webkit-border-bottom-right-radius: 0.75em;
-moz-border-radius-topleft: 0.75em;
-moz-border-radius-topright: 0.75em;
-moz-border-radius-bottomleft: 0.75em;
-moz-border-radius-bottomright: 0.75em;
border-top-left-radius: 0.75em;
border-top-right-radius: 0.75em;
border-bottom-left-radius: 0.75em;
border-bottom-right-radius: 0.75em;
}

je suis épaté les coins arrondis marchent sur Tiger avec safari 4 et
TenFourFox 6...

au choix :
span { margin-left: 10px; }
span { padding-left: 10px; }
span { padding-left: 2%; }
- celui de la ligne ?
span:before { content: "&nbsp;"; }
p { margin-left: 10px }

ah oui le &nbsp; est une solution de dernier recours...
--
« Le vrai problème avec les menteurs est que l'on ne peut jamais
être certain qu'ils ne vont pas dire la vérité. »
(Kingsley Amis)

Le 28/08/11 07:31, Une Bévue a écrit :

class="row">'.$lf;
echo '<span
class="legend">Password :</span>'.$lf;
echo '<span
id="pass" class="content">'.$row['pass'].'</span>'.$lf;
echo '</div>'.$lf

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>

--
Stéphane Moriaux avec/with iMac-intel

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...
--
« France soir est un journal à grand tirage,
il est donc excellent pour allumer la cheminée. »
(Miguel de Cervantès)

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

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>";

ah oui, faire UN seul écho pour tout le bazard...
c'est le js qui m'a troublé où on peut peut pas mettre une string sur
plusieurs lignes, enfin je "pense"...

et même, probablement :

echo "
<div class='row'>
<span class='legend'>Password :</span>
<span id='pass' class='content'>$row[]</span>
</div>";

mis à part la différence entre $row['pass'] et $row[] (typo?) je n'en
voit pas au niveau php/html ???

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;

euh là; mea culpa, mea maxima culpa, le copier/coller me joue des tours,
comme ça marchait...

/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/

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>

OK, merci beaucoup, j'essaie ça derechef !!!

--
« France soir est un journal à grand tirage,
il est donc excellent pour allumer la cheminée. »
(Miguel de Cervantès)

Le 28/08/11 20:20, Une Bévue a écrit :

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...

Oui, bon, ben là je sais pas faire
c'est l'input qui commande sa mise en forme
(en mettant une bordure ?) (+ un padding-left)



#test p {
width: 98%;
color: black;
vertical-align: middle;
line-height: 28px;
}
#test label {
float: left;
width: 20%;
margin: 0 2px 0 0;
padding: 6px 1% 0 0;
height: 24px;
text-align: right;
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;
font: bold 11px/14px "Lucida Grande", sans-serif;
height: 26px;
width: 77%;
margin: 0;
margin: 0 0 0 22%;
background: lightblue;
text-align: left;
padding: 0 0 0 1%;
background: -webkit-gradient( linear, right top, left top,
from(rgb(173,216,230)), to(rgb(214,236,242)) );
background: -moz-linear-gradient(right, rgb(173,216,230),
rgb(214,236,242));
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
border-radius: 0.75em;
}




<form action="" onsubmit="return false" id="test">
<p>
<label for="MdP">Password :</label>
<input id="MdP" name="pass" value="$row['pass']" readonly >
</p>
<p>
<label for="Nom">Nom :</label>
<input id="Nom" name="nom" value="$row['donnee']" readonly >
</p>
</form>



--
Stéphane Moriaux avec/with iMac-intel