help! j'essaie de ne plus utiliser les tableaux et....

help! j'essaie de ne plus utiliser les tableaux et.... - HTML/CSS - Programmation

Marsh Posté le 11-03-2005 à 16:42:35    

Voyez comme je fais des efforts pour utiliser des CSS et des tags LI etc... pour ma mise en page au lieu de faire à la façon papa avec des tableaux et des <center> etc...
Sauf que je me prends la tête et que je n'ai pas vraiment le temps pour...
Donc si qqun peut m'aider, merci!
Voici le html :

Code :
  1. <ul id="ensemble">
  2. <li class="ligne">
  3.     <span class="libelle">Nom (obligatoire) :</span>
  4.     <input type="text" name="nom" id="nom" />
  5. </li>
  6. <li class="ligne">
  7.     <span class="libelle">Prénom (obligatoire) :</span>
  8.     <input type="text" name="prenom" id="prenom" />
  9. </li>
  10. <li class="ligne">
  11.     <span class="libelle">Adresse mail (obligatoire) :</span>
  12.     <input type="text" name="email" id="email" />
  13. </li>
  14. <li class="ligne">
  15.     <span class="libelle">Adresse postale - rue :</span>
  16.     <input type="text" name="rue" id="rue" />
  17. </li>
  18. <li class="ligne">
  19.     <span class="libelle">Adresse postale - ville :</span>
  20.     <input type="text" name="ville" id="ville" />
  21. </li>
  22. <li class="ligne">
  23.     <span class="libelle">Adresse postale - code postal :</span>
  24.     <input type="text" name="codePostal" id="codePostal" />
  25. </li>
  26. <li class="ligne">
  27.     <span class="libelle">Adresse postale - pays :</span>
  28.     <input type="text" name="pays" id="pays" />
  29. </li>
  30. <li class="ligne">
  31.     <span class="libelle">Téléphone fixe (obligatoire) :</span>
  32.     <input type="text" name="telephone" id="telephone" />
  33. </li>
  34. <li class="ligne">
  35.     <span class="libelle">Téléphone mobile :<span>
  36.     <input type="text" name="mobile" id="mobile" />
  37. </li>
  38. <li class="ligne">
  39.     <span class="libelle">Fax :</span>
  40.     <input type="text" name="fax" id="fax" />
  41. </li>
  42. <li class="ligne">
  43.     <span class="libelle">Recevoir une documentation sur l'offre :</span>
  44.     <input type="checkbox" name="doc" id="doc" value="oui" />
  45. </li>
  46. </ul>


 
voici le CSS :

Code :
  1. #ensemble
  2. {
  3.   text-align:center;
  4. }
  5. li.ligne
  6. {
  7.   list-style:square;
  8.   margin:3px 0px;
  9.   text-align:left;
  10. }
  11. .libelle
  12. {
  13.   margin:0px 2px;
  14.   width:200px;
  15.   display:inline;
  16. }


 
et le résultat est :
qu'il ne me centre pas le UL comme je le souhaiterais, que les span class=libelle ne font pas 200px de large => du coup rien n'est aligné.
 
j'ai essayé aussi pour le ul le coup du  
width:600px;
height:600px;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-300px;
 
pour que ce soit centré nickel quelque soit la taille de la fenêtre, mais peau de zob ça ne fonctionne pas!
 
alors help svp vous qui pronez cette méthode uptodate nickel géniale mais qui en attendant m'a fait perdre 2h!! sans donner le #@#@ de résultat que j'aurais obtenu en 2 minutes avec un tableau!

Reply

Marsh Posté le 11-03-2005 à 16:42:35   

Reply

Marsh Posté le 11-03-2005 à 16:46:41    

1) On n'utilise pas de <span> pour faire des libellés de champs, mais <label>, qu'on associe à un input :

<label for="pouet">Pouet :</label><input type="text" name="prout" id="pouet" />


2) Tes libellés sont dans un span, qui est une balise de type inline, donc la propriété width ne fonctionne pas. Utilise les label, que tu mettera en display: block, et joue avec des float pour les aligner.
3) Pourquoi t'as mis un class="ligne" à tout tes li :??: Tu peux raccourcir avec :

#ensemble li


4) Bref, revois les base du CSS et de l'HTML :D

Reply

Marsh Posté le 11-03-2005 à 17:02:14    

un conseil, ne fais jamais prof ou autre....
tu vois pour le 4) , je n'ai pas le temps... tu sais contraintes, etc...
enfin bref, ce genre de réflexion m'énerve un peu surtout quand ce n'est franchement pas le moment.
bon si je mets block pour le label et que je fous un float right pour mon input, ils sont bien sur la même ligne mais du coup mon input se retrouve complètement à droite de la page...
bon je sens que je vais me faire un tableau....

Reply

Marsh Posté le 11-03-2005 à 17:08:42    

LeMicky a écrit :

un conseil, ne fais jamais prof ou autre....
tu vois pour le 4) , je n'ai pas le temps... tu sais contraintes, etc...
enfin bref, ce genre de réflexion m'énerve un peu surtout quand ce n'est franchement pas le moment.
bon si je mets block pour le label et que je fous un float right pour mon input, ils sont bien sur la même ligne mais du coup mon input se retrouve complètement à droite de la page...
bon je sens que je vais me faire un tableau....


 [:itm]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 11-03-2005 à 17:15:35    

bon...
j'ai ceci :

Code :
  1. li.ligne
  2. {
  3.   list-style:square;
  4.   margin:3px 0px;
  5.   text-align:left;
  6. }
  7. label
  8. {
  9.   margin:0px 2px;
  10.   width:200px;
  11.   display:block;
  12.   float:left;
  13. }


 
et ça :

Code :
  1. <ul>
  2. <li class="ligne">
  3.     <label for="nom" class="libelle">Nom (obligatoire) :</label>
  4.     <input type="text" name="nom" id="nom" />
  5. </li>
  6. <li class="ligne">
  7.     <label for="prenom" class="libelle">Prénom (obligatoire) :</label>
  8.     <input type="text" name="prenom" id="prenom" />
  9. </li>
  10. <li class="ligne">
  11.     <label for="email" class="libelle">Adresse mail (obligatoire) :</label>
  12.     <input type="text" name="email" id="email" />
  13. </li>
  14. ...


 
donc, là, ça va, sauf! que le square (le carré), il est du coup entre le libelle et le input! (en gros il est devant le input) et plus devant le libellé.
 
==>> une solution? (plus constructive que style, retourne à l'école)
 

Reply

Marsh Posté le 11-03-2005 à 17:44:42    

ben alors?

Reply

Marsh Posté le 11-03-2005 à 18:00:25    

Zorro est arrivé


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 11-03-2005 à 18:44:46    

bon j'ai trouvé, et rien à voir avec ce que disait FlorentG méprisant qui lorsqu'il s'adresse à quelqu'un devrait réfléchir à qui cela pourrait être (nous ne sommes pas forcément tous de jeunes diplômés ayant appris les derniers standards et dont la préoccupation première est de suivre au mieux les manières les plus récentes de développer les pages web, si tu veux de plus amples explications, n'hésite pas à me contacter en privé, je prendrai le temps de t'expliquer certaines choses de la vie comme tu as pris le temps de "m'inviter" à revoir les "bases" de CSS et HTML)
donc un peu moins de "je te prends de haut" serait le bienvenue.
 
bon la solution, c'est plutôt d'avoir un div qui est en relative et qui englobe tout (bon peut-être qu'il est inutil et qu'il suffrait de metttre le ul en relative, je testerai, et ensuite des li et des labels tout ce qu'il y a de plus standard (oubliez les floats, block etc...), et ensuite, les input par contre en absolute avec un left de xxx px => en gros faut réfléchir à l'envers (dans le sens où il ne faut pas essayer de donner une largeur fixe aux labels mais plutôt faire partir les input à partir d'un certain point=> même résultat mais approche différente)

Reply

Marsh Posté le 17-03-2005 à 11:10:31    

Olala, on se calme, hein :o
 
Tu fonces droit dans le mur en klaxonnant, j'essaye de t'aider, et voilà le résultat.
 
Donc, optimisation qui me semble évidente : pas de class="ligne" à chaque li. Fait comme ça :

Code :
  1. <ul class="ligne">
  2.   <li>...</li>
  3.   <li>...</li>
  4.   <li>...</li>
  5. </ul>


Puis :

Code :
  1. .ligne li {
  2.   ...
  3. }


 
Ca montre justement que tu ne t'es pas assez penché sur les CSS et leurs possibilités. Quand je dis revois les bases du CSS, c'est qu'il faut que t'aille les revoirs, parce qu'il me semble qu'il te manque pas mal de choses ;)
 
Ici, ce n'est pas un forum où on balance la solution comme ça. Parce que sinon, 10 balles que tu va revenir tous les 2 jours pour une question bête. On s'efforce plutôt de faire travailler les gens, à les ammener à trouver eux-mêmes, afin qu'ils acquérissent certains mécanismes de base du programmeur, à savoir : d'abord on cherche par soi-même dans la doc, et après si on est vraiment perdu, alors on peut venir et poser la question :)
 
Et je t'ai pas pris de haut, je le re-précise ;)


Message édité par FlorentG le 17-03-2005 à 11:11:09
Reply

Marsh Posté le 17-03-2005 à 20:53:29    

Ok, ok, mais je crois que tu n'as pas bien vu le caractère urgent de la chose et le caractère : ce n'est pas ou plus mon métier de suivre les dernières nouveautés du CSS.
Et j'avais bien précisé que j'avais passé du temps dessus.
 
Enfin bref...
sinon, je n'acquérisse pas mais j'acquiers (et ils acquièrent) ;)
 
NB: ce n'est pas vraiment mon genre de venir poser des questionsà 2 balles tous les 5 minutes...
Ensuite, une question qui te paraît bête parce que tu baignes dans un sujet à longueur de temps ne l'est pas forcément pour un débutant (c'est à ce niveau que je dis plus d'indulgence et moins de prise de haut), car sur un autre sujet ou tu serais moins à l'aise une question qui te poserait problème depuis plusieurs heures pourrait très bien être d'une trivialité exaspérente pour quelqu'un d'autre. Tout ça pour dire qu'il faut faire attention aux mots employés (genre bête... dit plutôt une question de débutant, ce sera plus exact déjà car le manque de connaissance n'est pas forcément lié au manque d'intelligence).
 
sinon merci pour le .ligne LI (que j'ai découvert en lisant des articles, au contraire de ce que tu peux croire ;) )
 
Allez sans rancune mais soit un peu plus indulgent avec ceux qui postent, prends en compte tous les paramètres (caractère d'urgence notamment, sinon oui j'aurais regardé plein de docs ... c'est d'ailleurs ce que j'ai fini par faire vu que ta solution ne fonctionnait pas ou était si mal présentait que...) et sache qu'un jour tu pourrais très bien te retrouver à leur place sur un sujet que tu ne maîtrises pas.

Reply

Marsh Posté le 17-03-2005 à 20:53:29   

Reply

Marsh Posté le 17-03-2005 à 22:02:21    

Erreur, car je maîtrise tout :) Je suis l'alpha et l'oméga :)
 
Bon, blague à part, c'est beau tout cette diplomatie, c'est rare :D

Reply

Sujets relatifs:

Leave a Replay

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