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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS et simulation de tableau

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

CSS et simulation de tableau

n°1570757
Decapfour
Posté le 06-06-2007 à 10:58:24  profilanswer
 

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.

mood
Publicité
Posté le 06-06-2007 à 10:58:24  profilanswer
 

n°1570770
AlphaZone
Posté le 06-06-2007 à 11:05:58  profilanswer
 

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."
n°1570773
anapajari
s/travail/glanding on hfr/gs;
Posté le 06-06-2007 à 11:07:03  profilanswer
 

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

n°1570803
Decapfour
Posté le 06-06-2007 à 11:44:26  profilanswer
 

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

n°1570818
anapajari
s/travail/glanding on hfr/gs;
Posté le 06-06-2007 à 11:50:11  profilanswer
 

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

n°1570819
Decapfour
Posté le 06-06-2007 à 11:51:00  profilanswer
 

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

n°1570832
anapajari
s/travail/glanding on hfr/gs;
Posté le 06-06-2007 à 12:01:08  profilanswer
 

jfgi

n°1570833
Decapfour
Posté le 06-06-2007 à 12:02:03  profilanswer
 

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

n°1570856
matafan
Posté le 06-06-2007 à 12:36:36  profilanswer
 

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

n°1570862
AlphaZone
Posté le 06-06-2007 à 12:41:47  profilanswer
 

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."
mood
Publicité
Posté le 06-06-2007 à 12:41:47  profilanswer
 

n°1570872
did-54
Posté le 06-06-2007 à 12:56:13  profilanswer
 

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

n°1570873
bignose
Posté le 06-06-2007 à 13:01:17  profilanswer
 

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 !!
 

n°1570879
dartyduck
n00b AttitudE
Posté le 06-06-2007 à 13:08:07  profilanswer
 

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
n°1570887
did-54
Posté le 06-06-2007 à 13:12:19  profilanswer
 

dartyduck a écrit :

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


et alors ?

n°1570890
bignose
Posté le 06-06-2007 à 13:16:05  profilanswer
 

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.

n°1570912
koskoz
They see me trollin they hatin
Posté le 06-06-2007 à 13:35:40  profilanswer
 

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]


---------------
Blabla Revival, le forum qui envoie du caca | Blog | Twitter | Stats
n°1570920
FlorentG
Unité de Masse
Posté le 06-06-2007 à 13:52:03  profilanswer
 

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.


---------------
last.fmflickr
n°1570960
Decapfour
Posté le 06-06-2007 à 14:33:49  profilanswer
 

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?

n°1570962
FlorentG
Unité de Masse
Posté le 06-06-2007 à 14:34:56  profilanswer
 

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


---------------
last.fmflickr
n°1570992
Shinuza
This is unexecpected
Posté le 06-06-2007 à 14:59:34  profilanswer
 

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.
n°1571001
AlphaZone
Posté le 06-06-2007 à 15:07:46  profilanswer
 

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."
n°1571008
Decapfour
Posté le 06-06-2007 à 15:12:52  profilanswer
 

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
n°1571021
omega2
Posté le 06-06-2007 à 15:20:58  profilanswer
 

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)

n°1571040
Decapfour
Posté le 06-06-2007 à 15:32:04  profilanswer
 

Ca marche niquel merci :)

n°1571069
AlphaZone
Posté le 06-06-2007 à 15:56:07  profilanswer
 

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."
n°1571082
Decapfour
Posté le 06-06-2007 à 16:09:33  profilanswer
 

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.

n°1571089
Shinuza
This is unexecpected
Posté le 06-06-2007 à 16:15:23  profilanswer
 

On met des quotes autour des values :fou:


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1571478
cosmoschtr​oumpf
dawa powered
Posté le 07-06-2007 à 12:51:13  profilanswer
 

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/ACH jeux
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS et simulation de tableau

 

Sujets relatifs
[RESOLU] FPDF probleme mise en page tableau[c] charger une image pixel par pixel dans un tableau
afficher un tableau de liens issus d'un array[ Validateur XHTML / Css ] Peut-on les installer en local
Challenge CSS : Positionner un div en absolute en bas de page...retourner 1 ligne tableau à deux dimensions
Positionnement en CSS[HELP] Problème de Tableau
[Résolu] CSS : je voudrais une width (100%-largeur menu)Faire un tableau de cookies
Plus de sujets relatifs à : CSS et simulation de tableau


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