décalages des formulaires dans le template chrome

Messagepar eraynaud » Mar 11 Avr 2006, 00:21

Bonjour,
J'ai découvert hier osCSS et j'ai tout de suite été conqui. J'était en train de développer une boutique de revente de produits informatiques depuis quelques semaine avec oscommerce ms2 mais la modification des templates était un peu trop difficile pour moi.
Bref, j'ai donc décidé d'utiliser osCSS. Mais je n'y connais rien du tout en CSS. Après quelques tatonnages, je commence à comprendre le système.
Il y a cependant un problème que je n'arrive pas à régler. J'essaye de modifier le template chrome mais je n'arrive pas à résoudre le problème des formulaires décalé dans les pages login et create_account.
J'ai trouvé que le problème se situait dans le fichier stylesheet.css et dans la section input.
C'est la ligne float:right qui me gêne.

Est-ce que quelqu'un pourrait m'aider??

Merci d'avance
________________________________________________________

Le savoir appartient à tout le monde !!
Le site d'une très grande artiste
eraynaud
Membre inactif
 
Messages: 5
Inscription: Lun 10 Avr 2006, 20:36
Localisation: Lyon

Messagepar stepibou » Mar 11 Avr 2006, 16:16

Bienvenu!

C'est plus une question pour j4k, ca ! :P

esssaye de le remplacer par text-align: right; si ca te gene...

bye
--> osCSS inside <--
stepibou
Membre très actif
 
Messages: 274
Inscription: Dim 30 Oct 2005, 02:15
Localisation: Lyon

Messagepar j4k » Mar 11 Avr 2006, 19:30

ok je vais pas me répéter, mais le template n'est pas abouti donc il est vrai qu'il ya des décalages sur certaines pages.

je n'ai pâs le temps de donner une réponse toute prête alors je vous soumet les liens qui vous permettront de faire vous même (je pense)

http://jeffhowden.com/code/css/forms/
http://www.fredcavazza.net/doc/tutoriel ... _intro.htm

il y a tout la dedans pour faire des formulaires bien alignés en css.
N'hésitez pas en cas de blocage, et si vous y apportez amélioratios à faire remonter l'infos
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar eraynaud » Jeu 13 Avr 2006, 00:19

Merci,
Je viens de passer quelques nuits à apprendre php et css en même temps que j'essayait de débuguer ce template. Je suis arriver à régler le problème d'affichage des formulaires dans les pages création de compte et login.
Je poste les modifs que j'ai faites dans stylesheet.css du thème chrome.

Code: Tout sélectionner
/*-Form----------------------------------------------- */

input {
 font-family: Verdana;
 font-size: 10px;
  border: 1px solid #FFF;
 color: #FFF;
  background-color:#AAA;
  /*float: right;
 margin-right: 2px;*/
}
.gender input, .shippingSelect input {float:none;}
.cartQty input,.cartDelete input {float:left;}


select {
 font-family: Verdana;
 font-size: 10px;
  border: 1px solid #FFF;
 color: #FFF;
  background-color:#AAA;
  margin-right:2px;
}

textarea {
 font-family: Verdana;
 font-size: 10px;
  border: 1px solid #FFF;
 color: #FFF;
  background-color:#AAA;
  margin-left:30px;
}

input.submit {
 border: 1px solid #99C;
 color: #99C;
  background-color:#444;
  font-family: Verdana;
 font-size: 10px;
  display:inline;
}


/* all account form  / account_password - */
/*fieldset.account { padding: 10px; width: 495px;  margin: 0; border: 4px double #7c5d3d; }
fieldset.account p { margin: 1em 0 0 0; }
fieldset.account label { width: 160px; line-height: 25px; margin-right: 10px; float: left; text-align: right; /*cursor: help;*/ }
p.formBt { text-align:center; }


fieldset p { margin:1em 0 0 0; }
fieldset label { width: 120px; line-height: 25px; margin-right: 10px; float: left; text-align: left; /*cursor: help;*/ }
fieldset input { border:1px solid gray;}
fieldset select { width:180px;}

img {border: 0px; }

/* -- shopping_cart.php -- */

div.cartProduct { margin:0;  padding: 0;  clear: left; }

div.cartProduct p.cartDelete { float: left; margin: 3em 0 0 0; padding:0; }

div.cartProduct p.cartDelete label {
  width:16px;
  background: transparent url(../images/cross.gif) no-repeat ;
  margin: 0; padding:0;
}

div.cartProduct p.cartDelete span { width:16px; margin:0; padding: 0; visibility: hidden; text-indent: -9999px;}


div.cartProduct a.tn {float: left; width: 100px; margin: 0.5em 0 0 0;}

a.tn img { 
  border: 1px solid #333;
  border-width: 0;
}

/* -- checkout_payment.php -- */

#checkoutPayment label {width: 120px; margin-right: 10px; text-align: left;}
________________________________________________________

Le savoir appartient à tout le monde !!
Le site d'une très grande artiste
eraynaud
Membre inactif
 
Messages: 5
Inscription: Lun 10 Avr 2006, 20:36
Localisation: Lyon

Messagepar yhugo » Jeu 13 Avr 2006, 17:26

Bonjour ...

Je ne considère pas ce template bogué. Moi je l'ai considéré comme un guide ... L'effort de convertir osCommerce en code standard et valide c'est géant ! Il faut poser notre pierre (angulaire ou pas) sur cette route ;) ... si on veut la pérennité de ce projet ... Merci à j4k et tous les autres pour leur implication ! Et pour les heures de boulots qu'ils m'ont évitées :D

Moi qui au départ ne connaissait pas osCss je m'étais résigné à faire cette convertion, car, pour moi, il n'est plus question de travailler avec la mise en page par tableau ... De toute façon je ne me souvient plus comment faire :P ...

J'ai d'abord créer mon design en XHTML/CSS ... et doucement je le permutte avec chrome pour l'intégrer dans l'architechture d'osCss ... J'espère qu'il en résultera un troisième template (officiel ou pas).

Moi avant de rentrer dans les page php je regarde la source des pages avec fireFox (le php est alors converti en html, ce qui est plus facile à lire) et j'identifie les class et les id ... puis dans mon éditeur de css je recherche le id ou le class que j'ai besoin de modifier dans la page stylesheet.css et je fais les changements directement et je test rapidement dans IE et FireFox ...

Une autre référence pour le design de formulaire avec les standards : http://www.openweb.eu.org/articles/formulaire_accessible/


Salutations ...



yhugo
___
Version -> osCSS 1.1-RC1
Contribs -> MultiGeoZone MultiTable, EZ Big Image, Minimum Order Amount ...
yhugo
Membre très actif
 
Messages: 150
Inscription: Lun 27 Mar 2006, 21:19
Localisation: Rimouski, Québec


Retourner vers Design

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron