[CSS] Tableau

Tableau [CSS] - HTML/CSS - Programmation

Marsh Posté le 21-10-2005 à 13:34:12    

Bonjour,
 
J'ai un petit problème avec ma mise en page poru un tableau !
 
Voila comment ca se présente sur mon site:
 

Code :
  1. <div id="corps">
  2.    <div id="tableaumembres">
  3.        MON TABLEAU
  4.    </div>
  5. </div>


 
Et voila mon CSS
 

Code :
  1. #corps
  2. {
  3.    margin-left: 180px;
  4.    margin-bottom: 20px;
  5.    padding: 15px;
  6.  
  7.  
  8.    color: #000000;
  9.    background-color: #FFFFFF;
  10.  
  11.    border: 6px double #1630B1;
  12. }
  13. #tableaumembres
  14. {
  15.    text-align: center;
  16.    margin-left: 100px;
  17.    width: 600px;
  18. }


 
La première partie du css "corps" fonctionne super mais par contre pour mon tableau, il bouge pas et je comprend pas pourquoi ??
 
Si quelqu'un sait m'aider ca serait super...
 
Merci d'avance...

Reply

Marsh Posté le 21-10-2005 à 13:34:12   

Reply

Marsh Posté le 21-10-2005 à 13:41:32    

comment ça il bouge pas ?
 
jvois pas ce quil ya de mal dans ton code.
juste peut etre eviter la sur utilisation de DIV :  
 
   <div id="tableaumembres">  
       MON TABLEAU  
   </div>  
 
tu le remplace par  
 
   <table id="tableaumembres">  
       MON TABLEAU  
   </table>  
 
chaque element HTML peut être style comme il le souhaite.
 
c'est ca que tu veux faire ?
 
sinon pour center un tableau ce n'est pas de cette manière. c'est avec les marges : magin-left:auto; margin-right:auto;
 
bien entendu il faut que ton tableau soit plus petit lol
 
Plus de precisions ca serait mieux


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 21-10-2005 à 14:45:05    

Ben c'est qu'en fait toute les options que j'avais mise pour le tableau ne fonctionnent pas...
 
- texte pas centrer
- marge de gauche inexistante
- taille par défaut

Reply

Marsh Posté le 21-10-2005 à 15:10:28    

normal tu les mets au DIV et non pas au tableau
 
ca aurait plutot été :  
#tableaumembres TABLE
{  
   text-align: center;  
   margin-left: 100px;  
   width: 600px;  
}


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 21-10-2005 à 15:59:53    

Ouais mais si je met pas le TABLE normalement les options s'appliquent à tous ce qui est dans le div non ? meme au table ?

Reply

Marsh Posté le 21-10-2005 à 17:42:38    

oué pour le textalign ca devrait le faire normalement
 
faudrait avoir le code complet de la page histoire de se faire une idée


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 21-10-2005 à 17:52:55    

voila ma page !!
 
J'ai mis un id dans le table comme tu m'as dit mais ca marche tjs pas ... y a rien qui est pris en compte de se que je met dans le css :S
 
ca commence a la ligne 150
 

Code :
  1. <?php
  2. if( $userdata['session_logged_in'] ) {
  3.     $log = 1;
  4. }
  5. else {
  6. $log = 0;
  7. }
  8. ?>
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  10. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  11.    <head>
  12.        <title>TITRE</title>
  13.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  14.        <link rel="stylesheet" media="screen" type="text/css" title="titre" href="style.css" />
  15.         </head>
  16.    <body>
  17. <?php
  18. function barre_navigation ($nb_total,
  19.         $nb_affichage_par_page,
  20.         $debut,
  21.         $nb_liens_dans_la_barre) {
  22.     $barre = '';
  23.    
  24.     // on recherche l'URL courante munie de ses paramètre auxquels on ajoute le paramètre 'debut' qui jouera le role du premier élément de notre LIMIT
  25.     if ($_SERVER['QUERY_STRING'] == "" ) {
  26.         $query = $_SERVER['PHP_SELF'].'?debut=';
  27.     }
  28.     else {
  29.         $tableau = explode ("debut=", $_SERVER['QUERY_STRING']);
  30.         $nb_element = count ($tableau);
  31.         if ($nb_element == 1) {
  32.             $query = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'].'&debut=';
  33.         }
  34.         else {
  35.             if ($tableau[0] == "" ) {
  36.                 $query = $_SERVER['PHP_SELF'].'?debut=';
  37.             }
  38.             else {
  39.                 $query = $_SERVER['PHP_SELF'].'?'.$tableau[0].'debut=';
  40.             }
  41.         }
  42.     }
  43.    
  44.     // on calcul le numéro de la page active
  45.     $page_active = floor(($debut/$nb_affichage_par_page)+1);
  46.     // on calcul le nombre de pages total que va prendre notre affichage
  47.     $nb_pages_total = ceil($nb_total/$nb_affichage_par_page);
  48.    
  49.     // on calcul le premier numero de la barre qui va s'afficher, ainsi que le dernier ($cpt_deb et $cpt_fin)
  50.     // exemple : 2 3 4 5 6 7 8 9 10 11 << $cpt_deb = 2 et $cpt_fin = 11
  51.     if ($nb_liens_dans_la_barre%2==0) {
  52.         $cpt_deb1 = $page_active - ($nb_liens_dans_la_barre/2)+1;
  53.         $cpt_fin1 = $page_active + ($nb_liens_dans_la_barre/2);
  54.     }
  55.     else {
  56.         $cpt_deb1 = $page_active - floor(($nb_liens_dans_la_barre/2));
  57.         $cpt_fin1 = $page_active + floor(($nb_liens_dans_la_barre/2));
  58.     }
  59.    
  60.     if ($cpt_deb1 <= 1) {
  61.         $cpt_deb = 1;
  62.         $cpt_fin = $nb_liens_dans_la_barre;
  63.     }
  64.     elseif ($cpt_deb1>1 && $cpt_fin1<$nb_pages_total) {
  65.         $cpt_deb = $cpt_deb1;
  66.         $cpt_fin = $cpt_fin1;
  67.     }
  68.     else {
  69.         $cpt_deb = ($nb_pages_total-$nb_liens_dans_la_barre)+1;
  70.         $cpt_fin = $nb_pages_total;
  71.     }
  72.     if ($nb_pages_total <= $nb_liens_dans_la_barre) {
  73.         $cpt_deb=1;
  74.         $cpt_fin=$nb_pages_total;
  75.     }
  76.    
  77.     // si le premier numéro qui s'affiche est différent de 1, on affiche << qui sera un lien vers la premiere page
  78.     if ($cpt_deb != 1) {
  79.         $cible = $query.(0);
  80.         $lien = '<A HREF="'.$cible.'">&lt;&lt;</A>&nbsp;&nbsp;';
  81.     }
  82.     else {
  83.         $lien='';
  84.     }
  85.     $barre .= $lien;
  86.     // on affiche tous les liens de notre barre, tout en vérifiant de ne pas mettre de lien pour la page active
  87.     for ($cpt = $cpt_deb; $cpt <= $cpt_fin; $cpt++) {
  88.         if ($cpt == $page_active) {
  89.             if ($cpt == $nb_pages_total) {
  90.                 $barre .= $cpt;
  91.             }
  92.             else {
  93.                 $barre .= $cpt.'&nbsp;-&nbsp;';
  94.             }
  95.         }
  96.         else {
  97.             if ($cpt == $cpt_fin) {
  98.                 $barre .= "<A HREF='".$query.(($cpt-1)*$nb_affichage_par_page);
  99.                 $barre .= "'>".$cpt."</A>";
  100.             }
  101.             else {
  102.                
  103.                 $barre .= "<A HREF='".$query.(($cpt-1)*$nb_affichage_par_page);
  104.                 $barre .= "'>".$cpt."</A>&nbsp;-&nbsp;";
  105.             }
  106.         }
  107.     }
  108.    
  109.     $fin = ($nb_total - ($nb_total % $nb_affichage_par_page));
  110.     if (($nb_total % $nb_affichage_par_page) == 0) {
  111.         $fin = $fin - $nb_affichage_par_page;
  112.     }
  113.         // si $cpt_fin ne vaut pas la dernière page de la barre de navigation, on affiche un >> qui sera un lien vers la dernière page de navigation
  114.     if ($cpt_fin != $nb_pages_total) {
  115.         $cible = $query.$fin;
  116.         $lien = '&nbsp;&nbsp;<A HREF="'.$cible.'">&gt;&gt;</A>';
  117.     }
  118.     else {
  119.         $lien='';
  120.     }
  121.     $barre .= $lien;
  122.     return $barre;   
  123. }
  124. ?>
  125.  <?php
  126.   if ($log == 1) {
  127.    // on prépare une requête permettant de calculer le nombre total d'éléments qu'il faudra afficher sur nos différentes pages
  128.    $sql  = 'SELECT count(*) FROM phpbb_users';
  129.    // on exécute cette requête
  130.    $resultat = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
  131.    // on récupère le nombre d'éléments à afficher
  132.    $nb_total = mysql_fetch_array($resultat);
  133.    // on teste si ce nombre de vaut pas 0
  134.    if (($nb_total = $nb_total[0]) == 0) {
  135.          echo 'Aucune réponse trouvée';
  136.    }
  137.    else {
  138.          echo '<table id=\"tableaumembres\" width=\"100%\" cellspacing=\"4\" cellpadding=\"2\"><tr><td>Pseudo</td><td>Mail</td><td>Inscrit le</td></tr>';
  139.    
  140.         // sinon, on regarde si la variable $debut (le x de notre LIMIT) n'a pas déjà été déclarée, et dans ce cas, on l'initialise à 0
  141.         if (!isset($_GET['debut'])) $_GET['debut'] = 0;
  142.    
  143.         $nb_affichage_par_page = 20;
  144.    
  145.         // Préparation de la requête avec le LIMIT
  146.         $sql = 'SELECT username, user_email, user_regdate FROM phpbb_users ORDER BY username ASC LIMIT '.$_GET['debut'].','.$nb_affichage_par_page;
  147.         // on exécute la requête
  148.         $req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
  149.         // on va scanner tous les tuples un par un
  150.         while ($data = mysql_fetch_array($req)) {
  151.             // on affiches les résultats dans la table
  152.             echo '<tr><td>' , stripslashes(htmlentities(trim($data['username']))) , '</td><td>' , stripslashes(htmlentities(trim($data['user_email']))) , '</td><td>' , stripslashes(htmlentities(trim(create_date($lang['DATE_FORMAT'], $data['user_regdate'], $board_config['board_timezone'])))) , '</td></tr>';
  153.         }
  154.         // on libère l'espace mémoire alloué pour cette requête
  155.         mysql_free_result ($req);
  156.         echo '</table><br />';
  157.         // on affiche enfin notre barre
  158.         echo '<center><span class="gras">'.barre_navigation($nb_total, $nb_affichage_par_page, $_GET['debut'], 3).'</span></center>';
  159.    }
  160.    // on libère l'espace mémoire alloué pour cette requête
  161.    mysql_free_result ($resultat);
  162.   }
  163.   else {
  164.    echo "<div class=\"erreur\"><br /><br /><br /> <b>Vous n'êtes pas connectés à votre compte !</b> <br /><br /><br /><br /></div></body></html>";
  165.   }
  166.  ?>


 
Si t'arrives a voir ce qu'il y a de faux ?


Message édité par misscalins le 21-10-2005 à 17:54:17
Reply

Marsh Posté le 21-10-2005 à 20:17:04    

J'ai aussi essayé sans css... avec les options du tableau et ca ne marche pas non plus... Y a quelques chose qui doit bloqué le formatage du tableau mais je ne trouve pas quoi :S

Reply

Marsh Posté le 21-10-2005 à 20:44:48    

heu le HTML généré, genre tu affichage la page > clic droit >  afficher la source, et tu nous C/C le code.
 
c'est plus lisible que un bordel de PHP
tu ne crois paS ?


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 21-10-2005 à 21:57:41    

Oui dsl :$
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3. <head>
  4. <title>Title</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" media="screen" type="text/css" title="title" href="style.css" />
  7. </head>
  8. <body>
  9. <table id="tableaumembres" width="100%" cellspacing="4" cellpadding="2">
  10. <tr>
  11. <td><b>Pseudo</b></td>
  12. <td><b>Mail</b></td>
  13. <td><b>Inscrit le</b></td>
  14. </tr>
  15. <tr>
  16. <td>Anonymous</td>
  17. <td></td>
  18. <td>19 Oct 2005</td>
  19. </tr>
  20. <tr>
  21. <td>Pseudo1</td>
  22. <td>xxx@xxx.xxx</td>
  23. <td>19 Oct 2005</td>
  24. </tr>
  25. <tr>
  26. <td>Fox</td>
  27. <td>???@hotmail.com</td>
  28. <td>20 Oct 2005</td>
  29. </tr>
  30. </table><br />
  31. <center><span class="gras">1</span></center>
  32. </body>
  33. </html>


Message édité par misscalins le 21-10-2005 à 21:58:11
Reply

Marsh Posté le 21-10-2005 à 21:57:41   

Reply

Marsh Posté le 21-10-2005 à 23:41:11    

C'est bon ça fonctionne enfin... Je crois que c'était juste une erreur de syntaxe !
 
Mais à présent j'ai un problème de compatibilité je crois. J'ai testé sous IE d'afficher ma page et c'est comme si j'avais mis 10 <br> avant le table alors que sous mozilla ça s'affiche normalement ...
 
Quelqu'un aurait il une idée de quelle partie de mon code cela pourrait venir ???

Reply

Marsh Posté le 22-10-2005 à 08:58:16    

on on ne reflechi pas en terme de BR ou de P pour espacer les éléments, mais en terme de margin ou padding.
 
et tu devrait essayer de te mettre au full CSS tu n'y sera que gagnante. Mais si tu es pressée, la heu.. ben defoule toi lol


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 22-10-2005 à 10:33:15    

Bon je recommence ce que j'ai dit alors...
 
Sur IE ça s'affiche comme s'il y avait un "margin-top" de 300px alors que sur mozilla y a rien du tout !!
 
Et normalement c'est l'affichage mozilla qui devrait être le bon puisque je n'ai mis aucun "margin"
 
Tu saurais pas d'ou ça peut venir ?

Reply

Marsh Posté le 22-10-2005 à 10:38:35    

heu déjà mets toi en xHTML 1.0 Transionnal, ca sera largement suffisant pour toi, le xHTML1.1 est très mal géré par IE


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 22-10-2005 à 10:39:56    

heu ben là ya po de prob dans ton code. zarb


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 22-10-2005 à 12:20:27    

Est ce que ca peut venir que tout ce code est include dans mon index.php entre les balises  
 
<div id="corps">MA PAGE</div> ??

Reply

Marsh Posté le 22-10-2005 à 12:26:54    

ben est ce que tu fais attention que le code qui va etre inclu ne contient que le necessaire de balises HTML et non pas les balises <html><head></head><body> et la fin </body></html>
tout ca tu peux virer

Reply

Marsh Posté le 22-10-2005 à 13:11:10    

Ouais j'avais remarqué ca mais même en enlevant ca change rien ...:S
 
et voila la partie du css pour le #corps
 

Code :
  1. #corps
  2. {
  3.    margin-left: 180px;
  4.    margin-bottom: 20px;
  5.    padding: 15px;
  6.  
  7.  
  8.    color: #000000;
  9.    background-color: #FFFFFF;
  10.  
  11.    border: 6px double #1630B1;
  12. }


 
Est ce qu'il y a quelque chose qui pourrait provoquer ce problème ??

Reply

Marsh Posté le 22-10-2005 à 20:14:57    

En fait j'ai découvert que c'est des que je mets un tableau dans le <div id="corps">, ca me met un margin-top sur le tableau sous IE :S  
 
Quelqu'un sait de quoi ca peut venir ???
 
http://www.penas.org/erreur.jpg

Message cité 1 fois
Message édité par misscalins le 22-10-2005 à 20:25:27
Reply

Marsh Posté le 22-10-2005 à 21:21:21    

tu n'aurais pas une partie gauche en float: left par hazard ?

Reply

Marsh Posté le 22-10-2005 à 21:35:55    

Oui les menu sont en float left pkoi ?
 
Le truc c'est que ca me fait ca que si je met un tableau dans la partie centrale...

Reply

Marsh Posté le 22-10-2005 à 23:28:37    

misscalins a écrit :

En fait j'ai découvert que c'est des que je mets un tableau dans le <div id="corps">, ca me met un margin-top sur le tableau sous IE :S  
 
Quelqu'un sait de quoi ca peut venir ???
 
http://www.penas.org/erreur.jpg


il te rajoute pas un margin-top, il te fait juste un décalage. point c'est tout. tu n'aurais pas une version full de ta page, c'est à dire : la page qui inclus la page qui contient le tableau.
 
en gros tout le code HTML final de ta page.

Reply

Marsh Posté le 23-10-2005 à 00:05:02    

Citation :

tu n'aurais pas une version full de ta page


 
Voila monsieur mais je sais pas si ca va vous aidez le code html puisque le problème à l'air de venir du css non ?
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>Title</title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.        <link rel="stylesheet" media="screen" type="text/css" title="Title" href="style.css" />
  7.        <link REL="shortcut icon" HREF="http://www.monsite.com/images/favicon.gif">
  8.    </head>
  9.    <body>
  10.        <!-- L'en-tête -->
  11.        <div id="en_tete">
  12.            <div id="cd">
  13.              1 visiteur connecté &nbsp&nbsp&nbsp | &nbsp&nbsp&nbsp Dimanche, 23 Octobre 2005 &nbsp&nbsp&nbsp 00:01   </div>
  14.        </div>
  15.        <!-- Les menus -->
  16.        <div id="menu"> 
  17.   <div id="membre">
  18.      <h3>Pseudo</h3>
  19.      <ul>
  20.                       <li><a href="index.php?page=profil">Mon Profil</a></li>
  21.                       <li><a href="index.php?page=proposition">Proposition</a></li>
  22.                       <li><a href="index.php?page=membres">Liste des membres</a></li>
  23.                   </ul>
  24.      <a href="index.php?page=deconnexion"><br />Se déconnecter</a>
  25.            </div>
  26.      
  27.    
  28.            <div class="element_menu">
  29.                <h3>Menu</h3>
  30.                <ul>
  31.                    <li><a href="index.php">Accueil</a></li>
  32.                    <li><a href="index.php?page=news">News</a></li>
  33.                    <li><a target="_blank" href="phpBB2/">Forum</a></li>
  34.                    <li><a href="page3.html">Download</a></li>
  35.                    <li><a href="page3.html">Livre d'or</a></li>
  36.                    <li><a href="page3.html">Webmaster</a></li>
  37.                </ul>
  38.            </div>
  39.      
  40.            <div class="element_menu">
  41.                <h3>Tutos</h3>
  42.                <ul>
  43.                    <li><a href="page4.html">Photoshop</a></li>
  44.                    <li><a href="page5.html">HTML / CSS</a></li>
  45.                    <li><a href="page5.html">PHP / MySQL</a></li>
  46.                    <li><a href="page6.html">Windows</a></li>
  47.                </ul>
  48.            </div>       
  49.        </div>
  50.        <!-- Le corps -->
  51.        <div id="corps">
  52.   <table id="tableaumembres"  width="100%" cellspacing="4" cellpadding="2"><tr class="titremembres"><td>Pseudo</td><td>Mail</td><td>Inscrit le</td></tr><tr><td>Anonymous</td><td align="center"></td><td align="center">19 Oct 2005</td></tr><tr><td>Pseudo1</td><td align="center">webmaster@monsite.com</td><td align="center">19 Oct 2005</td></tr><tr><td>Pseudo2</td><td align="center">xxx@hotmail.com</td><td align="center">20 Oct 2005</td></tr></table><br /><center><span class="gras">1</span></center>       </div>
  53.        <!-- Le pied de page -->
  54.        <div id="pied_de_page">
  55.            <em><b> © 2005 www.monsite.com , tous droits réservés</b></em>
  56.        </div>
  57.    </body>
  58. </html>


Message édité par misscalins le 23-10-2005 à 00:33:09
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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