IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[css] Centrage de tableaux div et span


Sujet :

Centrer un élément en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2005
    Messages
    96
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2005
    Messages : 96
    Par défaut [css] Centrage de tableaux div et span
    Bonjour,
    Je suis en train d’éliminer tous les <table> (n lignes, 2 colonnes) d’un site pour les remplacer par des tableaux css.
    J’ai remplacé les balises table par des balises div de classe tabSaisieCmps, les tr par des div de classe tabLigne et les cellules gauche et droite par des span de classe caseTabD et caseTabG. Au départ les objets placés dans les cellules étaient alignés à gauche et la largeur des cellules était ajustée sur le plus long des objets. De plus les tableaux centrés sur la page.

    Mon problème est que je n’arrive pas a centrer mon tableau (tabLigne) et je n’arrive pas non plus a adapter la largeur des cellules avec l’objet le plus long, donc j’ai mis une taille manuellement mais mes objets ont une taille variable !
    J'ai bien trouvé tout un tas de sujets sur les centrages mais je n'arrive à faire fonctionner aucune solution

    J’ai crée le css suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
     
    .tabSaisieCmps{
    	clear: both;
    	border: 2px solid blue;
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    	width: 80%;
     
    }
     
    .tabSaisieCmps .tabLigne{
    	position: relative;
    	clear: both;
    	border: 2px solid green;
    	width: auto;
    }	
     
    .tabSaisieCmps .tabLigne .caseTabG{
    	position: relative;
    	float: left;
    	border: 2px solid pink;
    	width: 20%;
     	text-align: left;
     
    }
     
    .tabSaisieCmps .tabLigne .caseTabD{
    	position: relative;
    	float: left;
    	border: 2px solid red;
    	width: 30%;
    	text-align: left;
     
    }

  2. #2
    Membre confirmé
    Inscrit en
    Avril 2006
    Messages
    110
    Détails du profil
    Informations forums :
    Inscription : Avril 2006
    Messages : 110
    Par défaut
    La réponse est simple : garde les tableaux c'est plus pratique !

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2005
    Messages
    96
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2005
    Messages : 96
    Par défaut
    Oui mais le problème c'est que du coups pour changer la mise en forme c'est assez lourd les tableaux. Et puis c'est une exigence de virer les tableaux .
    Pfff il me font criser ces css

  4. #4
    Membre confirmé
    Inscrit en
    Avril 2006
    Messages
    110
    Détails du profil
    Informations forums :
    Inscription : Avril 2006
    Messages : 110
    Par défaut
    Pourquoi tu n'expliquerais pas à la personne exigeante qu'elle l'est trop ?

    Sinon je pense que tu peux faire
    <div style="text-align:center">
    <table>
    </table>
    </div>
    et ton tableau devrait être centré.

    Pour les largeur variables tu peux tenter width:auto mais je garantis rien...

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2005
    Messages
    96
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2005
    Messages : 96
    Par défaut
    lol j'aime beaucoup ta solution de je remplace deux balises center par un div . Mais la personne exigeante ne veut pas du tout de tableau . Je l'ai son tableau purement css mais il me reste des problèmes de rezize automatique de cellules et des problèmes de centrage

  6. #6
    Membre confirmé
    Inscrit en
    Avril 2006
    Messages
    110
    Détails du profil
    Informations forums :
    Inscription : Avril 2006
    Messages : 110
    Par défaut
    Nan mais dans mon exemple tu mets ton tableau css à la place de table et c'est pareil....

    Et après tu dis à la personne exigeante qu'on ne peut pas faire un tableau CSS avec des cellules de largeur variable, point, comme j'ai dit à mon chef qui voulait la même chose !
    Bon, en fait on peut mais ça demande du javascript assez relou... tu récupères la largeur de l'élément le plus grand et tu l'appliques à tous les autres... enfin théoriquement ça devrait marcher... mais personnellement je trouve ça d'une stupidité, quand un bête tableau HTML, interprété correctement par tous, fait tout aussi bien...
    Et quelles sont les raisons qui poussent la personne exigeante à ne plus vouloir de tableaux d'ailleurs ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [css] scrollbar dans un div
    Par tooms2028 dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 17/06/2007, 09h18
  2. [HTML][CSS]tableaux div excel
    Par philippe281281 dans le forum Mise en page CSS
    Réponses: 16
    Dernier message: 26/06/2006, 11h22
  3. [CSS] Positionner 2 tableaux dans une div
    Par Rei Itchido dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 12/05/2006, 18h27
  4. [HTML & CSS]Centrage d'un div
    Par jowo dans le forum Mise en page CSS
    Réponses: 10
    Dernier message: 25/04/2006, 10h38
  5. div ou span au lieu de font?
    Par magic.goby dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 01/07/2005, 13h17

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo