16 avril 2000 7 16 /04 /avril /2000 22:31

formulaires avant nouveautés Ob...

Formulaires avant...

Les couleurs en vrai étaient plus belles (vous pouvez encore les voir sur le formulaire d'inscription à la Newsletter) - boutons jaunes au repos et verts au survol, leur padding était mieux sous FF, mais dans l'urgence j'ai fait les captures d'écran comme ça venait, sous IE et FF sans faire attention...

Et voilà ce que j'ai fait pour finalement que sept jours :

/== Formulaires /

#miniGlobal {margin-top:45px}
#formComment, #divRecommander, #divNewsletter {background:#222; border:1px solid #000; padding:15px 10px 20px; font-family:Verdana; font-size:11px; color:#786e5a}
#miniGlobal h2 {margin:0 0 15px 0; padding:15px 0 0 0; font-family:Verdana; font-size:14px; color:#930; font-weight:bold} /* padd > avec margin ie remonte h2 */
#divNewsletter h2 {font-size:13px}
#miniGlobal #spmk p {margin:0; padding:0} /* ie écarte plus le h2 */

input, textarea {background:#333 url(http://idata.over-blog.com/1/67/55/37/mosa.png) fixed; border:1px solid #000; font-family:Verdana; font-size:11px; color:#786e5a;} /* boutons, champs, texte */
input.w100prct {width:98%; padding:1px 2px; margin:0 0 2px}
#miniGlobal textarea#Texte, #comm textarea {width:97%; height:110px; margin-left:1px; margin-bottom:10px; padding:5px} /* zone de saisie de texte (97% à cause d'un décalage à droite) */
label, #formComment .floatR em {color:#930} /* label à gauche et 'visible par l'auteur...' */
legend {padding:0 5px;} /* (Ob) pas trouvé... laissé, des fois que...*/

#divTexte .nomargin, #divTexte .nopadding {display:block; padding-top:10px; margin-bottom:-5px; font-size:11px} /* pour décoller "rédigez ici votre com" */
#formComment #divTexte {font-size:10px} /* me prévenir par mail */
#divRecommander p, #divNewsletter p, #formComment p {margin:5px 0; padding-top:5px}
#divRecommander span {font-size:100%}
#divNewsletter .legalNotice {margin:15px 12px; font-size:12px; color:#380} /* evtl. margin:15px; essayer sur place/au titre */

#miniGlobal .hitSubmit, #miniGlobal .submit {margin:15px 0 5px; padding:3px; font-size:14px; color:#b88300; font-weight:bold; cursor:pointer} /* boutons publier, envoyer, s'inscrire */
#miniGlobal .center input:hover {color:#480}/* les mêmes survolés */
#miniGlobal input.checkbox, input#texteImage, #divTexte input {background:#555045; border:1px solid #000} /* saisie 3 caractères (et carrés à cocher, blancs grr... ie met la couleur derrière, ff nada cf scrollbar - divTexte pour ie sinon carré bas bordé 333) */

#miniGlobal .error {border:1px solid #eaa600; width:96%; font-weight:normal; color:#eaa600; margin-top:10px} /* en jaune */
strong label {padding:0 5px 0 14px; font-size:13px; letter-spacing:0.08em} /* recopiez ici etc... */
#divRecommander strong label {padding:0 10px 0 18px} /* le pousser + */
#texteImage {width:70px; height:24px; margin:0 4px; text-align:center; font-family: Book Antiqua, Bookman Old Style, serif; font-size:19px; font-weight:bold; color:#000; letter-spacing:0.3em} /* champ où recopier les caractères */
#img_key {margin:10px 2px -8px; border:1px solid #000} /* l'img des trois caractères */
#miniGlobal a img {margin:0 1px; border:1px solid #000} /* les deux flèches */
#miniGlobal a:hover img {border-color:#eaa600}

#miniGlobal .ok {color:#480; margin-top:50px; font-size:16px; text-align:center}
#miniGlobal .closeWindow {margin-top:15px; background:#555045; border:1px solid #000; border-right:2px solid #111; border-bottom:2px solid #111; padding:5px; font-size:14px; font-weight:bold; cursor:pointer}
#miniGlobal .closeWindow:hover {background:#444035}

Essais Nouveaux formulaires : on reprend tout à zéro - merci Ob...

Nouvelle mouture vue avec la web developer...

...malheureusement en vrai sous FF ça donne ça :

et sous IE7 - écartant plus - pour les petits écrans ce n'est pas génial :
ceux qui ne bougeront pas l'ascenseur ne verront pas ce qui est caché

Ça y est, vous pouvez me laisser un com, j'ai refait des formulaires lisibles ! Bon, sous IE j'ai juste limité les dégâts, mais j'ai au moins réussi à liquider l'ascenseur, par contre les boutons (publier etc.) je laisse tomber...
Vous pouvez les voir comme il faut avec Firefox ! Bon, le voici :

Mais "Recommander" est toujours en compote... Version Over-blog :
(avec, il faut le dire, l'interférence de mon fond noir...) attention ça fait mal !

Et pour le remplir, ça devient carrément le parcours du combattant !
Et "Recommander la photo" ça vient faire quoi là ?!
Oulala... bon, laisse tomber...

recommander sans les horribles liens bleus

Hé, hé, avant de décider de l'éliminer j'avais quand-même commencé par virer les horribles liens facebook et consorts (si vous voulez le tuyau, y a qu'à demander), mais vu l'usine à gaz que c'est ce formulaire, personne ne va jamais s'en servir... alors pourquoi me fatiguer à le rendre présentable...

Donc, suite aux changements de formulaires chez Ob, je boycotte celui-ci, sans pour autant vous priver de partager ce merveilleux blog avec vos amis :
Recette perso, bien plus simple, et qui marche au moins sous Firefox et IE8

Recommander ce blog : Clic droit ici puis choisir "Envoyer le lien"

Pour recommander une page en particulier, pareil, clic droit sur son titre juste sous la bannière, et puis choisir "Envoyer le lien..." ( clic gauche ) (sous Firefox et paraît-il Internet Explorer 8, les autres je ne sais pas...)

Et puis si vous voulez l'envoyer à tout votre carnet d'adresses :) (je rigole !) faites outils > sélectionner les destinataires et mettez-les dans la case CCI (ça évite que vos adresses n'essaiment partout... trop peu de gens le font)

Merci !

écrire un commentaire

voir les commentaires

Christina - dans les joies d'ob - ie - ff...
commenter cet article …

commentaires

Françoise Delot 31/08/2013 21:02

Le hasard informatique permet de belles rencontres...
Votre travail fait rêver,
Je commence à tourner en Normandie,
Mon guide n' à pas votre finesse
Et je commençais à désespérer par manque de réalisation intéressante
Maintenant je sais vers où aller...
Merci

Christina 08/10/2013 11:26

Vos mots me font grand plaisir – et m'encouragent en retour (je recommence un peu à zéro, là, avec le changement de four)… Le partage (même virtuel) est si important dans nos boulots…
Merci beaucoup !

Au plaisir d'une rencontre, qui sait…

Adri 26/04/2009 04:27

Voilà, c'est lorsqu'il s'agit d'italique.

Christina 26/04/2009 04:45

c'est le pire, mais le reste est moins bien aussi sous IE, en agrandissant un peu la taille du em ça irait mieux, même sous FF ça ne serait pas du luxe
j'ai eu du mal à diminuer l'écartement plus important sous IE pour éviter l'ascenseur que peu de gens bougeraient - en fait ce sont des li vides, j'ai mis leur taille à 1px, plus sûr que
0...
ce coup-ci je vais dormir, il reste trois heures... bonne nuit

Adri 26/04/2009 04:12

J'ai aussi des différences aux niv de la police impact !! Alors qu'elle apparaît normalement dans les articles il faut que dans la fenêtre commentaire les lettres soient pixelisées !(sous ie)

Christina 26/04/2009 04:26

j'ai le même problème sous IE en fenêtre de coms, surtout en italique (police Book Antiqua, Century gotic, verdana) en gros et gras le titre ça va, mais le reste n'est pas très lisible - pour
l'italique ça se lit un peu mieux avec un letter-spacing, j'ai mis 0.05em pour que ça fasse pareil sous IE et FF... (IE ne sais pas faire 0.04, 03 07 etc. grrr)
Sa vision toute personnelle du padding des boutons et la position du texte là-dedans est très énervante aussi !

Adri 26/04/2009 04:05

Malheureusement des bugs avec IE... je cherche... :/

Christina 26/04/2009 04:10

j'ai fini par jeter l'éponge pour ma ligne ajouter un com, avec commentaires pas aligné sous IE7...

Adri 26/04/2009 03:51

Je suis parti du design minimaliste !!

Christina 26/04/2009 04:17

Bonne idée, ça fait moins de trucs à nettoyer - j'ai mis longtemps avant d'avoir le courage de trier la css d'ob qui mettait le bazar !

Adri 26/04/2009 03:49

Ah vrai dire tu as l'air dans la même situation que moi !!

Tiens voici mon blog test : http://test-bloog.over-blog.fr/

Faut dire qu'elle est bien pratique cette barre !! ;)

Christina 26/04/2009 04:04

D'enfer ! j'aime bien aussi les petits liens discrets à droite en position fixe...
sous IE7 un souci avec les titres dans le box, mangés à moitié, impec sous FF,
sous FF une flèche superposée à suivant en bas (mon écran 1280x800)
je ne vais pas aller voir sous le capot, faut que j'aille au dodo...

Adri 26/04/2009 03:16

OKi, oki.

Je peux te demander un peu d'aide pour un tuto GIMP ?

Christina 26/04/2009 03:46

oulala, j'ai chargé gimp il y a un moment mais n'ai jamais encore pris le temps d'étudier comment ça marche - et je n'aurai pas le temps avant l'hiver prochain de me pencher dessus

faut pas croire, je ne connais pas grand chose, j'ai ramé à mort avec ma css : tu vas rire, j'ai démarré de zéro il y a un an - voir ici et puis après là - et entre temps beaucoup
de lectures chez Bren du fat et dans la spécification cssEt puis j'ai fini par trouver la web developer qui aide pas mal à voir sous le capot !

Adri 26/04/2009 02:22

J'avais compris que tu avais une solution par le css pour recommander les articles et c'était l'inverse qu'il fallait comprendre ?

Christina 26/04/2009 03:15

oui pardon, je suis allée me relire, j'avais un peu trop résumé...
(finalement au lieu d'expliciter je l'ai enlevé, il ne vaut mieux pas trop l'ébruiter sur le forum... des fois que d'autres aient trouvé ce moyen, ça leur casserait la combine si Ob changeait ses
classes de façon à ne plus pouvoir le différencier...)
Donc :
1 - solution simple comme j'ai fait : un lien recommander en texte libre dans la colonne
(faire suivre à vos amis) qui mène à l'explication ici, le hic étant que IE7 et 6 ne le font pas...
2 - avec la fenêtre de Ob mais sans les liens facebook etc. (voir capture d'écran avant mon texte)

Adri 26/04/2009 01:37

Salut, apparemment tu as une solution passant par le CSS ?

"(j'ai même une solution css mais si je la dis ici je vais me faire jeter...) "

Ca m'intéresse. :)

A +

Christina 26/04/2009 02:00

.recommendForm .ob_form {display:none} /* pour virer face de bouc et cie */
.recommendForm .ob_form.search {display:block}

vu que tout le reste est class search ça n'efface que les quatre liens
attention, pas d'espace entre .ob_form et .search

sinon pour le lien facebook sur le blog, tu sais sûrement déjà :
.facebook {display:none}

bonne nuit !

christina 24/04/2009 05:41

J'ai trouvé pourquoi les coms d'ici atterrissaient sur la page d'expos : j'avais oublié de remplacer le n° de l'article dans mon copier-coller...