CSS et simulation de tableau

CSS et simulation de tableau - HTML/CSS - Programmation

Marsh Posté le 06-06-2007 à 10:58:24    

Je sais je sais, sujet rabaché et tout et tout.
Mais j'ai quand même pas trouvé ce que je voulais.
Je deteste vraiment le css :D
On fait des trucs de fous en php et c'est sur du css qu'on bute ^^
 
alors :
voila ce que j'ai.
http://img519.imageshack.us/img519/4305/gnaxp9.jpg
 
Le truc que je veux :
Je veux que les span soient alignés, je veux garder le truc sur deux lignes  
la j'ai fait un border solid sur les span, donc chaque "case" est un span.

Reply

Marsh Posté le 06-06-2007 à 10:58:24   

Reply

Marsh Posté le 06-06-2007 à 11:05:58    

Au lieu de mettre des span à tout bout de champs. J'aurais mis une balise <p> pour chaque ligne.
 
Le reste, suffit de les mettre les uns à la suite des autres.


---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
Reply

Marsh Posté le 06-06-2007 à 11:07:03    

Dans ce genre de cas je fais un truc dans le genre, css:

Code :
  1. label {
  2.   float:left;
  3.   width: 200px;
  4. }
  5. div.inpContainer {
  6.   float: left;
  7.   width: 200px;
  8. }


html:

Code :
  1. <label for="select1">Texte1</label>
  2. <div class="inpContainer"><select name="select1" id="select1">...</select></div>
  3. ...

Reply

Marsh Posté le 06-06-2007 à 11:44:26    

Comment on fait pour faire passer a la ligne suivante une autre serie de formulaire?
Parce que la ca marche bien, mais ca s'affiche tout sur une ligne

Reply

Marsh Posté le 06-06-2007 à 11:50:11    

tu mets un "cleaner"( un element avec clear:both defini dans son style) à l'endroit ou tu veux...

Reply

Marsh Posté le 06-06-2007 à 11:51:00    

clear en gros ca fait quoi?
Ah ba voui, le css, voila quoi :D

Reply

Marsh Posté le 06-06-2007 à 12:01:08    

jfgi

Reply

Marsh Posté le 06-06-2007 à 12:02:03    

OUi oki merci ca fait bien.
Mais sous firefox :
http://img176.imageshack.us/img176/5958/gna2uu8.jpg

Reply

Marsh Posté le 06-06-2007 à 12:36:36    

Ben oui, c'est le prix à payer quand on veux remplacer les tableaux par ces css :D Franchement tous les trucs à basse de css qui utilise des floats et des largeurs fixes en pixels, c'est du bricolage. Ca finira toujours par merder en fonction de la résolution du display, de la taille des fontes...

Reply

Marsh Posté le 06-06-2007 à 12:41:47    

Et ma solution, elle est pas bonne?


---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
Reply

Marsh Posté le 06-06-2007 à 12:41:47   

Reply

Marsh Posté le 06-06-2007 à 12:56:13    

fais un tableau :o
ca sert à quoi de bricoler en CSS pour un truc méga simple en utilisant un tableau ?
 
Ah ouais merde, la sémantique, haaaan :o

Reply

Marsh Posté le 06-06-2007 à 13:01:17    

did-54 a écrit :

fais un tableau :o
ca sert à quoi de bricoler en CSS pour un truc méga simple en utilisant un tableau ?
 
Ah ouais merde, la sémantique, haaaan :o


 
 
+1  Les tableaux c'est pas fait pour les cochons.  J'arriverai jamais à comprendre pourquoi certains veulent à tout prix les remplacer par <div> plus bricolage à gogo !!
 

Reply

Marsh Posté le 06-06-2007 à 13:08:07    

bignose a écrit :

+1  Les tableaux c'est pas fait pour les cochons.  J'arriverai jamais à comprendre pourquoi certains veulent à tout prix les remplacer par <div> plus bricolage à gogo !!


-1
les tableaux sont faits pour des données tabulaires, pas pour de la mise en page :o


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 06-06-2007 à 13:12:19    

dartyduck a écrit :

-1
les tableaux sont faits pour des données tabulaires, pas pour de la mise en page :o


et alors ?

Reply

Marsh Posté le 06-06-2007 à 13:16:05    

dartyduck a écrit :

-1
les tableaux sont faits pour des données tabulaires, pas pour de la mise en page :o


 
Couillonade.
 
Les tableaux sont des outils comme les autres qui servent à ce qu'on veut,  y compris à une mise en page.
 
Perdre son temps à simuler des tableaux avec des <div> plus bricolage sous prétexte qu'ils ne seraient destinés qu'à des données tabulaires est une aberration !!  Faut vraiment ne rien avoir d'autre à faire.

Reply

Marsh Posté le 06-06-2007 à 13:35:40    

bignose a écrit :

Couillonade.
 
Les tableaux sont des outils comme les autres qui servent à ce qu'on veut,  y compris à une mise en page.
 
Perdre son temps à simuler des tableaux avec des <div> plus bricolage sous prétexte qu'ils ne seraient destinés qu'à des données tabulaires est une aberration !!  Faut vraiment ne rien avoir d'autre à faire.


 
En même temps là t'as un outils tout fait en CSS, c'est les labels...
 
Donc faut arrêter de dire n'importe quoi et se renseigner de temps en temps [:prodigy]


---------------
Twitter
Reply

Marsh Posté le 06-06-2007 à 13:52:03    

bignose a écrit :

J'arriverai jamais à comprendre pourquoi certains veulent à tout prix les remplacer par <div> plus bricolage à gogo !!


 
Il est évident que certains cherchent trop à supprimer ce qu'il ne faut pas. Maintenant dans son cas, là mise en page en deux ligne n'est adaptée qu'a une résolution minimum spécifique.  
 
Grâce aux CSS et aux floats, en redimensionnant la fenêtre (si design fluide), les champs iront l'un en-dessous de l'autre de manière naturelle. Avec un tableau, on se tapera une barre horizontale à la con. De plus, on ne peut pas trop parler de données tabulaires ici. On n'a pas une structure de tableau. On a à chaque fois un label, un champ, un label, un champ. Un tableau serait plus valide avec deux colonne, la première pour les labels, la seconde pour les champs. Suffit de donner une taille fixe aux labels et aux input, et ça roule.

Reply

Marsh Posté le 06-06-2007 à 14:33:49    

J'ai pas precisé dsl, ca a lancé une mini polémique :D
En gros la je me fais chier sur un truc simplet, mais derrière, j'ai un script de formulaire de 500 lignes, et qui ne s'affichent pas en meme temps les uns par rapport aux autres, ya enormément de js derrière.
 
En gros je ne peux pas me permettre d'utiliser des tableaux dans ce cas la, ya des innerHTML qui se vident, etc.
 
Donc c'est pour ca que je demandais comment on pouvait faire avec des balises a peu près "neutres".
 
Mais je vous rassure, j'ai d'abord essayé de faire avec des tableaux :D
 
Donc pour firefox, encore une histoire de margin ou de padding?

Reply

Marsh Posté le 06-06-2007 à 14:34:56    

Nan, t'as mis 200px pour le label, et 200px pour le conteneur... Le conteneur doit évidemment être plus grand. Ou mettre le label à 100px

Reply

Marsh Posté le 06-06-2007 à 14:59:34    

bignose a écrit :

Couillonade.
 
Les tableaux sont des outils comme les autres qui servent à ce qu'on veut,  y compris à une mise en page.
 
Perdre son temps à simuler des tableaux avec des <div> plus bricolage sous prétexte qu'ils ne seraient destinés qu'à des données tabulaires est une aberration !!  Faut vraiment ne rien avoir d'autre à faire.


Ok, on va refaire l'histoire du net pour ceux qui dormaient pendant le cours.
 
Il était une fois l'internet, et dans l'internet vivait la mise en page, tout était alors linéaire et tous les habitant de l'internet étaient heureux. Seulement la mise en page se trouvait bien seule quand il fallait suivre la création graphique sous forme de colonnes. Jusqu'a ce que les webmasters décident de détourner l'utilisation du tableau, le tableau était un super ami pour la mise en page, il suffisait de mettre la navigation à gauche et le contenu a droite, c'était top moumoutte [:bien]
 
Sauf que dans la vraie vie réelle un tableau doit être utilisé pour des données tabulaires et pour rien d'autre.
 
La structure minimale -logique- d'un tableau c'est :
 

Code :
  1. <table>
  2.    <thead>
  3.         <tr>
  4.             <th>Nom</th><th>Prenom</th>    
  5.         </tr>
  6.     </thead>
  7.     <tbody>
  8.         <tr>
  9.             <td>Value</td><td>Value</td>
  10.         </tr>
  11.     </tbody>
  12. </table>


Donc une descriptif de colonne et sa valeur.
Hors la majorité du temps tu te retrouves avec un tableau avec une cellule (oh yeah).
 
Croire que la mise en page se fait avec "<div>" c'est juste de l'ignorance, en gros quand tu sais pas coder, oui tu essayes de "simuler des tableaux avec des <div> "
 
A coté de ça, pour un formulaire je fais :
 

Code :
  1. <p>
  2.     <label for="nom">Nom</label>
  3.     <input type="text" name="nom" id="nom" value="value" />
  4. </p>


 
et  
 

Code :
  1. label {
  2.     float:left;
  3.     width:100px
  4. }


 
Ah tiens, j'ai pas utiliser de "div" et pourtant mon formulaire ne dépasse pas d'un poil de cul  [:pingouino] Peut être que j'aurais du utiliser un tableau et ainsi oublier (ou ne pas avoir connaissance) de la balise label, qui est genre une des balises les plus importante dans un formulaire.
 
@matafan : T'as vraiment l'air de savoir de quoi tu parles.


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 06-06-2007 à 15:07:46    

AlphaZone a écrit :

Au lieu de mettre des span à tout bout de champs. J'aurais mis une balise <p> pour chaque ligne.
 
Le reste, suffit de les mettre les uns à la suite des autres.


J'avais proposé les <p></p> mais tout le monde s'en branle :D


---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
Reply

Marsh Posté le 06-06-2007 à 15:12:52    

http://img529.imageshack.us/img529/6613/gna3xa6.jpg
 
Pourquoi les selects de ma première ligne sont un poil plus courts que ceux de la deuxiemme?
 
Ya rien dans la source a cet emplacement, c'est le css je pense.
J'ai pas fait la version avec le border solid, mais on voit bien que le div du container depasse un petit peut a chaque fois du select, et pourtant ya un méchant text-align:right qui traine.
 
le destination commence bien au meme endroit que le trier par, c'est après que ca couille.

Message cité 1 fois
Message édité par Decapfour le 06-06-2007 à 15:15:00
Reply

Marsh Posté le 06-06-2007 à 15:20:58    

decapfour > Pour ta derniére question : regarde ce que t'as comme valeurs dans tes listes déroulantes. T'as surement un navigateur qui par défaut prend la taille de la valeur la plus longue (en nombre de pixel)

Reply

Marsh Posté le 06-06-2007 à 15:32:04    

Ca marche niquel merci :)

Reply

Marsh Posté le 06-06-2007 à 15:56:07    

T'as utilisé quoi finalement? C'est bien joli de dire que ca fonctionne mais si tu poste pas la solution, y'auras encore quelqu'un pour poser la même question.


---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
Reply

Marsh Posté le 06-06-2007 à 16:09:33    

Désolé :/

Code :
  1. <label for=maxi>Maxi :</label>
  2. <div class=container>
  3.       <select id="maxi">
  4.        <option></option>
  5.        <option>1000</option>
  6.        <option>1500</option>
  7.        <option>2000</option>
  8.       </select>
  9. </div>


Code :
  1. label {
  2. float:left;
  3. width: 75px;
  4. text-align:right;
  5. }
  6. select{
  7. width:100px;
  8. }
  9. div.container{
  10. float:left;
  11. width: 125px;
  12. text-align:left;
  13. }
  14. .cleaner{
  15. clear:both;
  16. }


 
J'ai pas testé le <p>, mais dans l'absolu ca reviens au même.

Reply

Marsh Posté le 06-06-2007 à 16:15:23    

On met des quotes autour des values :fou:


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 07-06-2007 à 12:51:13    

Decapfour a écrit :

http://img529.imageshack.us/img529/6613/gna3xa6.jpg
 
Pourquoi les selects de ma première ligne sont un poil plus courts que ceux de la deuxiemme?


la taille des selects s'adaptent en fonction des options


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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