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

  FORUM HardWare.fr
  Graphisme
  Web design

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°85000
Jubijub
Parce que je le VD bien
Posté le 28-07-2002 à 18:49:59  profilanswer
 

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
mood
Publicité
Posté le 28-07-2002 à 18:49:59  profilanswer
 

n°85060
Gaboriau
Posté le 28-07-2002 à 19:57:51  profilanswer
 

Tu peux nous donner le code?

n°85092
Jubijub
Parce que je le VD bien
Posté le 28-07-2002 à 20:43:07  profilanswer
 

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
n°85093
Jubijub
Parce que je le VD bien
Posté le 28-07-2002 à 20:45:22  profilanswer
 

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
n°85106
Gaboriau
Posté le 28-07-2002 à 20:58:30  profilanswer
 

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
n°85120
Gaboriau
Posté le 28-07-2002 à 21:11:02  profilanswer
 

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

n°85125
lorelaii
Posté le 28-07-2002 à 21:14:26  profilanswer
 

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

n°85148
Jubijub
Parce que je le VD bien
Posté le 28-07-2002 à 22:12:24  profilanswer
 

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


---------------
Jubi Photos : Flickr - 500px
n°85151
Jubijub
Parce que je le VD bien
Posté le 28-07-2002 à 22:14:39  profilanswer
 

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
n°85303
Jubijub
Parce que je le VD bien
Posté le 29-07-2002 à 00:31:20  profilanswer
 

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
mood
Publicité
Posté le 29-07-2002 à 00:31:20  profilanswer
 

n°85374
Gaboriau
Posté le 29-07-2002 à 01:46:29  profilanswer
 

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
n°85593
Jubijub
Parce que je le VD bien
Posté le 29-07-2002 à 17:13:06  profilanswer
 

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


---------------
Jubi Photos : Flickr - 500px
n°85594
Gaboriau
Posté le 29-07-2002 à 17:16:12  profilanswer
 

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

n°85613
Jubijub
Parce que je le VD bien
Posté le 29-07-2002 à 18:07:55  profilanswer
 

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
n°94823
Maxime
Posté le 18-08-2002 à 01:37:49  profilanswer
 

test avec dautre brower ( opera netscape mozila )


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

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

 

Sujets relatifs
Comment faire : Photoshop (calques) -> Pages HTMLFlash MX permet-il le html dans un txt à charger ?
comment dans un CSS, definir 2 types de a:link, a:hover etc ?????[HTML ?] Ouvrir une nouvelle page quand on clique sur un lie
Help HTML (tableau)[flash] html publié par flash5
HTML dans la signature[Optimisation], Pour une image en fond d'ecran (html),kel taillle?
[Gimp] Fond blanc >> fond transparentHTML : Comment faire un put1 de calque etirable :)
Plus de sujets relatifs à : [HTML, JS][CSS] pb de table, marges et espace blanc

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.089 secondes

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