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/XHTML/PHP]<table> : Problèmes de réglages marges inter-TR


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Mars 2007
    Messages
    178
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 178
    Par défaut [CSS/XHTML/PHP]<table> : Problèmes de réglages marges inter-TR
    Bonsoir/Bonjour à tous,

    je suis confronté au problème suivant...
    j'ai un tableau généré dynamiquement en PHP, qui suit, par exemple, la structure suivante...

    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
    <div class='emploidutemps'>
    <div id='lundi' class='main'>
    <h2>lundi</h2>
    <table id='heures' class='main'>
    <tr class='duree_0'><td>08h00</td></tr>
    <tr class='duree_30'><td>08h30</td></tr>
    <tr class='duree_30'><td>09h00</td></tr>
    <tr class='duree_30'><td>09h30</td></tr>
    <tr class='duree_60'><td>10h30</td></tr>
    <tr class='duree_30'><td>11h00</td></tr>
    <tr class='duree_60'><td>12h00</td></tr>
    <tr class='duree_60'><td>13h00</td></tr>
    <tr class='duree_30'><td>13h30</td></tr>
    <tr class='duree_30'><td>14h00</td></tr>
    <tr class='duree_30'><td>14h30</td></tr>
    <tr class='duree_30'><td>15h00</td></tr>
    <tr class='duree_60'><td>16h00</td></tr>
    <tr class='duree_30'><td>16h30</td></tr>
    <tr class='duree_30'><td>17h00</td></tr>
    <tr class='duree_60'><td>18h00</td></tr>
    <tr class='duree_50'><td>18h50</td></tr>
    <tr class='duree_10'><td>19h00</td></tr>
    </table>
    [...]
    </div>
    </div>
    J'aimerais donc régler l'espacement inter-tr proportionnellement à l'écart entre deux horaires CONSECUTIFS !

    Par exemple : je veux qu'entre 10h30 et 11h (soit un écart de 30minutes), il y ait un écart de 30/6=5px, de même entre 17h et 18h00, 10px...

    vous le verrez peu après, mais le coefficient réel est un peu plus "complexe" pas 1/6, mais le principe reste inchangé...

    J'ai donc essayé de mettre en place une css dynamiquement :

    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
            <?php
    
            define("HEURE_MIN","08h00");
            define("HEURE_MAX","19h00");
            define("HAUTEUR_COLONNE_HEURES","1000"); //en px
            define("PAS_PRECISION_SEANCES","5");
            define("CLASS_TR","duree_");
            //difference de temps max entre deux seances
            define("INTER_SEANCES_MAX","120");
    	//difference_max entre deux seances : 180 minutes
    	$inter=INTER_SEANCES_MAX;
    
            //la ligne suivante renvoit bien (19h-8h)*60, soit 660 minutes ici !
    	$duree_totale=Horaire::calculerDuree(HEURE_MIN,HEURE_MAX);
    
    	//hauteur & espaces inter-heure
    	$nb_cells=$inter/PAS_PRECISION_SEANCES;
    	$nb_espaces=$nb_cells-1;
    	$marge_interclass=PAS_PRECISION_SEANCES;
    
    $hauteur_cell=round((HAUTEUR_COLONNE_HEURES-($nb_espaces)*$marge_interclass)/$nb_cells);
    	for($i=0;$i<=$inter;$i+=PAS_PRECISION_SEANCES) {
    		$marge=round($i*HAUTEUR_COLONNE_HEURES/$duree_totale);
    		//marge entre les cases cours
    		//on reprend le 800px de height de #heures
    		echo "\t .".CLASS_TR.$i." td {
    		height: ".$hauteur_cell."px;
    		padding-top: ".$marge."px;
    		}\n\n";
    	}
    	?>
    Je sais que les formules de la css générée dynamiquement sont un peu tordues, mais je n'ai pas vraiment le choix...

    En fait, je définis des classes pour chaque écart de temps (enfin, de 5minutes en 5minutes)...
    Un horaire ayant une classe ".duree_60" a 60 minutes d'écart avec l'horaire précédent...

    Pour ceux que le code du dessus rebutent, en local, voici la css qui est générée :

    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
    .duree_0 td {
    		height: 37px;
    		padding-bottom: 0px;
    		}
     
    	 .duree_5 td {
    		height: 37px;
    		padding-bottom: 8px;
    		}
     
    	 .duree_10 td {
    		height: 37px;
    		padding-bottom: 15px;
    		}
     
    	 .duree_15 td {
    		height: 37px;
    		padding-bottom: 23px;
    		}
     
    	 .duree_20 td {
    		height: 37px;
    		padding-bottom: 30px;
    		}
     
    	 .duree_25 td {
    		height: 37px;
    		padding-bottom: 38px;
    		}
             [... et ce jusqu'à 120...]
    Seulement voilà, malgré de longues heures de prises de tête, mes cellules ont une hauteur fixe (normal, jusque là tout va bien), mais l'écart entre mes lignes (ou mes cellules, puisque je n'ai qu'un TD par TR) est toujours à 0...

    si par hasard, vous pouviez m'aider...
    je vous en serai gré éternellement (enfin, au moins pour la semaine )

    Merci d'avance de vos réponses !!!

    Florent

  2. #2
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Mars 2007
    Messages
    178
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 178
    Par défaut
    alors, je dois vous annoncer un truc INCROYABLE...
    après 6h de lutte acharnée,
    il a suffi d'écrire sur developpez.net pour que le miracle s'accomplisse !!!!

    Merci à ce forum faiseur de miracles

    Bon, ben, en tous cas, ça pourra toujours servir à des gens qui veulent créer des emplois du temps ^^

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

Discussions similaires

  1. Réponses: 0
    Dernier message: 05/02/2008, 17h26
  2. [css et php] problème de z-index à générer à la volée
    Par Christophe93250 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/03/2007, 13h21
  3. [CSS-XHTML] Remplacer un TABLE
    Par stailer dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 28/02/2006, 13h06

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