Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

différence entre Opera, Firefox et Chrome, Safari

45 views
Skip to first unread message

Une Bévue

unread,
Oct 3, 2011, 9:49:17 AM10/3/11
to
J'ai un problème de présentation différente entre Opera, Firefox d'une
part et Chrome, Safari d'autre part :

Opera :
<http://cjoint.com/11oc/AJdpIBp6SqM_opera.JPG>
Firefox :
<http://cjoint.com/11oc/AJdpETfLFak_firefox-nightly.JPG>

Chrome :
<http://cjoint.com/11oc/AJdpEfEBvTI_chrome.JPG>
Safari :
<http://cjoint.com/11oc/AJdpFrXd2rQ_safari.JPG>

le tout sur Mac OS X Lion.

ça se situe, côté html entre le select (dans une <p />) et le label
suivant (lui aussi dans une <p />), le code html :
<div id="item">
<p class="row">
<label>Catégorie :</label>
<select id="cat" name="cat">
<option value="-1" selected="">Choisissez</option>
<option value="0">Formulaires</option>
<option value="1">Groupes de discussion</option>
<option value="2">Comptes EMail</option>
<option value="3">Clés de logiciels</option>
<option value="4">Banque en ligne</option>
<option value="5">Cartes de paiement</option>
<option value="7">Free Marie</option>
<option value="8">Free Yvon</option>
</select>
</p>
<p class="row">
<label>Titre :</label>
<input id="title" name="title" type="text" value="&lt; Titre
&gt;">
</p>
<p class="row">
<label>Lien :</label>
<input id="link" name="link" type="text" value="&lt; Lien
&gt;">
</p>
<p class="row">
<label>Login :</label>
<input id="login" name="login" type="text" value="&lt; Login
&gt;">
</p>
<p class="row">
<label>Mot de passe :</label>
<input id="pass" name="pass" type="text" value="&lt; Mot de
passe &gt;">
</p>
<p class="row">
<label>Notes :</label>
<textarea id="infos" name="infos" cols="40" rows="6"
tabindex="4" wrap="off">&lt; Notes &gt;</textarea>
</p>
</div>

la partie de css adequat :
#item p.row label,
#item p.row input[type="text"],
#item p.row select {
padding: 5px 0;
font: bold 11px/14px "Lucida Grande", "Trebuchet MS", Arial,
Helvetica, sans-serif;
background:lightblue;
}
#item p.row label {
float: left;
width: 20%;
padding-right: 9px;
text-align: right;
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 0 0 0.75em;
-moz-border-radius: 0.75em 0 0 0.75em;
border-radius: 0.75em 0 0 0.75em;
}
#item p.row input[type="text"], #item p.row select {
display: block;
width: 76%;
margin: 0 0 0 23%;
padding-left: 1%;
text-align: left;
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 0.75em 0.75em 0;
-moz-border-radius: 0 0.75em 0.75em 0;
border-radius: 0 0.75em 0.75em 0;
border: 0;
}

#item p.row select {
width: 77%;
padding:0.75% 0 0.75% 1%;
}
/**/
#item p.row textarea {
display: block;
width: 76%;
margin: 0 0 0 23%;
padding-left: 1%;
text-align: left;
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 0.75em 0.75em 0;
-moz-border-radius: 0 0.75em 0.75em 0;
border-radius: 0 0.75em 0.75em 0;
border: 0;
}

comme jusqu'ici je n'avais testé que sur Firefox nightly (10.0a1
(2011-10-02), je n'ai pas vu ce problème...


--
« L'essence même du génie, c'est de mettre en pratique
les idées les plus simples. »
(Charles Peguy)

SAM

unread,
Oct 4, 2011, 9:03:03 AM10/4/11
to
Le 03/10/11 15:49, Une Bévue a écrit :
> J'ai un problème de présentation différente entre Opera, Firefox d'une
> part et Chrome, Safari d'autre part :
>
> Opera :
> <http://cjoint.com/11oc/AJdpIBp6SqM_opera.JPG>
> Firefox :
> <http://cjoint.com/11oc/AJdpETfLFak_firefox-nightly.JPG>
>
> Chrome :
> <http://cjoint.com/11oc/AJdpEfEBvTI_chrome.JPG>
> Safari :
> <http://cjoint.com/11oc/AJdpFrXd2rQ_safari.JPG>
>
> le tout sur Mac OS X Lion.

oui .. bon ... on préférerait les versions des brouteurs ...

> ça se situe, côté html entre le select (dans une<p />) et le label
> suivant (lui aussi dans une<p />), le code html :

à moins que ça n'aie changé pour le html.5 (c'est du html.5 ?),
je ne comprends pas que ces labels soient utilisés inutilement ... !

<label>
titre du label
<element de formulaire />
</label>

ou

<label for="truc_1">titre</lablel> <élément de form id="truc_1">

pour les ces css,
au hasard j'essaierais :

#item p.row { clear: left } /* 'Titre' dans Safari/Chrome */

pour la couleur des boutons ... on ne saura pas, vu qu'on en n'a pas le
code html

#item p.row input[type="text"], #item p.row select {
display: block;
max-width: 76%;

au lieu de :

#item p.row input[type="text"], #item p.row select {
display: block;
width: 76%;


paske entre les 20% du label, ses marges, les cadres de tt le monde, les
marges et padding du p du div, ceux des éléments ...
Y a plus que le navigateur pour arriver à tenter de s'en dépêtrer ! ;-)


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

Une Bévue

unread,
Oct 4, 2011, 9:50:37 AM10/4/11
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:

> Le 03/10/11 15:49, Une Bévue a écrit :
> > J'ai un problème de présentation différente entre Opera, Firefox d'une
> > part et Chrome, Safari d'autre part :


> > Opera :
Version
12.00 pre-alpha
Révision
1076
Plate-forme
Mac OS X
Système
10.7.1
> > <http://cjoint.com/11oc/AJdpIBp6SqM_opera.JPG>


> > Firefox :
10.0a1 (2011-10-03)
> > <http://cjoint.com/11oc/AJdpETfLFak_firefox-nightly.JPG>


> > Chrome :
10.0a1 (2011-10-03)
> > <http://cjoint.com/11oc/AJdpEfEBvTI_chrome.JPG>


> > Safari :
Version 5.1 (7534.48.3)
> > <http://cjoint.com/11oc/AJdpFrXd2rQ_safari.JPG>
> >
> > le tout sur Mac OS X Lion.
>
> oui .. bon ... on préférerait les versions des brouteurs ...
>
> > ça se situe, côté html entre le select (dans une<p />) et le label
> > suivant (lui aussi dans une<p />), le code html :
>
> à moins que ça n'aie changé pour le html.5 (c'est du html.5 ?),
> je ne comprends pas que ces labels soient utilisés inutilement ... !
>
> <label>
> titre du label
> <element de formulaire />
> </label>
>
> ou
>
> <label for="truc_1">titre</lablel> <élément de form id="truc_1">

euh, c'est toi qui m'a donné cette recette !!! ;-)

>
> pour les ces css,
> au hasard j'essaierais :
>
> #item p.row { clear: left } /* 'Titre' dans Safari/Chrome */


oui, je pense que ça suffit...

> pour la couleur des boutons ... on ne saura pas, vu qu'on en n'a pas le
> code html
>
> #item p.row input[type="text"], #item p.row select {
> display: block;
> max-width: 76%;
>
> au lieu de :
>
> #item p.row input[type="text"], #item p.row select {
> display: block;
> width: 76%;

NON, ça fou le bronx, je suis resté à width: 76%;
mais je peux diminuer s'il le faut.

> paske entre les 20% du label, ses marges, les cadres de tt le monde, les
> marges et padding du p du div, ceux des éléments ...
> Y a plus que le navigateur pour arriver à tenter de s'en dépêtrer ! ;-)

par contre j'ai ajouté :
height: 24px;

sur #item p.row select c'est plus zoli !!!

et c'est quasiment identique sur ---TOUS--- les butineurs précités !
tu as fait de moi un homme heureux )))

résumé : c'est surtout le "#item p.row { clear: left }" qui agit !!!

il n'y a que la couleur des <buttob /> qui n'est pas respectée sur Opera
Next, mais je m'en fiche.

see <http://82.226.217.239/landp_public/index.html> if u wich )))

--
« Le temps est un grand maitre, dit-on. Le malheur est
qu'il tue ses élèves. »
(Berlioz)

Une Bévue

unread,
Oct 4, 2011, 9:55:18 AM10/4/11
to
Une Bévue <unbewus...@fai.invalid> wrote:

> > > Chrome :
> 10.0a1 (2011-10-03)

je me gouratte dans un copier/coller, il fallait lire :
16.0.899.0 dev

SAM

unread,
Oct 4, 2011, 12:50:43 PM10/4/11
to
Le 04/10/11 15:50, Une Bévue a écrit :
> SAM<stephanemor...@wanadoo.fr.invalid> wrote:
>
>> Le 03/10/11 15:49, Une Bévue a écrit :
>>> J'ai un problème de présentation différente entre Opera, Firefox d'une
>>> part et Chrome, Safari d'autre part :
>
>>> Firefox :
> 10.0a1 (2011-10-03)

boudiou ! j'en suis à la 7.0.1 (à jour du jour)

>>> <http://cjoint.com/11oc/AJdpETfLFak_firefox-nightly.JPG>
>
>> je ne comprends pas que ces labels soient utilisés inutilement ... !
>>
>> <label>
>> titre du label
>> <element de formulaire />
>> </label>
>>
>> ou
>>
>> <label for="truc_1">titre</lablel> <élément de form id="truc_1">
>
> euh, c'est toi qui m'a donné cette recette !!! ;-)

Ça m'étonnerait que j'ai donné comme recette un label non renseigné ou
non englobant comme tu nous le donnes

[cite code]
<p class="row">
<label>Lien :</label>
<input id="link" blabla

Mébon j'ai eu pu faire court ?
C'eut dû t-être :

<p class="row">
<label for="link">Lien :</label>
<input id="link" blabla


>> pour les ces css,
>> au hasard j'essaierais :
>>
>> #item p.row input[type="text"], #item p.row select {
>> display: block;
>> width: 76%;
>
> NON, ça fou le bronx, je suis resté à width: 76%;

bon, j'avais dit "essayer" ;-)

> tu as fait de moi un homme heureux )))

il était manifeste que le "Titre" n'était pas renvoyé où il fallait à
cause de la flottaison
que la solution la plus évidente dans ce cas est d'arrêter cette
flottaison au(x) bon(s) endroit(s) par un clear:right/left/both; approprié.
L'autre option est de mettre toutes ces boites flottantes avec la même
hauteur forcée (si elles l'acceptent) afin qu'elle n'essaient pas de se
glisser, apparemment, en intercalaire

> résumé : c'est surtout le "#item p.row { clear: left }" qui agit !!!

toutafé
Safari 5, Firefox 7, Crhrome 14.0.835.186
je vois partout la mme chose :
<http://cjoint.com/?AJesKCdGOiN>
Pas de label mais des boutons verts

Vérifier sur le fichier dont images-captures si ces boutons rouges ont
bien la classe "normal" ?!


Je ne dois pas m'exprimer très clairement ... ?
/* conseil SM : height:auto*/
#header_left, #header_right {
height:auto;
}
peut être entièrement remplacé par du vide

Le truc, à l'origine, était pour contre-carrer une autre
instruction/règle. Si elle n'existe plus, le truc n'est pas à conserver.

Une Bévue

unread,
Oct 4, 2011, 2:23:05 PM10/4/11
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:

> > euh, c'est toi qui m'a donné cette recette !!! ;-)
>
> Ça m'étonnerait que j'ai donné comme recette un label non renseigné ou
> non englobant comme tu nous le donnes

ça veut dire quoi là, "non englobant" ?

> [cite code]
> <p class="row">
> <label>Lien :</label>
> <input id="link" blabla
>
> Mébon j'ai eu pu faire court ?
> C'eut dû t-être :
>
> <p class="row">
> <label for="link">Lien :</label>
> <input id="link" blabla

mon code tel que copier de firebug :
<p class="row">
<label>Titre :</label>
<input id="title" name="title" type="text" value="Farfelu">
</p>

sur <http://www.w3schools.com/tags/tag_label.asp>, ils disent :
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />

donc le seul truc que je ne mets pas c'est le for="machin", c'est
vraiment utile ?
bon, pas difficile à ajouter dans mon php et/ou js...

> >> pour les ces css,
> >> au hasard j'essaierais :
> >>
> >> #item p.row input[type="text"], #item p.row select {
> >> display: block;
> >> width: 76%;
> >
> > NON, ça fou le bronx, je suis resté à width: 76%;
>
> bon, j'avais dit "essayer" ;-)

ben c'est ce que j'ai fait )))

> > tu as fait de moi un homme heureux )))
>
> il était manifeste que le "Titre" n'était pas renvoyé où il fallait à
> cause de la flottaison
> que la solution la plus évidente dans ce cas est d'arrêter cette
> flottaison au(x) bon(s) endroit(s) par un clear:right/left/both; approprié.
> L'autre option est de mettre toutes ces boites flottantes avec la même
> hauteur forcée (si elles l'acceptent) afin qu'elle n'essaient pas de se
> glisser, apparemment, en intercalaire

ouais, il faudrait que je re-re-relise un bon tuto sur le sujet...
t'en connais un ?
et aussi sur l'imbrication des DIVs, l'autre jour j'ai été surpris
qu'une div contenue puisse être plus grande qu'une div contenante...

> > résumé : c'est surtout le "#item p.row { clear: left }" qui agit !!!
>
> toutafé
>
>
> > see<http://82.226.217.239/landp_public/index.html> if u wich )))
>
> Safari 5, Firefox 7, Crhrome 14.0.835.186
> je vois partout la mme chose :
> <http://cjoint.com/?AJesKCdGOiN>
> Pas de label mais des boutons verts

les labels ils n'apparaissent que lorsque tu édites une entrée (bouton
"Modifier")...

sinon c'est :
<p class="row">
<span class="legend">Login :</span>
<span class="content" id="login">Farfelu</span>
</p>

j'ai d'ailleurs hésité, récemment, à changer ça en utilisant la
propriété #contentEditable, mais j'aurais de tout manière eu à
redessiner car pour Catégories, je dois mettre un select.

> Vérifier sur le fichier dont images-captures si ces boutons rouges ont
> bien la classe "normal" ?!


ben je ne vois pas de bouton rouge (mis à part avec Opera Next) :

<http://cjoint.com/11oc/AJeurwzp1fy_bouton_rouge.JPG>

à part ce petit bouton pour la pagination quand il y a trop de
résultats.

> Je ne dois pas m'exprimer très clairement ... ?

pas tjs... ;-)

> /* conseil SM : height:auto*/
> #header_left, #header_right {
> height:auto;
> }
> peut être entièrement remplacé par du vide

effectivement, je l'ai commenté, ça ne change rien...

> Le truc, à l'origine, était pour contre-carrer une autre
> instruction/règle. Si elle n'existe plus, le truc n'est pas à conserver.

voila !

SAM

unread,
Oct 4, 2011, 7:39:45 PM10/4/11
to
Le 04/10/11 20:23, Une Bévue a écrit :
> SAM<stephanemor...@wanadoo.fr.invalid> wrote:
>>
>> Ça m'étonnerait que j'ai donné comme recette un label non renseigné ou
>> non englobant comme tu nous le donnes
>
> ça veut dire quoi là, "non englobant" ?

eh bien : le label n'est pas la boite contenant l'input
(il peut fonctionner comme ça mais je ne suis pas certain que l'on ait
le droit de l'employer ainsi)(cf. tt en bas)

> mon code tel que copier de firebug :
> <p class="row">
> <label>Titre :</label>
> <input id="title" name="title" type="text" value="Farfelu">
> </p>

oui.

> sur<http://www.w3schools.com/tags/tag_label.asp>, ils disent :
> <label for="male">Male</label>
> <input type="radio" name="sex" id="male" />

OK d'ac

> donc le seul truc que je ne mets pas c'est le for="machin", c'est
> vraiment utile ?

c'est comme ça que c'est censé fonctionner

... d'ordinaire

... quand c'est dans un form

Le label sert alors de bouton pour l'input auquel il se réfère
(label pour/for truc-bidule)

> bon, pas difficile à ajouter dans mon php et/ou js...

Ha! Ça ! ... tout l'monde s'en fout ;-)



à toutasar je rappelle la hiérarchie du form

form
div (ou p) (une balise reconnue naturellement comme une boite)
fieldset
legend
label
input / select / textarea

Exemple :

<form action="foo.php">
<div>
<fieldset><legend>inscription</legend>
<p><label for="nom">Nom : </label>
<input id="nom" name="nom">
<p><label for="prenom">Prénom : </label>
<input id="prenom" name="prenom">
</fieldset>
<fieldset><legend>validations</legend>
<p><label for="annul">Cliquer pour tout effacer</label>
<input type="reset" id="annul">
<p><label>Cliquer pour valider: <input type="submit"></label>
</fieldset>
</div>
</form>


> ouais, il faudrait que je re-re-relise un bon tuto sur le sujet...

déjà, mettre en bouton/bookMark :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
et
<http://www.w3.org/TR/CSS21/indexlist.html>

> t'en connais un ?

non
il y a pompage je crois
<http://www.pompage.net/articles_par_theme#theme-CSS>
Alsacreations :
<http://www.alsacreations.com/tutoriels/>
machin 3school ou du genre qui parait-il ...
openweb (si ça fonctionne encore ?) :
<http://openweb.eu.org/>

mébon .... l'apprentissage des css est affaire d'un peu de jugeote (de
préférence compréhension géométrie) de pas mal de patience, de beaucoup
de lectures (surtout si on veut être compatible IE) d'essais et erreurs,

la prose de MinusculeMou :
<http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx>
anciennes joyeusetés pour IE (les hacks) :
<http://www.ultra-fluide.com/ressources/css/css-hacks.htm>

Lectures au coin du feu :
<http://www.la-grange.net/w3c/>

Interludes :
le site de Nichols Stu : <http://www.cssplay.co.uk/>
<http://www.cssplay.co.uk/menu/> <http://www.cssplay.co.uk/menus/>
<http://www.cssplay.co.uk/layouts/>

> et aussi sur l'imbrication des DIVs, l'autre jour j'ai été surpris
> qu'une div contenue puisse être plus grande qu'une div contenante...

Fastoche !
exemple : centrage d'une image :

<div style="position:absolute;top:50%;left:50%;width:1px;height:1px">
<img
style="width:200px;height:150px;margin-left:-100px;margin-height:-75px"
src="test.jpg" />
</div>


>> Pas de label mais des boutons verts
>
> les labels ils n'apparaissent que lorsque tu édites une entrée (bouton
> "Modifier")...

OK, vu.

>> Vérifier sur le fichier dont images-captures si ces boutons rouges ont
>> bien la classe "normal" ?!
>
> ben je ne vois pas de bouton rouge (mis à part avec Opera Next) :

oui, ça a l'air d'être ça :
<http://cjoint.com/11oc/AJdpIBp6SqM_opera.JPG>
Bon, donc il a eu droit aux mêmes sources ?
et il n'aime pas tes background ? en tous cas en balises 'button' ?!

> <http://cjoint.com/11oc/AJeurwzp1fy_bouton_rouge.JPG>

non celui-là j'avions point vu ni remarqué

>> Je ne dois pas m'exprimer très clairement ... ?
>
> pas tjs... ;-)

bon comme ça on est au moins 3 (car tu comptes double) ;-)


Dans ton code

il manque pas mal de /> (meta, link, img, input ...)

ce n'est pas :
<option selected=""
mais
<option selected
ou et de préférence :
<option selected="selected"

l'attribut "language" n'existe plus, à supprimer
ici :
language="JavaScript"
de même que celui "wrap"
ici :
<textarea wrap="off"

Le label englobant ou non, avec ou sans attribut for, convient au
validator du W3C, il n'a pas râlé à ce sujet à propos de ta page
modifiée par JS.

Une Bévue

unread,
Oct 5, 2011, 3:05:15 AM10/5/11
to
OK, merci, mais bon, je ne suis pas dans une form en fait car je
construis mon POST par js...
euh, c'est quand l'interro ?
)))

> > et aussi sur l'imbrication des DIVs, l'autre jour j'ai été surpris
> > qu'une div contenue puisse être plus grande qu'une div contenante...
>
> Fastoche !
> exemple : centrage d'une image :
>
> <div style="position:absolute;top:50%;left:50%;width:1px;height:1px">
> <img
> style="width:200px;height:150px;margin-left:-100px;margin-height:-75px"
> src="test.jpg" />
> </div>

tiens, super intéressant, ça marche aussi si je mets dans la div une
autre div avec des <p /> et des boutons ?

> >> Pas de label mais des boutons verts
> >
> > les labels ils n'apparaissent que lorsque tu édites une entrée (bouton
> > "Modifier")...
>
> OK, vu.
>
> >> Vérifier sur le fichier dont images-captures si ces boutons rouges ont
> >> bien la classe "normal" ?!
> >
> > ben je ne vois pas de bouton rouge (mis à part avec Opera Next) :
>
> oui, ça a l'air d'être ça :
> <http://cjoint.com/11oc/AJdpIBp6SqM_opera.JPG>
> Bon, donc il a eu droit aux mêmes sources ?
> et il n'aime pas tes background ? en tous cas en balises 'button' ?!


ben ouais, mêmes sources...

> > <http://cjoint.com/11oc/AJeurwzp1fy_bouton_rouge.JPG>
>
> non celui-là j'avions point vu ni remarqué


il n'apparaît pas dans la version 'public' car il n'y a pas assez
d'entrées, attends un peu j'en ajoute pour voir, c'est fait.

J'ai ajouté tes bookmarks en "Formulaires" et tu vois apparaître les
tiny buttons :
<http://goo.gl/yNr8V>


> >> Je ne dois pas m'exprimer très clairement ... ?
> >
> > pas tjs... ;-)
>
> bon comme ça on est au moins 3 (car tu comptes double) ;-)


salopard, tu vas voir si je t'attrappe !!!

>
> Dans ton code
>
> il manque pas mal de /> (meta, link, img, input ...)

je reconnais pour meta et input mais pas pour img et link
> ce n'est pas :
> <option selected=""

ouais je sais, mais c'est pas moi qui fait ça car dans mon php j'ai :
$options.="<option value='$idx' selected>$name</option>";

> mais
> <option selected
> ou et de préférence :
> <option selected="selected"

ouais j'ai changé mon php pour ça :
$options.="<option value='$idx' selected='selected'>$name</option>";


> l'attribut "language" n'existe plus, à supprimer
> ici :
> language="JavaScript"

C'EST FAIT, mais pas encore sur la version public qui n'est qu'une copie
de la version sur laquelle je travaille exceptée la bd "landp.db".

> de même que celui "wrap"
> ici :
> <textarea wrap="off"

dommage j'ai trouvé ça utile pourtant, ça veut dire que ça n'a plus
d'effet ???

> Le label englobant ou non, avec ou sans attribut for, convient au
> validator du W3C, il n'a pas râlé à ce sujet à propos de ta page
> modifiée par JS.

bon, je l'ai modifié ça, mais je dois dire que je trouve un peu vouillon
d'avoir à écrire for='machin' quand l'id machin est juste à côté...

en tk merci beaucoup pour tout !!!

pas mal de choses à digérer.



--
Je m'intéresse au futur, c'est là que je compte passer
le reste de ma vie.
(Woody Allen)

SAM

unread,
Oct 5, 2011, 5:57:50 AM10/5/11
to
Le 05/10/11 09:05, Une Bévue a écrit :
> SAM<stephanemor...@wanadoo.fr.invalid> wrote:
>>
>> Exemple :

> OK, merci, mais bon, je ne suis pas dans une form en fait car je
> construis mon POST par js...

Heu ... là c'est du code html
dont les brouteurs ont le souci
pour en faire des trucs de présentation et d'accessibilité.

<http://cjoint.com/?AJflYjvqApE>

Que l'action du form soit remplacé par un JS n'a rien à y voir.

Bien entendu, fieldsets et leur legends sont facultatifs
(comme les groupes d'options par exemple)

> euh, c'est quand l'interro ?

3 mois après que j'ai refilé tous mes bookmarks sur le sujet.
Rattrapage : 3 mois plus tard.
Contrôle de validation 6 mois après.
Autorisations de perdurer : tous les 2 ans.

>> exemple : centrage d'une image :
>>
>> <div style="position:absolute;top:50%;left:50%;width:1px;height:1px">
>> <img
>> style="width:200px;height:150px;margin-left:-100px;margin-height:-75px"
>> src="test.jpg" />
>> </div>
>
> tiens, super intéressant, ça marche aussi si je mets dans la div une
> autre div avec des<p /> et des boutons ?

Ce div sera de préférence positionné lui aussi.

Attention !
Ça devient rigolo quand on réduit fort la taille de la fenêtre.

>> <http://cjoint.com/11oc/AJdpIBp6SqM_opera.JPG>
>> Bon, donc il a eu droit aux mêmes sources ?
>> et il n'aime pas tes background ? en tous cas en balises 'button' ?!
>
> ben ouais, mêmes sources...

bon ... avec la console d'Opera 11.xxx
( Outils/Avancé/Dragonfly )
je vois que, comme moi, il ne voit pas de background pour les boutons :

landp.css:242
button.normal {

Tes circonvolutions de dégradé ne l'émeuvent pas.
Il faut découper dans cet ordre le background du button.normal :

button.normal {
background: repeat scroll 0 0 green;
background: -moz-linear-gradient(center top , #AEBB0D, #4A954A)
transparent;
/* et le reste du tremblement */
}

pas certain que : repeat scroll 0 0
serve à qque chose ...

pas testé sur Safari


>> de même que celui "wrap"
>> ici :
>> <textarea wrap="off"
>
> dommage j'ai trouvé ça utile pourtant,

faut en causer au W3C ou changer de doctype

> ça veut dire que ça n'a plus d'effet ???

les brouteurs sont très accommodants, ça a certainement encore l'effet
attendu, même avec un doctype contradictoire.

>> Le label englobant ou non, avec ou sans attribut for, convient au
>> validator du W3C, il n'a pas râlé à ce sujet à propos de ta page
>> modifiée par JS.
>
> bon, je l'ai modifié ça, mais je dois dire que je trouve un peu vouillon
> d'avoir à écrire for='machin' quand l'id machin est juste à côté...

certes et d'ailleurs, comme dit + haut, le Validator ne s'offusque pas
de ne pas l'avoir, c'est donc facultatif bien qu'à mon idée l'usage de
cette balise y perde de son intérêt.

De toutes façons dans ton organisation ça n'aura qu'une vague utilité et
que si on a titillé le bouton [modifier]

> en tk merci beaucoup pour tout !!!
>
> pas mal de choses à digérer.

pas impossible ;-)

Une Bévue

unread,
Oct 6, 2011, 6:12:51 AM10/6/11
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:

> Le 05/10/11 09:05, Une Bévue a écrit :
> > SAM<stephanemor...@wanadoo.fr.invalid> wrote:
> >>
> >> Exemple :
>
> > OK, merci, mais bon, je ne suis pas dans une form en fait car je
> > construis mon POST par js...
>
> Heu ... là c'est du code html
> dont les brouteurs ont le souci
> pour en faire des trucs de présentation et d'accessibilité.
>
> <http://cjoint.com/?AJflYjvqApE>
>
> Que l'action du form soit remplacé par un JS n'a rien à y voir.

ouais, mais je ne suis pas "obligé" de mettre form autour ?

> 3 mois après que j'ai refilé tous mes bookmarks sur le sujet.
> Rattrapage : 3 mois plus tard.
> Contrôle de validation 6 mois après.
> Autorisations de perdurer : tous les 2 ans.
>
> >> exemple : centrage d'une image :
> >>
> >> <div style="position:absolute;top:50%;left:50%;width:1px;height:1px">
> >> <img
> >> style="width:200px;height:150px;margin-left:-100px;margin-height:-75px"
> >> src="test.jpg" />
> >> </div>

Ah, super ça !!!

>
> bon ... avec la console d'Opera 11.xxx
> ( Outils/Avancé/Dragonfly )
> je vois que, comme moi, il ne voit pas de background pour les boutons :
>
> landp.css:242
> button.normal {
>
> Tes circonvolutions de dégradé ne l'émeuvent pas.
> Il faut découper dans cet ordre le background du button.normal :
>
> button.normal {
> background: repeat scroll 0 0 green;
> background: -moz-linear-gradient(center top , #AEBB0D, #4A954A)
> transparent;
> /* et le reste du tremblement */
> }

je teste ça en début d'aprems'

> pas certain que : repeat scroll 0 0
> serve à qque chose ...

ok, je vérifierai par un essai.


--
« C'est aujourd'hui que commence le reste de ta vie. »
(Dale Carnegie)

Une Bévue

unread,
Oct 6, 2011, 6:52:40 AM10/6/11
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:

> bon ... avec la console d'Opera 11.xxx
> ( Outils/Avancé/Dragonfly )
> je vois que, comme moi, il ne voit pas de background pour les boutons :
>
> landp.css:242
> button.normal {
>
> Tes circonvolutions de dégradé ne l'émeuvent pas.
> Il faut découper dans cet ordre le background du button.normal :
>
> button.normal {
> background: repeat scroll 0 0 green;
> background: -moz-linear-gradient(center top , #AEBB0D, #4A954A)
> transparent;
> /* et le reste du tremblement */
> }

ben oui, suis-je bête quand c'est no -moz ni -webkit il faut mettre
autre chose, maintenant c'est vert avec Opera.

> pas certain que : repeat scroll 0 0
> serve à qque chose ...

ne change rien pour Opera...

bon excuses moi, j'ai mon interro à réviser !!!

Une Bévue

unread,
Oct 6, 2011, 8:50:37 AM10/6/11
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:

> Fastoche !
> exemple : centrage d'une image :
>
> <div style="position:absolute;top:50%;left:50%;width:1px;height:1px">
> <img
> style="width:200px;height:150px;margin-left:-100px;margin-height:-75px"
> src="test.jpg" />
> </div>


OUAIS ! ça roule super ici :
<http://studio.quatorze.free.fr/css3/centrage_image/>

mais je ne suis pas parvenu à faire la même chose avec une modal box :
<http://studio.quatorze.free.fr/css3/modalbox/index.html>
>>>>>>(cliquer sur "SHOW" dans le footer)<<<<<<
bon, là dans ma construction, j'ai du rater qqc...

comme l'indique ce petit bout d'essai je veux remplacer mes alert() (un
seul bouton) et confirm() (deux boutons OUI/NON ou CONFIRM/CANCEL) par
une div qui se centre sur la page, grise la page et plus tard, avec une
animation qui l'a fait apparaître de height = 0 à sa height, comme sur
Mac OS X certaines sheet...

SAM

unread,
Oct 6, 2011, 12:24:14 PM10/6/11
to
Le 06/10/11 14:50, Une Bévue a écrit :
> SAM<stephanemor...@wanadoo.fr.invalid> wrote:
>
>> exemple : centrage d'une image :
>
> OUAIS ! ça roule super
> mais je ne suis pas parvenu à faire la même chose avec une modal box :
> <http://studio.quatorze.free.fr/css3/modalbox/index.html>
>>>>>>> (cliquer sur "SHOW" dans le footer)<<<<<<
> bon, là dans ma construction, j'ai du rater qqc...
>
> comme l'indique ce petit bout d'essai je veux remplacer mes alert() (un
> seul bouton) et confirm() (deux boutons OUI/NON ou CONFIRM/CANCEL) par
> une div qui se centre sur la page, grise la page

jusque là ça semble presque fonctionner
sauf que le truc couvrant semble ne pas être gris ?
et que je ne crois pas qu'il faille lui donner un z-index

la "modal" ensuite (et toujours sans z-index)

j'ai viré "xmaskframe" dont auquel je ne comprends pas l'usage,
ce qui fait que [CONFIRM] [CANCEL] ne fonctionnent plus !


<div id="xdivmasking" style="position: absolute; top: 0px; left: 0px;
width: 100%; height: 100%; opacity: 0.6; background-color: rgb(0,0,0);">
</div>
<div id="divContainer" style="position: absolute; top: 50%;
left: 50%; margin-left: -250px; margin-top: -128px">
<img src="bouton_rouge.jpg" height="257" width="500" alt="" />
<p id="p_button_normal" style="margin: 0pt; border: 0pt none;
text-align: center;">
<button onclick="confirm();" class="normal"
id="button_normal_confirm">
CONFIRM
</button>
<button onclick="cancel();" class="normal"
id="button_normal_cancel">
CANCEL
</button>
</p>
</div>

> et plus tard, avec une animation qui l'a fait apparaître de height = 0
> à sa height, comme sur Mac OS X certaines sheet...


Bon ... tout ça ... on en avait déjà parlé ... il y a ... 3 ans ?
Lors de l'ancien Mac, non ?
(celui que tu as trucidé à grands coups de code Ruby)


Tu dois avoir des jikérizes ttes faites esssprès pour ça et en mieux :
avec effet d'accélération/décélération

Une Bévue

unread,
Oct 6, 2011, 11:51:16 PM10/6/11
to
On 06/10/2011 18:24, SAM wrote:
> Le 06/10/11 14:50, Une Bévue a écrit :

> jusque là ça semble presque fonctionner
> sauf que le truc couvrant semble ne pas être gris ?
> et que je ne crois pas qu'il faille lui donner un z-index
>
> la "modal" ensuite (et toujours sans z-index)
>
> j'ai viré "xmaskframe" dont auquel je ne comprends pas l'usage,
> ce qui fait que [CONFIRM] [CANCEL] ne fonctionnent plus !

Ah bon ? sur quel navigateur.

De mémoire (je ne suis pas sur ma bécanne mais sur Ubuntu 11.10 tout
frais d'hier soir) :
- une première div pour griser la page et rendre (zIndex) ses boutons
NON-fonctionnels ;
- au dessus une div de 1px X 1px pour le centrage horizontal de la
suivante ;
- enfin la div commandable par js qui comportera un peu de texte
éventuellement une image un ou deux boutons.


> <div id="xdivmasking" style="position: absolute; top: 0px; left: 0px;
> width: 100%; height: 100%; opacity: 0.6; background-color: rgb(0,0,0);">
> </div>
> <div id="divContainer" style="position: absolute; top: 50%;
> left: 50%; margin-left: -250px; margin-top: -128px">
> <img src="bouton_rouge.jpg" height="257" width="500" alt="" />
> <p id="p_button_normal" style="margin: 0pt; border: 0pt none;
> text-align: center;">
> <button onclick="confirm();" class="normal"
> id="button_normal_confirm">
> CONFIRM
> </button>
> <button onclick="cancel();" class="normal"
> id="button_normal_cancel">
> CANCEL
> </button>
> </p>
> </div>

je regarde ça dès que j'ai Apache2 sous Ubuntu...

>> et plus tard, avec une animation qui l'a fait apparaître de height = 0
>> à sa height, comme sur Mac OS X certaines sheet...
>
>
> Bon ... tout ça ... on en avait déjà parlé ... il y a ... 3 ans ?

ben oui, c'est ça la récurence, je ne fais du html que tous les trois ans.

> Lors de l'ancien Mac, non ?
> (celui que tu as trucidé à grands coups de code Ruby)

c'est la vidéo qui est morte toute seule, cet iMac-là.

> Tu dois avoir des jikérizes ttes faites esssprès pour ça et en mieux :
> avec effet d'accélération/décélération
>

rien gardé.

Une Bévue

unread,
Oct 7, 2011, 1:15:19 AM10/7/11
to
On 06/10/2011 18:24, SAM wrote:
>
> j'ai viré "xmaskframe" dont auquel je ne comprends pas l'usage,
> ce qui fait que [CONFIRM] [CANCEL] ne fonctionnent plus !
>

a partir de ton code de DIVs j'ai ré-écrit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR">
<head>
<title>Modal Box</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=utf-8">
<link rel="shortcut icon" href="../../landp_public/img/favicon.png"
type="image/png" />
<link rel="shortcut icon" href="../../landp_public/img/favicon.ico"
type="image/x-icon" />
<link rel="stylesheet" type="text/css"
href="../../landp_public/landp.css" media="screen" />
<!-- script language="JavaScript" type="text/javascript"
src="modalbox.js" ></script -->
<script language="JavaScript" type="text/javascript">
window.onload=doit;
var xm;
var dc;
//var mb;
function doit(){
//mb=document.getElementById("divContainer").style;
xm=document.getElementById("xdivmasking").style;
dc=document.getElementById("divContainer").style;
//mb=new maskpanel();
//mb.load();
xm.display="none";
dc.display="none";
}
function show(){
xm.display="block";
dc.display="block";
//mb.display="block";
//mb.show();
}
function hide(){
xm.display="none";
dc.display="none";
//mb.display="none";
}
function cancel(){
hide();
//mb.hide();
//mb.respons=false;
dc.respons=false;
result();
return false;
}
function confirm(){
hide();
//mb.hide();
//mb.respons=true;
dc.respons=true;
result();
return true;
}
function result(){
//console.log("result() : "+mb.respons);
//return mb.respons;
console.log("result() : "+dc.respons);
return dc.respons;
}
</script>
</head>
<body>
<div id="xdivmasking" style="position: absolute; top: 0px; left: 0px;
width: 100%; height: 100%; opacity: 0.6; background-color: rgb(0,0,0);">
</div>
<div id="divContainer" style="position: absolute; top: 0px;
left: 50%; margin-left: -250px; margin-top: 0px">
<img src="bouton_rouge.jpg" height="257" width="500" alt="" />
<p id="p_button_normal" style="margin: 0pt; border: 0pt none;
text-align: center;">
<button onclick="confirm();" class="normal"
id="button_normal_confirm">
CONFIRM
</button>
<button onclick="cancel();" class="normal"
id="button_normal_cancel">
CANCEL
</button>
</p>
</div>
<div id="header">
<div id="header_left"><h1><img
src="../../landp_public/img/icon.png" alt="" width="32" height="32"
/>Identifiants & mots de passe</h1></div>
<div id="header_right"><button class='normal'
onclick="search_items();return false">Rechercher</button><input type="text"
onfocus="javascript:this.value=''" id="search_item"
onblur="search_items();return false;" name="search_item"
value="<-- Entrez un nom à rechercher -->" /></div>
</div>
<div id="main">
<div id="categories"></div>
<div id="items"></div>
<div id="item"></div>
</div>
<div id="footer">
<div id="footer_left">
<button class='normal' onclick="Javascript: new
Request('php/category_add.php', 'item');">+</button><button
class='normal' onclick="Javascript:
deleteCategory();return false;">-</button>
</div>
<div id="footer_center">
<button class='normal' onclick="Javascript: new
Request('php/item_add.php', 'item');">+</button>
</div>
<div id="footer_right">
<button class='normal' onclick="show();">SHOW</button>
<!--
<button class='normal' onclick="hide();">HIDE</button>
-->
</div>
</div>
<div id='log'></div>
</body>
</html>

et là ça roule,

essentiellement j'ai désactivé le modalbox.js et changé le js dans la
pade accordingly...

reste + qu'à faire la tempo.
aussi il faut que je prévoie de pouvoir cgarger/redéfinir le contenu de
"divContainer", un simple #innerHTML=... fera l'affaire.

MAIS, tu as raison c'est une très bonne idée, plutôt que construire les
DIVs par js, il suffit de les mettre une fois pour toute dans le HTML et
changer à volonté l'état et le contenu...

SAM

unread,
Oct 7, 2011, 6:39:15 AM10/7/11
to
Le 07/10/11 07:15, Une Bévue a écrit :
>
> a partir de ton code de DIVs j'ai ré-écrit :
(...)
> <script language="JavaScript" type="text/javascript">

<script type="text/javascript">

(...)
> function show(){
> xm.display="block";
> dc.display="block";

// pour éviter toute erreur (block, inline, table ?)
xm.display="";
dc.display="";
// hop! retour à mode par défaut : celui naturel ou défini par css

> //mb.display="block";
> //mb.show();
> }

(...)

> MAIS, tu as raison c'est une très bonne idée, plutôt que construire les
> DIVs par js, il suffit de les mettre une fois pour toute dans le HTML et
> changer à volonté l'état et le contenu...

<http://stephane.moriaux.pagesperso-orange.fr/truc/echange_divs>
<http://stephane.moriaux.pagesperso-orange.fr/truc/div_eparts>
Un autre vieux truc de démo dont je crois que seule la 1ière ligne de
boutons fonctionne +/-
<http://stephane.moriaux.pagesperso-orange.fr/truc/jouer_avec_divs>
<http://stephane.moriaux.pagesperso-orange.fr/truc/div_eparts>

Une Bévue

unread,
Oct 7, 2011, 9:44:17 AM10/7/11
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:
> Le 07/10/11 07:15, Une Bévue a écrit :
>>
>> a partir de ton code de DIVs j'ai ré-écrit :
> (...)
>> <script language="JavaScript" type="text/javascript">
>
> <script type="text/javascript">

Oui, c'est vrai, MAIS l'intero n'est que dans 2/3 mois...

> (...)
>> function show(){
>> xm.display="block";
>> dc.display="block";
>
> // pour éviter toute erreur (block, inline, table ?)
> xm.display="";
> dc.display="";
> // hop! retour à mode par défaut : celui naturel ou défini par css

Ah ok, quand on met #display="";
c'est retour à la valeur par défaut ?

Pas très logique, enfin, le web et la logique...
Je regarderai de près.
@+

--
Une Bévue

SAM

unread,
Oct 8, 2011, 4:52:08 AM10/8/11
to
Le 07/10/11 15:44, Une Bévue a écrit :

> SAM<stephanemor...@wanadoo.fr.invalid> wrote:
>> Le 07/10/11 07:15, Une Bévue a écrit :
>>>
>>> function show(){
>>> xm.display="block";
>>> dc.display="block";
>>
>> // pour éviter toute erreur (block, inline, table ?)
>> xm.display="";
>> dc.display="";
>> // hop! retour à mode par défaut : celui naturel ou défini par css
>
> Ah ok, quand on met #display="";
> c'est retour à la valeur par défaut ?

bon ...
pour se rapprocher d'une description qui te sera un peu plus logique :
- un coup on définit un style ('none')
- un coup on gomme cette instruction, on la disparitionne ('')

> Pas très logique, enfin, le web et la logique...

c'est de la logique javascript <--> html
le javascript modifie un style --> ça corrige les css
le javascript abandonne sa modif --> les css redeviennent "normales"


function affiche(el) { el.display = el.display==''? 'none' : '';}
function hideShow() { affiche(xm); affiche(dc); }

function doit() {


xm=document.getElementById("xdivmasking").style;
dc=document.getElementById("divContainer").style;

hideShow();
}
function cancel(){


dc.respons=false;
result();
return false;
}
function confirm(){

dc.respons=true;
result();
return true;
}
function result(){

hideShow();


console.log("result() : "+dc.respons);
return dc.respons;
}

Pas certain qu'avec IE on ait encore accès à dc.respons
si dc a été undisplayed (display:none;)

Une Bévue

unread,
Oct 8, 2011, 5:48:42 AM10/8/11
to

OK.

> Pas certain qu'avec IE on ait encore accès à dc.respons
> si dc a été undisplayed (display:none;)

Ma religion m'interdit d'utiliser IE !

--
Une Bévue

SAM

unread,
Oct 8, 2011, 7:07:40 AM10/8/11
to
Le 08/10/11 11:48, Une Bévue a écrit :
>
> OK.

function cancel(){
dc.respons=false;
return result();
}
function confirm(){
dc.respons=true;
return result();
}
function result(){
hideShow();
console.log("result() : "+dc.respons);
return dc.respons;
}

>> Pas certain qu'avec IE on ait encore accès à dc.respons
>> si dc a été undisplayed (display:none;)
>
> Ma religion m'interdit d'utiliser IE !

Peut-être qqu'un d'autre lit ces posts ?

Une Bévue

unread,
Oct 8, 2011, 12:48:56 PM10/8/11
to
On 08/10/2011 13:07, SAM wrote:
>
> Peut-être qqu'un d'autre lit ces posts ?
>

il adaptera le script ?
pas obligé de verser dans l'universel non ?

0 new messages