Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1608 connectés 

 
 


 Mot :   Pseudo :  
 
 Page :   1  2
Page Suivante
Page Précédente
Bas de page 
Auteur Sujet :

CSS et comportement etrange

n°495983
samuelp
Posté le 24-08-2003 à 20:53:40  profilanswer
 

Reprise du message précédent :

Le Castor a écrit :


 
Même avec des divs dans un span, ça fera un retour à la ligne...


Aie. On ne peut donc pas faire de formulaires évolué en CSS :/
A moins que quelque chose m'ait echappé.

mood
Publicité
Posté le 24-08-2003 à 20:53:40  profilanswer
 

n°495998
Le Castor
Neurasténique...
Posté le 24-08-2003 à 21:11:04  profilanswer
 

samuelp a écrit :


Aie. On ne peut donc pas faire de formulaires évolué en CSS :/
A moins que quelque chose m'ait echappé.


 
Mais si, mais si, tu met une div général, et tu fout tout bout-à-bout, ou alors tu t'amuses avec du positionnement absolu...


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
n°496591
samuelp
Posté le 25-08-2003 à 11:43:38  profilanswer
 

Le Castor a écrit :


 
Mais si, mais si, tu met une div général, et tu fout tout bout-à-bout, ou alors tu t'amuses avec du positionnement absolu...


Si je met une DIV generale cela ne resoudrait en rien mon probleme de positionnement, si je veux par exemple avoir un formulaire bien structuré, avec les LABELS bien alignés ...
 
Le Positionnement absolu necessite des calculs (je ne l'ai pas dit mais ces formulaires sont generes automatiquement en PHP en fonction d'un Theme et des options)
 
Je suis un peu deçu par CSS sur ce coup là

n°496707
samuelp
Posté le 25-08-2003 à 13:12:52  profilanswer
 

J'ai peut etre trouvé quelque chose :
En mettant l'attribut : float: left;  
Je peux peut etre forcer les div (a l'interieur d'un inline ???) a s'aligner
Dans ce cas il me faut fixer une valeur pour la largeur (obligatoire) et pour la hauteur (si on veut que ce soit propre)
 
Quelqu'un peut me dire ce qu'il en pense ?

n°496721
Le Castor
Neurasténique...
Posté le 25-08-2003 à 13:20:17  profilanswer
 

samuelp a écrit :

J'ai peut etre trouvé quelque chose :
En mettant l'attribut : float: left;  
Je peux peut etre forcer les div (a l'interieur d'un inline ???) a s'aligner
Dans ce cas il me faut fixer une valeur pour la largeur (obligatoire) et pour la hauteur (si on veut que ce soit propre)
 
Quelqu'un peut me dire ce qu'il en pense ?


 
En fait, j'ai pas du comprendre ce que tu voulais faire...  [:fight]  
 
Sinon, balance le code source avec des tables, juste pour voir ce que tu veut faire, et puis après on peut voir comment transformer ça !


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
n°496732
samuelp
Posté le 25-08-2003 à 13:30:02  profilanswer
 

Le Castor a écrit :


 
En fait, j'ai pas du comprendre ce que tu voulais faire...  [:fight]  
 
Sinon, balance le code source avec des tables, juste pour voir ce que tu veut faire, et puis après on peut voir comment transformer ça !


Code :
  1. <body  id="page_global" marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()">
  2. <div id="container">
  3. <div id="menuBackground">
  4. </div>
  5. <div id="pagecontainer">
  6. <div class="formtitle">Please complete the user value</div>
  7. <form action="" method="POST" name="Please complete the user value">
  8. <fieldset  style="">
  10. <legend class="formsubtitle">User specification</legend>
  11. <table BORDER='0'  CELLSPACING='2' CELLPADDING='2'  CLASS='tableall' >
  12. <tr CLASS='tableline'>
  13. <td ROWSPAN='1' COLSPAN='1' CLASS='tablecell'><div class='necessary'>Gender</div></td><td class='tablecell'><select name="titreid">
  14. <option value="1">M</option>
  15. <option value="2">Mlle</option>
  16. <option value="3">Mme</option>
  17. <option value="4">Dr</option>
  18. <option value="5">Mgr</option>
  19. </select>
  21. </td>
  22. <td CLASS ='tablecell'>
  23. </td>
  24. <td CLASS ='tablecell'>
  25. </td>
  26. </tr>
  27. <tr CLASS='tableline'>
  28. <td ROWSPAN='1' COLSPAN='1' CLASS='tablecell'><div class='necessary'>Surname</div></td><td class='tablecell'><input type="TEXT" value="" name="name" style="width:160px"></input>
  29. </td>
  30. <td CLASS ='tablecell'>
  31. </td>
  32. <td CLASS ='tablecell'>
  33. </td>
  34. </tr>
  35. <tr CLASS='tableline'>
  36. <td ROWSPAN='1' COLSPAN='1' CLASS='tablecell'>First Name</td><td class='tablecell'><input type="TEXT" value="" name="firstname" style="width:160px"></input>
  38. </td>
  39. <td CLASS ='tablecell'>
  40. </td>
  41. <td CLASS ='tablecell'>
  42. </td>
  43. </tr>
  44. <tr CLASS='tableline'>
  45. <td ROWSPAN='1' COLSPAN='1' CLASS='tablecell'><div class='necessary'>Function</div></td><td class='tablecell'><select MULTIPLE name="functionid[]" style="width:160px">
  46. <option value="-1">SYSFONCTION</option>
  47. <option value="1">ADMINISTRATEUR</option>
  48. </select>
  49. </td>
  50. <td CLASS ='tablecell'>
  51. <div class='necessary'></div></td><td class='tablecell'><input type="BUTTON" value="Create" name="functionadd" onclick="window.open('functionadd.php','this','width=640,height=480,scrollbars=yes');"></input>
  53. </td>
  54. </tr>
  55. <tr CLASS='tableline'>
  56. <td ROWSPAN='1' COLSPAN='1' CLASS='tablecell'>Email</td><td class='tablecell'><input type="TEXT" value="" name="email" style="width:160px"></input>
  57. </td>
  58. <td CLASS ='tablecell'>
  59. </td>
  60. <td CLASS ='tablecell'>
  61. </td>
  62. </tr>
  63. <tr CLASS='tableline'>
  64. <td ROWSPAN='1' COLSPAN='1' CLASS='tablecell'>Available modules</td><td class='tablecell'><select MULTIPLE name="moduleid[]" style="width:160px;" size="5" onClick="selapp(document.forms['Please complete the user value'],document.forms['Please complete the user value'].elements['moduleid[]'],document.forms['Please complete the user value'].elements['moduleautorizedid[]'])">
  65. <option value="1">Administration</option>
  66. </select>
  68. </td>
  69. <td CLASS ='tablecell'>
  70. <div class='necessary'>Autorized Modules</div></td><td class='tablecell'><select MULTIPLE name="moduleautorizedid[]"  style="width:160px;" size="5" onClick="selapp(document.forms['Please complete the user value'],document.forms['Please complete the user value'].elements['moduleautorizedid[]'],document.forms['Please complete the user value'].elements['moduleid[]'])">
  71. </select>
  72. </td>
  73. </tr>
  74. </table>
  75. </fieldset>
  76. <fieldset  style="">
  77. <legend class="formsubtitle">Autentification specification</legend>
  78. <table BORDER='0'  CELLSPACING='2' CELLPADDING='2'  CLASS='tableall' >
  79. <tr CLASS='tableline'>
  80. <td ROWSPAN='1' COLSPAN='1' CLASS='tablecell'><div class='necessary'>Login</div></td><td class='tablecell'><input type="TEXT" value="" name="login"></input>
  81. </td>
  83. </tr>
  84. <tr CLASS='tableline'>
  85. <td ROWSPAN='1' COLSPAN='1' CLASS='tablecell'><div class='necessary'>Password</div></td><td class='tablecell'><input type="PASSWORD" value="" name="password"></input>
  86. </td>
  87. </tr>
  88. <tr CLASS='tableline'>
  89. <td ROWSPAN='1' COLSPAN='1' CLASS='tablecell'><div class='necessary'>Re-enter the password</div></td><td class='tablecell'><input type="PASSWORD" value="" name="passwordretry"></input>
  90. </td>
  91. </tr>
  92. </table>
  93. </fieldset>
  94. <fieldset  style="">
  95. <legend class="formsubtitle">Optionals specification</legend>
  96. <table BORDER='0'  CELLSPACING='2' CELLPADDING='2'  CLASS='tableall' >
  98. </table>
  99. </fieldset>
  100. <fieldset  style="">
  101. <legend class="formsubtitle">Validate your user</legend>
  102. <table BORDER='0'  CELLSPACING='2' CELLPADDING='2'  CLASS='tableall' >
  103. <tr CLASS='tableline'>
  104. <td ROWSPAN='1' COLSPAN='1' CLASS='tablecell'></td><td class='tablecell'><input type="BUTTON" value="Validation" name="Please complete the user value" onclick="fillSelect(document.forms['Please complete the user value'].elements['moduleautorizedid[]']),checkForm(arrayToVerify,document.forms['Please complete the user value'],'Please verify you have correctly fill all the requested field. Please also verify the length of your data','The length of the field should be contain in this range')"></input>
  105. </td>
  106. <td CLASS ='tablecell'>
  107. </td><td class='tablecell'><input type="RESET" value="Reset"></input>
  108. </td>
  109. </tr>
  110. </table>
  111. </fieldset>
  112. </form>
  113. </div><!-- End div pagecontainer -->
  115. </div> <!-- End div Container -->
  117.  </body>
  118.  </html>


 
Si il te faut les CSS je te les files

n°496741
Le Castor
Neurasténique...
Posté le 25-08-2003 à 13:36:35  profilanswer
 

ok, je vois !
 
Bah, faut utiliser des float: left;, et après ça devrait aller !


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
n°496958
samuelp
Posté le 25-08-2003 à 15:30:12  profilanswer
 

Ok.
 
Bon j'y suis presque mais il reste un gros bug : Bien que j'arrive a mettre plusieurs elements DIV sur une meme ligne, je n'arrive plus a faire passer à la ligne quand je le veux. Je m'explique, voici le HTML généré :

Code :
  1. <div class=" formcontainer">
  2.    <div class="formlinecontainer">
  3.     <div class="formelement">
  4.      <h3 class="necessary">Gender</h3>
  5.     </div><!-- End Div formelement -->
  6.     <div class="formelement">
  8.      <select name="titreid">
  9.       <option value="1">M</option>
  10.       <option value="2">Mlle</option>
  11.       <option value="3">Mme</option>
  12.       <option value="4">Dr</option>
  13.       <option value="5">Mgr</option>
  15.      </select>
  16.     </div><!-- End Div formelement -->
  17.    </div><!-- end div formlinecontainer -->
  18.    <div class="formlinecontainer">
  19.     <div class="formelement">
  20.      <h3 class="necessary">Surname</h3>
  21.     </div><!-- End Div formelement -->
  22.     <div class="formelement">
  24.      <input  type="TEXT" value="" name="name" style="width:160px">
  25.      </input>
  26.     </div><!-- End Div formelement -->
  27.    </div><!-- end div formlinecontainer -->
  28.    <div class="formlinecontainer">
  29.     <div class="formelement">
  30.      <span class="formtext">First Name</span>
  31.     </div><!-- End Div formelement -->
  33.     <div class="formelement">
  34.      <input type="TEXT" value="" name="firstname" style="width:160px">
  35.      </input>
  36.     </div><!-- End Div formelement -->
  37.    </div><!-- end div formlinecontainer -->
  38.    <div class="formlinecontainer">
  39.     <div class="formelement">
  40.      <h3 class="necessary">Function</h3>
  42.     </div><!-- End Div formelement -->
  43.     <div class="formelement">
  44.      <select MULTIPLE name="functionid[]" style="width:160px">
  45.       <option value="-1">SYSFONCTION</option>
  46.       <option value="1">ADMINISTRATEUR</option>
  47.      </select>
  48.     </div><!-- End Div formelement -->
  49.     <span class="formelement">
  51.     <div class="formelement">
  52.      <h3 class="necessary"></h3>
  53.     </div><!-- End Div formelement -->
  54.     <div class="formelement">
  55.      <input  type="BUTTON" value="Create" name="functionadd" onclick="window.open('functionadd.php','this','width=640,height=480,scrollbars=yes');">
  56.      </input>
  57.     </div><!-- End Div formelement -->
  58.    </div><!-- end div formlinecontainer -->
  59.    <div class="formlinecontainer">
  61.     <div class="formelement">
  62.      <span class="formtext">Email</span>
  63.     </div><!-- End Div formelement -->
  64.     <div class="formelement">
  65.      <input type="TEXT" value="" name="email" style="width:160px">
  66.      </input>
  67.     </div><!-- End Div formelement -->
  68.    </div><!-- end div formlinecontainer -->
  70.    <div class="formlinecontainer">
  71.     <div class="formelement">
  72. Available modules     </div><!-- End Div formelement -->
  73.     <div class="formelement">
  74.      <select MULTIPLE name="moduleid[]" style="width:160px;" size="5" onClick="selapp(document.forms['Please complete the user value'],document.forms['Please complete the user value'].elements['moduleid[]'],document.forms['Please complete the user value'].elements['moduleautorizedid[]'])">
  75.       <option value="1">Administration</option>
  76.      </select>
  77.     </div><!-- End Div formelement -->
  79.     <span class="formelement">
  80.     <div class="formelement">
  81.      <h3 class="necessary">Autorized Modules</h3>
  82.     </div><!-- End Div formelement -->
  83.     <div class="formelement">
  84.      <select MULTIPLE name="moduleautorizedid[]"  style="width:160px;" size="5" onClick="selapp(document.forms['Please complete the user value'],document.forms['Please complete the user value'].elements['moduleautorizedid[]'],document.forms['Please complete the user value'].elements['moduleid[]'])">
  85.      </select>
  86.     </div><!-- End Div formelement -->
  88.    </div><!-- end div formlinecontainer -->
  89.   </div><!-- End formcontainer div -->


 
l'element formlinecontainer contient donc formelement. Dans formelement j'ai mis le float : left, mais cela me donne un resultat surprenant : selon la taille attribuée à l'element formelement (width) ça place les elements un peu n'importe  comment comme sur un echiquier
 
Voici les CSS importants :

Code :
  1. .formelement
  2. {
  3. float: left ;
  4. font-family : verdana, Arial ;
  5. width : 150px;
  6. margin-left: 10px ;
  7. margin-right: 10px ;
  8. padding-left : 10px;
  9. padding-right: 10px;
  10. padding-top: 10px;
  11. padding-bottom: 10px ;
  12. background-color : #aeaefc ;
  13. }
  15. .formcontainer
  16. {
  17. font-family : verdana, Arial ;
  18. width : 100% ;
  19. background-color : #aeaefc ;
  20. filter: alpha(Opacity=30);
  21. }
  23. .formlinecontainer
  24. {
  25. font-family : verdana, Arial ;
  26. width : 100% ;
  27. margin-left : 10px;
  28. margin-right: 10px;
  29. padding-left: 10px;
  30. padding-top: 10px ;
  31. background-color : #aeaefc ;
  32. filter: alpha(Opacity=30);
  33. }


 
Normalement quand je ferme le DIV de formlineelement, je devrais passer à a la ligne suivante non ?

n°497022
Le Castor
Neurasténique...
Posté le 25-08-2003 à 16:20:02  profilanswer
 

Avec des float, pas forcément, ça rajoute à la suite.
 
Faut rajouter "clear: both;" dans la div qui est sur la ligne suivante.


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
n°497030
samuelp
Posté le 25-08-2003 à 16:25:20  profilanswer
 

Le Castor a écrit :

Avec des float, pas forcément, ça rajoute à la suite.
 
Faut rajouter "clear: both;" dans la div qui est sur la ligne suivante.


Oui je viens juste de decouvrir cela :)
 
En fait, je fais un clear: both; dans l'attribut CSS formlinecontainer
 
Cela me permet de passer à la ligne quand je le veux, par contre, les elements alignés sont placé (au niveau de la hauteur) comme dans un escalier.
 
Par exemple, Quand j'ai 3 elements alignes, j'ai le 1er qui est en haut, le deuxieme qui est legerement moins haut (mais sur la meme ligne) et le 3eme legerement moins haut que le 3eme.
Saurais tu d'ou ça peut venir ? Est mon clear: both qui est mal placé ?

mood
Publicité
Posté le 25-08-2003 à 16:25:20  profilanswer
 

n°497033
Le Castor
Neurasténique...
Posté le 25-08-2003 à 16:27:08  profilanswer
 

samuelp a écrit :


Oui je viens juste de decouvrir cela :)
 
En fait, je fais un clear: both; dans l'attribut CSS formlinecontainer
 
Cela me permet de passer à la ligne quand je le veux, par contre, les elements alignés sont placé (au niveau de la hauteur) comme dans un escalier.
 
Par exemple, Quand j'ai 3 elements alignes, j'ai le 1er qui est en haut, le deuxieme qui est legerement moins haut (mais sur la meme ligne) et le 3eme legerement moins haut que le 3eme.
Saurais tu d'ou ça peut venir ? Est mon clear: both qui est mal placé ?


 
J'avais déjà ce problème une fois, mais je sais plus comment j'avais fait... c'est possible que le clear: both; soit mal placé en fait.


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
n°497123
samuelp
Posté le 25-08-2003 à 16:54:42  profilanswer
 

Je crois avoir trouvé
 
En mettant les padding et les margin a 0, j'obtiens un truc nickel
 
Je pensais que les margin servais a ecarter un element par rapport à son parent et le padding a ecarter les elements qui se trouvent à l'interieur. Ce n'est pas ça ?

n°497131
Le Castor
Neurasténique...
Posté le 25-08-2003 à 16:57:00  profilanswer
 

samuelp a écrit :

Je crois avoir trouvé
 
En mettant les padding et les margin a 0, j'obtiens un truc nickel
 
Je pensais que les margin servais a ecarter un element par rapport à son parent et le padding a ecarter les elements qui se trouvent à l'interieur. Ce n'est pas ça ?


 
Si, c'est ça.
 
On a dans l'ordre :
 
Margin - Border - Padding - Content


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
n°497163
samuelp
Posté le 25-08-2003 à 17:06:32  profilanswer
 

Le Castor a écrit :


 
Si, c'est ça.
 
On a dans l'ordre :
 
Margin - Border - Padding - Content


Oki.
Bon je vais voir ça. Encore merci pour ton coup de main, je m'en serais pas sorti sans toi ;)
 
A propos, cela sert pour application Web pour creer et modifier facilement des formulaires, feuilles, graphes... avec comme objectif de créer un module de CRM (on peut toujours rever, qui sait) Si t'es intéréssé je serais ravi d'avoir des conseils de ta part (tu es quand meme plus balaise que moi en prog PHP, et en CSS/XML/JavaScript )
 
Egalement, je n'entend plus parler de la Trust Your Penguin. C'est tombé à l'eau ? Parce que c'etait bien parti :/

mood
Publicité
Posté le   profilanswer
 

 Page :   1  2
Page Suivante
Page Précédente
Haut de page 

Aller à :
Ajouter une réponse
 

Sujets relatifs
Petit problème avec une CSS...[CSS] Site deux colonnes
[XHTML + CSS] Utilisation de la property css background[XHTML CSS] Passer site de table en div
[CSS] chevauchement de divsRéaction étrange du serveur MySQL avec le UNIX_TIMESTAMP
CSS et passage de parametresTutoriels et exercices CSS
[CSS] @page[Validation] XHTML 1.0 Transitional CSS, Omittag No et Background
Plus de sujets relatifs à : CSS et comportement etrange

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.119 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR