[HTML, JS][CSS] pb de table, marges et espace blanc

pb de table, marges et espace blanc [HTML, JS][CSS] - Web design - Graphisme

Marsh Posté le 28-07-2002 à 18:49:59    

ma page est formattée comme ca :  
 
Un table avec une ligne, et 2 colonnes, pour faire un genre de frame...
 
La frame de gauche, qui rentre dans la case 1 du tableau ci dessus, qui est un tableau aussi.
 
La frame de droite, dans la case 2, qui est toujours un tableau
 

Code :
  1. |-------------------table class="conteneur"----------------|
  2.   |     TD class="frame_g"   |        TD class="frame_d"     |
  3.   |---table class=frame_g----|---------table class=frame_d---|
  4.   ||                        |||                             ||
  5.   ||                        |||                             ||
  6.   ||                        ||------------------------------||
  7.   ||                        ||                               |
  8.   ||                        ||             Espace blanc      |
  9.   ||                        ||                               |
  10.   |--------------------------|       hors tableau            |
  11.   ------------------------------------------------------------


 
ca donne exactement ca...
 
comme vous pouvez le voir, mon tableau de droite, le frame_droite, arrive pas jusqu'en bas...et je comprend pas pkoi, g mis height: 100%, donc il doit prendre 100% de la hauteur du conteneur parent...et c pas le cas...


Message édité par Jubijub le 29-07-2002 à 00:44:21

---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 28-07-2002 à 18:49:59   

Reply

Marsh Posté le 28-07-2002 à 19:57:51    

Tu peux nous donner le code?

Reply

Marsh Posté le 28-07-2002 à 20:43:07    

bien sur :
 
(c moche je sais, mais c mon tt premier site, en version 0.1 ultra alpha) (c plus du test qu'autre chose)
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
  3. <html dir="ltr" xml:lang="fr">
  5. <head>
  6.       <title>Depart pour Kent</title>
  7.       <!--  Partie destinée au référencement -->
  8.       <meta name="keywords" content="University of Kent, échange, ERASMUS, Université Jean Moulin Lyon III" />
  9.       <meta name="description" content="Informations destinées aux étudiants qui partent à Kent en 2002-2003" />
  10.       <meta name="authors" content="Jubijub" />
  11.       <!-- Partie destinée au navigateur -->
  12.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  13.       <!-- Declaration des CSS -->
  14.       <link rel="stylesheet" type="text/css"
  15.       href="base.css" />
  16.    
  17. </head>
  19. <body>
  20. <!-- Conteneur central -->
  21. <table class="conteneur">
  22.   <tr>
  23.      <!-- Frame de gauche -->
  24.     <td class="CellGauche">
  25.       <table class="FrameGauche" >
  26. <tr><td class="FGpremiere" colspan="2">MENU</td></tr>
  27. <tr><td class="FGcg"><img class="icon" src="images/train.png" alt="Icone train"></img></td><td class="fg.cd">Voyage</td></tr>
  28. <tr><td class="FGnormal" colspan="2"><img src="images/point.png" alt="puce"></img>Trajet</td></tr>
  29. <tr><td class="FGnormal" colspan="2"><img src="images/point.png" alt="puce"></img>Date de départ</td></tr>
  30. <tr><td class="FGcg"><img class="icon" src="images/liens.png" alt="Icone corde"></img></td><td class="fg.cd">Liens</td></tr>
  31. <tr><td class="FGnormal" colspan="2"><img src="images/point.png" alt="puce"></img>Pour se préparer</td></tr>
  32. <tr><td class="FGnormal" colspan="2"><img src="images/point.png" alt="puce"></img>Plans et cartes</td></tr>
  33. <tr><td class="FGnormal" colspan="2"><img src="images/point.png" alt="puce"></img>Vie étudiante</td></tr>
  34. <tr><td class="FGcg"><img class="icon" src="images/contact.png" alt="Icone machine à écrire"></img></td><td class="fg.cd">Contacts</td></tr>
  35. <tr><td class="FGnormal" colspan="2"><img src="images/point.png" alt="puce"></img>Etudiants</td></tr>
  36. <tr><td class="FGnormal" colspan="2"><img src="images/point.png" alt="puce"></img>Université Lyon III</td></tr>
  37. <tr><td class="FGnormal" colspan="2"><img src="images/point.png" alt="puce"></img>University of Kent</td></tr>
  38.       </table>
  39.     </td>
  40.      
  41.       <!-- Frame de droite -->
  42.    <td class="CellDroite">
  43.       <table class="FrameDroite">
  44. <tr>
  45.     <td class="FDnormal" >Test à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTe droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à d  droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à dreTest à droiteTest à droiteTe droiteTest à drTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à roiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droiteTest à droite
  46.   
  47.     </td>
  49.       </table>
  50. </td>
  52.   </tr>
  53. <!-- Frame du bas -->
  54.   <tr>
  55.       <table class="FrameBas">
  56.       <tr>
  57. <td colspan="2">
  58.     <p><a href="http://validator.w3.org/check/referer"><img  src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a><a href="http://jigsaw.w3.org/css-validator/"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" /></a>
  59.     </p>
  60. </td>
  61.       </tr>
  62.       </table>
  63. </tr>
  64. </body>
  66. </html>


 

Code :
  1. CSS2 stylesheet : en chantier
  3. body   {    margin-bottom: 0;
  4.         margin-left: 0;
  5.         margin-right: 0;
  6.         margin-top: 0;
  7.         padding-bottom: 0;
  8.         padding-left: 0;
  9.         padding-right: 0;
  10.         padding-top: 0}
  11. a.menu:link, a.menu:visited, a.menu:active {
  12.         text-decoration: none;
  13.         color: #000080;
  14.         background-color: #0000FF;}
  15. tableConteneur             {    border-style: solid;
  16.         margin-left: 0;
  17.         padding-left: 0;
  18.         height: 100%;
  19.         width: 100%}
  20. td.CellGauche  {     width: 140px;
  21.         vertical-align: top;
  22.         height: 100%}
  23. td.CellDroite  {     vertical-align: top;
  24.         height: 100%}
  25. table.FrameGauche {    background-attachment: fixed;
  26.         background-color: #0000FF;
  27.         background-image: url(images/frame_back.png);
  28.         background-position: center center;
  29.         background-repeat: repeat;
  30.         border-style: solid;
  31.         color: #FFFF99;
  32.         font-family: arial black;
  33.         font-size: 14px;
  34.         height:100%;
  35.         width: 100%}
  36. td.FGpremiere  {    background-color: #0000FF;
  37.         background-image: url(images/frame_back.png);
  38.         color: #FFFF99;
  39.         font-size: x-large;
  40.         font-weight: bold;
  41.         height: 25px;
  42.         text-align: center}
  43. img.Icon  {     border-style: solid;
  44.         height: 25px;
  45.         width: 25px}
  46. td.FGcg  {     background-color: #FFFFFF;
  47.         color: #FFFF99;
  48.         height: 25px;
  49.         width: 25%}
  50. td.FGcd  {    background-color: #0000FF;
  51.         background-image: url(images/frame_back.png);
  52.         color: #FFFF99;
  53.         font-weight: bold;
  54.         font-size: large;
  55.         height: 25px;
  56.         text-align: center;
  57.         width: 75%}
  58. td.FGnormal  {    background-color: #0000FF;
  59.         background-image: url(images/frame_back.png);
  60.         color: #FFFF99;
  61.         height: 25px;
  62.         text-align: left}
  63. table.FrameDroite {    background-attachment: scroll;
  64.         background-color: #FFFFFF;
  65.         background-position: center;
  66.         background-repeat: no-repeat;
  67.         border-style: solid;
  68.         color: black;
  69.         height: 100%;
  70.         text-align: justify;
  71.         width: 100%}
  72. td.FDnormal  {    height: 100% ;
  73.          background-image: url(images/main_back.png);
  74.         color: black;}
  75. table.FrameBas            {   background-attachment: scroll;
  76.         background-color: #000000;
  77.         background-position: center;
  78.         background-repeat: no-repeat;
  79.         border-style: solid;
  80.         color: #000000;
  81.         height: 80px;
  82.         text-align: justify;
  83.         width: 75%;}


 
EDIT : MAJ DU CODE


Message édité par Jubijub le 29-07-2002 à 00:43:44

---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 28-07-2002 à 20:45:22    

normalement, le truc de droite, avec le texte de test, le cadre devrait allait jusqu'en bas...et c pas le cas...du coup on voit qu'une partie minuscule du background image...


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 28-07-2002 à 20:58:30    

Jubijub a écrit a écrit :

normalement, le truc de droite, avec le texte de test, le cadre devrait allait jusqu'en bas...et c pas le cas...du coup on voit qu'une partie minuscule du background image...




ici le cadre va bien jusqu'en bas, j'ai mis une autre photo pour tester, mais la photo est pas "tile" mais n'apparait qu'une fois, c'est pas plutôt un problème de dimensionnement de l'image? Quelle dimension a ton image? C'est la première fois que je vois un tableau en css, c'est intéressant
 
http://www3.sympatico.ca/sylvain403/test.png


Message édité par Gaboriau le 28-07-2002 à 21:02:16
Reply

Marsh Posté le 28-07-2002 à 21:11:02    

p.s. j'ai ajouter Border "1" dans les balises html pour qu'on voit bien le contour du tableau. J'ai testé en 800x600 et 1024x768 avec le même résultat, le tableau vas bien jusqu'en bas

Reply

Marsh Posté le 28-07-2002 à 21:14:26    

ton image : main_back.png, elle fait quelle taille ?

Reply

Marsh Posté le 28-07-2002 à 22:12:24    

220*400...mais comme g mis scoll comme attribut, normalement ca influe sur rien...


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 28-07-2002 à 22:14:39    

je vise la certif XHTML 1.0 strict + CSS2 ...donc je peux pas faire autrement que de foutre tt ce qui est mise en page dans les CSS...
 
-->je comprend pas pkoi chez toi ca marche et pas chez moi...
 
si je dessine le cadre, y s'arrete juste en dessous du texte...


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 29-07-2002 à 00:31:20    

je sais pas quoi faire...
 
entre temps, g du réécrire tt les classes de ma CSS, le "_", c pas valide dans les noms :lol: ...
 
g ajouté une frame en bas, pour voir si l'autre allait taper contre...
 
ben non...y'a un truc qui fait qu'elle colle au texte cette putain de fenetre...
 
-->sinon c bizarre : pour etre conforme à CSS2, t obligé de spécifier background color et color...mais si je le fais, la bgcolor passe devant l'image...c trop le bordel...
 
 
--->g pu isoler en partie le pb : : ca se situe au niveau ou après la déclaration du tableau spécifique à la frame de droite...
si je spécifie l'image dans la case droite du tableau conteneur, l'image va partout, c ok
si je la spécifie après, elle s'arrete au texte...
 
c à table.FrameGauche que ca doit partir en couille...où à l'endroit équivalent dans le code...
 
EDIT : http://jubijub.nerim.net g uploadé les fichiers là...faite un view source pour le code...et pour la css :
 
http://jubijub.nerim.net/base.css
 
mon pb en image :
 
http://jubijub.nerim.net/images/screen.png
 
l'image qui pose pb (mais ca vient pas d'elle je pense)
http://jubijub.nerim.net/images/main_back.png


Message édité par Jubijub le 29-07-2002 à 00:40:11

---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 29-07-2002 à 00:31:20   

Reply

Marsh Posté le 29-07-2002 à 01:46:29    

Tu as quoi comme version de IE, j'ai IE5.5? Faudrait voir pourquoi ça marche ici et pas chez toi
 
http://www3.sympatico.ca/sylvain403/test2.png


Message édité par Gaboriau le 29-07-2002 à 01:49:39
Reply

Marsh Posté le 29-07-2002 à 17:13:06    

ie6.0 US avec tt les derniers patchs...


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 29-07-2002 à 17:16:12    

Jubijub a écrit a écrit :

ie6.0 US avec tt les derniers patchs...




 
C'est embêtant, si le problème de Microsoft tu risques de chercher longtemps, faudrait que quelqu'un avec la version 6.0 aussi nous dise si ça fonctionne chez lui

Reply

Marsh Posté le 29-07-2002 à 18:07:55    

g isolé d'où venait le pb...
 
dans le tableau conteneur, dans la cellule de droite, je peux pas faire qu'un tableau que je mettrais dans cette cellule aie des dimensions proportionnelles...il me fait tjs un wrap autour de ce qu'elle contient...
 
je sais pas de quoi ca vient...
 
g essayé en mettant un cadre noir à ce tableau, il reste de force autour du petit texte, malgré des attributs height: 100% partout...
 
si je met une taille fixe ca passe...
 
le plus fort, c que width passe sans pb : si je met width: 75%, ca fera 75% de la largeur de la frame...c vraiment incompréhensible...


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 18-08-2002 à 01:37:49    

test avec dautre brower ( opera netscape mozila )

Reply

Sujets relatifs:

Leave a Replay

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