CSS et comportement etrange

CSS et comportement etrange - HTML/CSS - Programmation

Marsh Posté le 22-08-2003 à 18:18:31    

J'essaye de générer automatiquement une feuille HTML avec du CSS dedans.
Helas quand je fais ceci, le div qui est encapsulé herite automatiquement des propriétés du div parent.
Pire encore ! Si le parent contient un text-decoration: underline ; et le dic encapsulé un text-decoration: none; ce dernier attribut est ignoré et le text reste souligné.
 
Vla le HTML genere :

Code :
  1. <div id="container">
  2. <div id="menuBackground">
  3. </div><div id="pagecontainer">
  4. <div class='sheetcontainer'>
  5.   <div class='sheettitle'>Adding an user :
  6.    <div class='sheetsubtitle'>Recommendation
  7.     <p><span class="sheettext">You can add an user whenever you want if you have the requested ability to do that ! <br> Please take care to associate the right of use according to your wishes.</span>
  8.     <span class="sheettext">You can access the page by clicking on <a href="useradd.php">here</a>.</span>
  9.     </p>
  10.    </div><!-- End of sheetsubtitle div -->
  11.   </div><!-- End of sheettitle div -->
  12. </div><!-- End of sheetcontainer div -->
  13. <div class='sheetcontainer'>
  14.   <div class='sheettitle'>Editing or deleting an user :
  15.    <div class='sheetsubtitle'>Recommendation
  16.     <p><span class="sheettext">You can edit or delete an user whenever you want if you have the requested ability to do that ! <br> Please take care to do not delete a user that is necessary in using the software.</span> </p>
  17.     <span class="sheettext">You can access the page by clicking on <a href="useredit.php">here</a>.</span> </p>
  18.     </p>
  19.    </div><!-- End of sheetsubtitle div -->
  20.   </div><!-- End of sheettitle div -->
  21. </div><!-- End of sheetcontainer div -->
  22. </div><!-- End div pagecontainer -->
  23. </div> <!-- End div Container -->


 
Le probleme est en gras.
 
A chaque fois le underline de la class subtitle deborde sur le div sheettext.
 
J'ai essayé avec <div class="sheettext"> Mais c toujours pareil :/
 
Une idee ?

Reply

Marsh Posté le 22-08-2003 à 18:18:31   

Reply

Marsh Posté le 22-08-2003 à 18:19:11    

Tiens un joce bug, le gras n'apparait pas :/

Reply

Marsh Posté le 22-08-2003 à 18:23:20    

samuelp a écrit :

Tiens un joce bug, le gras n'apparait pas :/


 
non c'est voulu


Message édité par antp le 22-08-2003 à 18:23:25

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 22-08-2003 à 18:24:17    

HotShot a écrit :

Commence par fermer et ouvrir correctement toutes les balises... <p> etc.


C fait, toujours le meme resultat

Reply

Marsh Posté le 22-08-2003 à 18:42:27    

C'est complètement étrange, mois j'ai déjà fait des structures de ce genre, sans ton problème...


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 22-08-2003 à 20:35:33    

déjà il y a </p></p>  qui se ferme en trop apparemment...
après ca peut etre bien d'avoir la feuille de script elle-même  :)


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 23-08-2003 à 08:33:02    

Vla le code HTML entre les TAGS <body> :
 

Code :
  1. <div id="container">
  2. <div id="menuBackground">
  3. </div>
  4. <div id="pagecontainer">
  5.  <div class='sheetcontainer'>
  6.   <div class='sheettitle'>Welcome to CRM software :
  7.    <div class='sheetsubtitle'>Introduction<p>     <span class="sheettext">This is currently a development software so you can't use it properly. Please wait for the first Alpha version that will be released any times soon</span>
  8.    </p></div><!-- End of sheetsubtitle div -->
  10.   </div><!-- End of sheettitle div -->
  11.  </div><!-- End of sheetcontainer div -->
  12. </div><!-- End div pagecontainer -->
  13. </div> <!-- End div Container -->


 
Vla le CSS (pas tout ;) ) :

Code :
  1. p
  2. {
  3. font-size: 12px ;
  4. margin-top: 0px;
  5. margin-left: 0px;
  6. margin-bottom: 0px;
  7. margin-right: 0px;
  8.    text-align: justify ;
  9.    font-decoration: none ;
  10. }
  12. #menuBackground
  13. {
  14. font-weight: bold ;
  15. border: none ;
  16. border-width : 0px;
  17. width: 100%;
  18. height: 30px;
  19. color: #000000;
  20. background-color :  #006bc9;
  21. }
  23. #pagecontainer
  24. {
  25.   margin-bottom : 0px;
  26.   margin-left: auto ;
  27.   margin-right: auto ;
  28.   margin-top: 10px;
  29. font-family : verdana, Arial ;
  30. width : 90% ;
  31. background-color : #aeaefc ;
  32. padding-left : 20px;
  33. padding-right: 10px;
  34. padding-top: 0px;
  35. padding-bottom: 0px;
  36. filter: alpha(Opacity=30);
  37. }
  38. #container
  39. {
  40. background  : url(test.png) no-repeat top right  ;
  41. padding-left : 0px ;
  42. padding-right : 0px ;
  43. padding-top : 0px;
  44. padding-bottom : 0px;
  45. }
  46. .sheettext
  47. {
  48. font-family: verdana, Arial ;
  49. font-size: 12px;
  50. text-align: justify ;
  51. color: #000000;
  52. font-weight: 100 ;
  53. background-color : #aeaefc ;
  54. text-decoration: none ;
  55. }
  57. .sheettitle
  58. {
  59. font-family : verdana, Arial ;
  60. font-size : 20px;
  61. font-weight: bold ;
  62. text-align: center ;
  63. text-decoration: none ;
  64. background-color : #aeaefc ;
  65. margin-left: 0px ;
  66. margin-right: 0px ;
  67. margin-top: 10px;
  68. margin-bottom: 10px;
  69. }
  71. .sheetsubtitle
  72. {
  73. font-family : verdana, Arial ;
  74. text-align: left ;
  75. font-size: 14px ;
  76. font-weight: bold ;
  77. text-decoration: underline ;
  78. background-color : #aeaefc ;
  79. margin-left: 0px ;
  80. margin-right: 0px ;
  81. margin-top: 10px;
  82. margin-bottom: 10px;
  83. }
  84. .sheetcontainer
  85. {
  86. font-family : verdana, Arial ;
  87. width : 100% ;
  88. background-color : #aeaefc ;
  89. filter: alpha(Opacity=30);
  90. }

Reply

Marsh Posté le 23-08-2003 à 13:34:35    

:bounce:

Reply

Marsh Posté le 23-08-2003 à 14:18:44    

Tiens, ça chie sous IE, mais ça marche sous mozilla... doit y avoir une faute de frappe quelque part...


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 23-08-2003 à 14:21:05    

Déjà :
  p
  {
     font-size: 12px ;
     margin-top: 0px;
     margin-left: 0px;
     margin-bottom: 0px;
     margin-right: 0px;
       text-align: justify ;  
       font-decoration: none ;
  }
 
C'est text-decoration, et pas font, mais ça change rien...


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 23-08-2003 à 14:21:05   

Reply

Marsh Posté le 23-08-2003 à 14:24:41    

déjà :
 

Code :
  1. p
  2.   {
  3.      font-size: 12px ;
  4.      margin-top: 0px;
  5.      margin-left: 0px;
  6.      margin-bottom: 0px;
  7.      margin-right: 0px;
  8.      text-align: justify ; 
  9.      text-decoration: none ;
  10.   }


 
mais ca ne vient pas de la
 
 
edit : grillaid  :D  3nimutes en plus  :o


Message édité par simogeo le 23-08-2003 à 14:25:30

---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 23-08-2003 à 14:28:45    

Sous mozilla, ça marche nickel ! la span n'est pas soulignée... JE cherche encore...


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 23-08-2003 à 14:29:21    

Le Castor a écrit :

Sous mozilla, ça marche nickel ! la span n'est pas soulignée... JE cherche encore...


firebird c'est souligné  [:spamafote]


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 23-08-2003 à 14:50:49    

Bon, bah on va dire que IE n'aime pas qu'on change la propriété text-decoration à l'intérieur d'une div....


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 23-08-2003 à 15:13:06    

Merci pour ces aides.
Bon je vais corriger le petit probleme et je vais voir ce soir.
Quand meme bizard que ça passe sous certaines versions de Mozilla et pas sous IE :/

Reply

Marsh Posté le 23-08-2003 à 15:24:42    

très bizarre [:adsl1978]


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 24-08-2003 à 12:30:27    

Un petit up desespéré  :bounce: (toujours pas trouvé)

Reply

Marsh Posté le 24-08-2003 à 12:32:01    

samuelp a écrit :




 
[:hello_cass]


---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 24-08-2003 à 12:39:53    

moi je dis, fait plutot un truc comme ça :
 

Code :
  1. <div id="container">
  2.    <div id="menuBackground">
  3.    </div>
  4.    <div id="pagecontainer">
  5.     <div class='sheetcontainer'>
  6.      <div class='sheettitle'>Welcome to CRM software :
  7.       <div class='sheetsubtitle'>
  8.         <span class="underlined">Introduction</span>
  9.         <p>
  10.           <span class="sheettext">This is currently a development software so you can't use it properly. Please wait for the first Alpha version that will be released any times soon</span> 
  11.         </p>
  12.       </div><!-- End of sheetsubtitle div -->
  13.      </div><!-- End of sheettitle div -->
  14.     </div><!-- End of sheetcontainer div -->
  15.    </div><!-- End div pagecontainer -->
  16.   </div> <!-- End div Container -->


 
<span class="underlined">Introduction</span>
 
comme ça, t'as juste "Introduction" qu'est souligné


Message édité par Le Castor le 24-08-2003 à 12:40:44

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 24-08-2003 à 13:03:55    

     <div class='sheettitle'>Welcome to CRM software :
        <div class='sheetsubtitle'>
          <span class="underlined">Introduction</span>
   
[:fear]
 
 
moi j'aurais mis :
 
      <h1>Welcome to CRM software :</h1>
      <h2>Introduction</h2>
 
- bcp plus léger
- valide au niveau de la sémantique/logique (pcq utiliser des div pour des titres... :heink:


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 24-08-2003 à 13:07:30    

antp a écrit :

     <div class='sheettitle'>Welcome to CRM software :
        <div class='sheetsubtitle'>
          <span class="underlined">Introduction</span>
   
[:fear]
 
 
moi j'aurais mis :
 
      <h1>Welcome to CRM software :</h1>
      <h2>Introduction</h2>
 
- bcp plus léger
- valide au niveau de la sémantique/logique (pcq utiliser des div pour des titres... :heink:


 
J'ai failli le mettre celui-là ! En fait ch'avais pas s'il avait une structure titre/sous-titre/etc..., alors j'ai fait du "générique"


Message édité par Le Castor le 24-08-2003 à 13:08:15

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 24-08-2003 à 13:08:04    

antp a écrit :

     <div class='sheettitle'>Welcome to CRM software :
        <div class='sheetsubtitle'>
          <span class="underlined">Introduction</span>
   
[:fear]
 
 
moi j'aurais mis :
 
      <h1>Welcome to CRM software :</h1>
      <h2>Introduction</h2>
 
- bcp plus léger
- valide au niveau de la sémantique/logique (pcq utiliser des div pour des titres... :heink:


Ben c'est pour uniformiser un peu la feuille. En utilisant QUE du CSS et QUE du Div, j'ecarte les critques de ceux qui peuvent me dire : "ouah regardes l'autre il fait du HTML 4.01" :heink:

Reply

Marsh Posté le 24-08-2003 à 13:08:47    

Reply

Marsh Posté le 24-08-2003 à 13:09:11    

samuelp a écrit :


Ben c'est pour uniformiser un peu la feuille. En utilisant QUE du CSS et QUE du Div, j'ecarte les critques de ceux qui peuvent me dire : "ouah regardes l'autre il fait du HTML 4.01" :heink:


 
ben une bonne structure h1/h2/etc..., montre que t'as tenté de structurer ta page en une certaine logique, typique de l'xhtml


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 24-08-2003 à 13:12:44    

samuelp a écrit :

En utilisant QUE du CSS et QUE du Div, j'ecarte les critques de ceux qui peuvent me dire : "ouah regardes l'autre il fait du HTML 4.01" :heink:


 
je vois pas le rapport... tu montres juste que t'as pas compris tout l'intérêt du HTML strict / XHTML :D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 24-08-2003 à 13:12:53    

Le Castor a écrit :


 
ben une bonne structure h1/h2/etc..., montre que t'as tenté de structurer ta page en une certaine logique, typique de l'xhtml


Bon ok je vais faire ça. J'imagine que je suis obligé de redefinir les attributs des tags h1, h2... dans mes feuilles de style, non ?
 
CF : Euh, j'arrive plus a acceder a TYP, normal  ?

Reply

Marsh Posté le 24-08-2003 à 13:22:56    

Excusez moi mon ignorance mais :
<p></p> formate le texte en tant que paragraphe non ?
cad, a chaque ouverture/fermeture de p on passe à la ligne c'est ça ?
 
<span> c'est bien pour eviter de faire des blocs (div) et donc de ne pas passer forcement à la ligne, en gros c'est ça ?

Reply

Marsh Posté le 24-08-2003 à 15:21:27    

samuelp a écrit :

J'imagine que je suis obligé de redefinir les attributs des tags h1, h2... dans mes feuilles de style, non ?


 
bah oui, mais ça fait pas plus de boulot que de créer des classes "titre" "soustitre" etc.


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 24-08-2003 à 15:33:56    

antp a écrit :


 
bah oui, mais ça fait pas plus de boulot que de créer des classes "titre" "soustitre" etc.


De toute façon c'est fait. Merci pour la supposition
 
Maintenant j'essaie de creer des formulaires en me passant des <table> habituels (tout en div)
 
Ce sera moins beau mais le HTML sera plus clair.
 
Sinon, est ce que l'emploi de <FIELDSET> (au lieu d'un div approprié) c'est crade ou ça passe encore ?

Reply

Marsh Posté le 24-08-2003 à 15:35:07    

heu si c'est pour présenter ton formulaire dans un tableau, il n'y a pas de raison de ne pas employer <table> ...


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 24-08-2003 à 15:40:36    

antp a écrit :

heu si c'est pour présenter ton formulaire dans un tableau, il n'y a pas de raison de ne pas employer <table> ...


Le probleme du table c'est que, une fois la structure etablie, on ne peut plus tellement jouer sur les propriétés pour pouvoir, par exemple, afficher les champs et label sur la meme ligne, ou en colonne.
 
Mais bon, j'essaye, si j'arrive pas, je fais marche arriere

Reply

Marsh Posté le 24-08-2003 à 15:41:07    

HotShot a écrit :

<fieldset><label><input> tout ça c'est bon... et y a moyen de faire aussi bien (voire mieux) qu'un tableau :D


 
Pour le Fieldset c'est ce que je faisais.
Merci quand meme

Reply

Marsh Posté le 24-08-2003 à 16:40:32    

C'est moi ou c'est vachement plus simple de gerer en div/span + CSS que de gerer des table ?

Reply

Marsh Posté le 24-08-2003 à 16:44:05    

bah les div c'est souvent plus simple une fois qu'on sait comment ça marche (faut absolument que je modifie mon site), mais il faut pas tomber dans l'excès en mettant des div pour des trucs qui doivent aller dans des h1, p, etc.


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 24-08-2003 à 16:51:10    

J'ai quand meme un probleme :/
 
Voici le HTML généré :

Code :
  1. div id="pagecontainer">
  2.  <h1>Please complete the user value</h1>
  3. <form action="" method="POST" name="Please complete the user value">
  5.   <fieldset  style="">
  6.   <legend class="formsubtitle">User specification</legend>
  7.   <div class=" formcontainer">
  8.    <div class="formlinecontainer">
  9.     <span class="formelement">
  10.     <span class="necessary">Gender</span>
  11. <select name="titreid">
  12. <option value="1">M</option>
  14. <option value="2">Mlle</option>
  15. <option value="3">Mme</option>
  16. <option value="4">Dr</option>
  17. <option value="5">Mgr</option>
  18. </select>
  19.     </span>
  20.    </div><!-- end div formlinecontainer -->
  21.    <div class="formlinecontainer">
  22.     <span class="formelement">
  24.     <span class="necessary">Surname</span>
  25. <input  type="TEXT" value="" name="name" style="width:160px"></input>
  26.     </span>
  27.    </div><!-- end div formlinecontainer -->
  28.    <div class="formlinecontainer">
  29.     <span class="formelement">
  30.     <span class="formtext">First Name</span>
  31. <input type="TEXT" value="" name="firstname" style="width:160px"></input>
  32.     </span>
  34.    </div><!-- end div formlinecontainer -->
  35.    <div class="formlinecontainer">
  36.     <span class="formelement">
  37.     <span class="necessary">Function</span>
  38. <select MULTIPLE name="functionid[]" style="width:160px">
  39. <option value="-1">SYSFONCTION</option>
  40. <option value="1">ADMINISTRATEUR</option>
  41. </select>
  42.     </span>
  44.     <span class="formelement">
  45.     <span class="necessary"></span>
  46. <input  type="BUTTON" value="Create" name="functionadd" onclick="window.open('functionadd.php','this','width=640,height=480,scrollbars=yes');"></input>
  47.     </span>
  48.    </div><!-- end div formlinecontainer -->
  49.    <div class="formlinecontainer">
  50.     <span class="formelement">
  51.     <span class="formtext">Email</span>
  52. <input type="TEXT" value="" name="email" style="width:160px"></input>
  54.     </span>
  55.    </div><!-- end div formlinecontainer -->
  56.    <div class="formlinecontainer">
  57.     <span class="formelement">
  58. Available modules<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[]'])">
  59. <option value="1">Administration</option>
  60. </select>
  61.     </span>
  62.     <span class="formelement">
  64.     <span class="necessary">Autorized Modules</span>
  65. <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[]'])">
  66. </select>
  67.     </span>
  68.    </div><!-- end div formlinecontainer -->
  69.   </div><!-- End formcontainer div -->
  70.   </fieldset>
  71.   <fieldset  style="">
  72.   <legend class="formsubtitle">Autentification specification</legend>
  74.   <div class=" formcontainer">
  75.    <div class="formlinecontainer">
  76.     <span class="formelement">
  77.     <span class="necessary">Login</span>
  78. <input  type="TEXT" value="" name="login"></input>
  79.     </span>
  80.    </div><!-- end div formlinecontainer -->
  81.    <div class="formlinecontainer">
  82.     <span class="formelement">
  84.     <span class="necessary">Password</span>
  85. <input  type="PASSWORD" value="" name="password"></input>
  86.     </span>
  87.    </div><!-- end div formlinecontainer -->
  88.    <div class="formlinecontainer">
  89.     <span class="formelement">
  90.     <span class="necessary">Re-enter the password</span>
  91. <input  type="PASSWORD" value="" name="passwordretry"></input>
  92.     </span>
  94.    </div><!-- end div formlinecontainer -->
  95.   </div><!-- End formcontainer div -->
  96.   </fieldset>
  97.   <fieldset  style="">
  98.   <legend class="formsubtitle">Optionals specification</legend>
  99.   <div class=" formcontainer">
  100.   </div><!-- End formcontainer div -->
  101.   </fieldset>
  103.   <fieldset  style="">
  104.   <legend class="formsubtitle">Validate your user</legend>
  105.   <div class=" formcontainer">
  106.    <div class="formlinecontainer">
  107.     <span class="formelement">
  108.     <span class="formtext"></span>
  109. <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>
  110.     </span>
  111.     <span class="formelement">
  113.     <span class="formtext"></span>
  114. <input type="RESET" value="Reset"></input>
  115.     </span>
  116.    </div><!-- end div formlinecontainer -->
  117.   </div><!-- End formcontainer div -->
  118.   </fieldset>
  119. </form>
  120. </div><!-- End div pagecontainer -->


 
Et le CSS :

Code :
  1. #container
  2. {
  3. background  : url(test.png) no-repeat top right  ;
  4. padding-left : 0px ;
  5. padding-right : 0px ;
  6. padding-top : 0px;
  7. padding-bottom : 0px;
  8. }
  10. .formlinecontainer
  11. {
  12. font-family : verdana, Arial ;
  13. width : 100% ;
  14. background-color : #aeaefc ;
  15. filter: alpha(Opacity=30);
  16. }
  17. .formheadelement
  18. {
  19. font-family : verdana, Arial ;
  20. width : 100% ;
  21. background-color : #aeaefc ;
  22. font-weight: bold ;
  23. }
  24. .formelement
  25. {
  26. font-family : verdana, Arial ;
  27. width : 500px;
  28. margin-left: auto ;
  29. margin-right: auto ;
  30. background-color : #aeaefc ;
  31. }
  32. .necessary
  33. {
  34. font-family : verdana, Arial;
  35. font-weight: normal ;
  36. color : #FF0000 ;
  37. vertical-align: middle ;
  38. background-color : #b6b6c6 ;
  39. }
  41. .missnecessary
  42. {
  43. font-family : verdana, Arial;
  44. font-weight: bold ;
  45. color : #FFFF00 ;
  46. vertical-align: middle ;
  47. background-color : #b6b6c6 ;
  48. }
  49. h1
  50. {
  51. font-family : verdana, Arial ;
  52. font-size : 20px;
  53. font-weight: bold ;
  54. text-align: center ;
  55. text-decoration: none ;
  56. background-color : #aeaefc ;
  57. margin-left: 0px ;
  58. margin-right: 0px ;
  59. margin-top: 10px;
  60. margin-bottom: 10px;
  62. }
  64. h2
  65. {
  66. font-family : verdana, Arial ;
  67. text-align: left ;
  68. font-size: 14px ;
  69. font-weight: bold ;
  70. text-decoration: underline ;
  71. background-color : #aeaefc ;
  72. margin-left: 0px ;
  73. margin-right: 0px ;
  74. margin-top: 10px;
  75. margin-bottom: 10px;
  77. }


 
 
Le probleme c'est que j'arrive pas du tout a faire quelque chose de bien construit, cas aligner les cases avec les span.
 
Meme en voulant center le span (margin-lft: auto; margin-right: auto;)
ça marche po.
 
Qu'est ce qui peut clocher ?

Reply

Marsh Posté le 24-08-2003 à 17:04:36    

HotShot a écrit :

:fou: lis la Faq vindiou  


Pardon ? Le truc sur les CSS ?

Reply

Marsh Posté le 24-08-2003 à 19:14:38    

On ne peut pas center un span.
 
Un span est un élément de type inline, la div de type block. Un block est dimensionnable et positionnable. Un inline, non. L'inline est, comme son nom l'indique, un truc "en ligne", donc qui va avec le texte par exemple. Un block est un espèce de container, qui va contiendre d'autres trucs...


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 24-08-2003 à 20:22:23    

Le Castor a écrit :

On ne peut pas center un span.
 
Un span est un élément de type inline, la div de type block. Un block est dimensionnable et positionnable. Un inline, non. L'inline est, comme son nom l'indique, un truc "en ligne", donc qui va avec le texte par exemple. Un block est un espèce de container, qui va contiendre d'autres trucs...


Merci pour ces precisions.
Donc si je veux placer mes elements (labels, INPUT...) de maniere unifirme, je dois utiliser des Div c'est ça ?
Le probleme avec les div c'est que celui ci implique un retour a la ligne non ? CAD je ne pourrais pas mettre sur la meme ligne le Label et le champ correspondant, ce qui est plutot ennuyant non ?
 
N'y a t-il pas un moyen de proceder autrement ? Par exemple, dans un span, mettre des div, pour le dimmensionnement ?

Reply

Marsh Posté le 24-08-2003 à 20:32:03    

samuelp a écrit :


Merci pour ces precisions.
Donc si je veux placer mes elements (labels, INPUT...) de maniere unifirme, je dois utiliser des Div c'est ça ?
Le probleme avec les div c'est que celui ci implique un retour a la ligne non ? CAD je ne pourrais pas mettre sur la meme ligne le Label et le champ correspondant, ce qui est plutot ennuyant non ?
 
N'y a t-il pas un moyen de proceder autrement ? Par exemple, dans un span, mettre des div, pour le dimmensionnement ?


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


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 24-08-2003 à 20:53:40    

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

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed