Se connecter / S'enregistrer

Résolu [HTML/CSS] Je deviens fou?

Solutions (9)
Tags :
  • Internet explorer 7
  • Html
  • CSS
  • Programmation
, Administrateur |
Bonsoir,
je suis relativement habitué du css, mais là j'en perds mon latin.
Mon tableau se "tord" et je ne sais pas expliquer pourquoi.

Voici mon css donnant la propriété du tableau:
  1. .projets_table
  2. {
  3. padding-left: 130px;
  4. margin-top: -10px;
  5. }
  6. .projets_table td
  7. {
  8. padding-right: 50px;
  9. font-size:10px;
  10. }

Rien de bien compliqué! J'obtiens donc un tableau parfaitement transparent, juste bon pour aligner convenablement mon contenu.
Dans chaque cellule, je dispose ceci:
  1. <td><a href="lien.html"><img src="photo/img.jpg"/><span class="title_projet">titre de l'image</span></a><br>
  2. Résumé de l'activité en quelques mots.</td>

avec, pour le span:
  1. float: right;
  2. border-left: 1px solid #AAA;
  3. border-bottom: 1px solid #AAA;
  4. font-size:15px;
  5. background-image:url(photo/white.png);
  6. padding-left: 2px;
  7. padding-right: 2px;




Chaque image a une taille fixe, et n'a aucune raison de se déplacer dans sa cellule. Pourtant, il n'y a pas deux cellules qui se comportent de la même façon! Et mon tableau est disposé dans un iframe.
Est-ce possible que quelque chose hors de l'iframe influe sur mon tableau en déplacement les images qui se situent dedans?

Regardez ce qui se passe en images, en ayant ajouté une couleur de fond pour mettre le problème en évidence:




Merci pour votre aide.
Contenus similaires
Meilleure solution
partage
, Modérateur |
En mettant un attribut valign à top pour tes td
<td valign="top">...</td>
  • Commenter cette solution |
Score
0
òh
òi
, Administrateur |
Pour te répondre, les dernières versions de Safari ( 4.0.5), Firefox(5.0) et Internet explorer (7.0.6) l'interprètent bien.

Quand j'aurai le temps, j'installerai d'autres navigateurs pour tester.

Ceci dit, IE c'est la merde pour le css :( 
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
C'est pas aléatoire, c'est centré verticalement. Du coup, en fonction du contenu (1, 2 ou 3 lignes de texte), la position n'est pas la même ;) 

A voir si le vertical-align fonctionne bien avec tous les navigateurs par contre.
  • Commenter cette réponse |
Score
0
òh
òi
, Administrateur |
Meilleure réponse sélectionnée par Xiiime.
  • Commenter cette réponse |
Score
0
òh
òi
, Administrateur |
Ooh et en CSS c'est vertical-align, vive Dreamweaver et sa saisie semi-automatique de propriétés.
\o/ Bravo omaR ça fonctionne, c'est EXACTEMENT ce que je voulais! J'en devenais cinglé!! Mais c'est étrange que ça agisse comme ça sans la propriété... c'est un peu aléatoire :/ 

merci!! merci BEAUCOUP!
  • Commenter cette réponse |
Score
0
òh
òi
, Administrateur |
C'est tout simple, regarde dans le screen que j'ai posté, deux des images sont situées un peu plus bas que celle à son côté. ça donne une impression de mal trié et je ne comprend pas à quoi c'est dû. :/ 

Je voudrais juste que mes images soient toutes à la même position dans les cellules
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Afin de pas dire de bétises, est-ce que tu pourrais faire un schéma de ce que tu voudrais exactement ?
  • Commenter cette réponse |
Score
0
òh
òi
, Administrateur |
Bonjour,
le site n'est pas publié, il s'agit d'un travail et ne sera pas publié avant sa correction.
Comme je l'ai dit, la page est situé dans un iframe. Voici la page :

  1. <html>
  2.  
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  5. <title> Projets trimestre 1 </title>
  6.  
  7. <link href="designcontent.css" type="text/css" rel="stylesheet" />
  8.  
  9.  
  10. </head>
  11.  
  12. <body class="thumb">
  13. <table class="projets_table">
  14. <tr>
  15. <td><a href="insel.html"><img src="photo/ins.jpg"/><span class="title_projet">ins</span></a><br>
  16. Résumé de l'activité en quelques mots.</td>
  17.  
  18. <td>
  19. <a href="nich.html"><img src="photo/nich.jpg" /><span class="title_projet">lien 2</span> </a> <br>
  20. Résumé de l'activité en quelques mots...
  21.  
  22. </td>
  23. </tr>
  24.  
  25.  
  26. <tr>
  27. <td><a href="plank.html"><img src="photo/plk.jpg"/><span class="title_projet">PlK </span></a><br>
  28. Résumé de l'activité en quelques mots...
  29. </td>
  30.  
  31. <td><a href="hab.html"><img src="photo/hab.jpg"/><span class="title_projet">Hab</span></a><br>Résumé de l'activité en quelques mots...Résumé de l'activité en quelques mots...</td>
  32. </tr>
  33. </table>
  34.  
  35. </body>
  36.  
  37. </html>


voici la page d'index:
  1. <html>
  2.  
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN">
  6. <title> Po </title>
  7.  
  8.  
  9. <link href="design.css" type="text/css" rel="stylesheet" />
  10. </head>
  11.  
  12. <body>
  13.  
  14.  
  15. <H1 style="text-align:center"> PO </H1>
  16. <div id="cadre">
  17. <div id="bar">
  18. <ul>
  19. <li><a class="retour" href="javascript:window.history.go(-1)" target="content">Retour</a></li>
  20. <li><a href="ba1.html" target="content">Ba1</a></li>
  21. <li><a href="ba2.html" target="content">Ba2</a></li>
  22. <li><a href="ba3.html" target="content">Ba3</a></li>
  23. <li><a href="ma1.html" target="content">Ma1</a></li>
  24. <li><a href="ma2.html" target="content">Ma2</a></li>
  25. <li><a href="about.html" target="content">About</a></li>
  26. </ul>
  27. </div>
  28. <div id="content">
  29. <iframe name="content" src="acceuil.html" allowtransparency="true" height="390px" width="655px" scrolling="no" scroll="no" style="border: none;"></iframe>
  30. </div>
  31. </div>
  32. </body>
  33. </html>



Le CSS de l'index
  1. body {background-color:#1A1818;}
  2.  
  3.  
  4. #cadre
  5. {
  6. background-image: url(photo/fond.jpg);
  7. background-repeat: no-repeat;
  8. border-right: 0.5px solid #666;
  9. border-bottom: 0.5px solid #666;
  10. margin-left: 17%;
  11. height: 439px;
  12. width: 669px;
  13. }
  14.  
  15. a, a:visited
  16. {color: #00F;}
  17.  
  18.  
  19. img {border: none;}
  20.  
  21. H1
  22. {color:#CCC;}
  23.  
  24. .trim1
  25. {padding-left:300px;
  26. padding-top: 83px;}
  27.  
  28.  
  29. .trim2
  30. {padding-left: 190px;
  31. padding-top:180px;}
  32.  
  33.  
  34. .trim1 a:hover
  35. {letter-spacing: 3px;}
  36.  
  37. .trim2 a:hover
  38. {letter-spacing: 3px;}
  39.  
  40.  
  41. /* BARRE SUPERIEURE */
  42.  
  43. #bar
  44. {
  45. font-family:Verdana, Geneva, sans-serif;
  46. background-image: url(photo/black.png);}
  47. #bar ul
  48. {
  49. text-align:center;
  50. }
  51. #bar ul li
  52. {
  53. width: 50px;
  54. padding-top: -1px;
  55. padding-bottom: 15px;
  56. list-style: none;
  57. display: inline;
  58. padding-right: 15px;
  59. padding-left: 15px;
  60. text-align:center;
  61. }
  62. #bar li:hover
  63. {
  64. background-image: url(photo/white.png);
  65. background-repeat:repeat;}
  66. .retour:hover
  67. {
  68. background-image:url(photo/black.png);
  69. background-repeat:repeat;}
  70.  
  71. #bar a,a:visited
  72. { color: #999;
  73. text-decoration:none;}
  74.  
  75. #bar a:hover
  76. { color:#000;}
  77.  
  78.  
  79. #content
  80. {
  81. padding-left: 5px;
  82. padding-right: 5px;
  83. padding-bottom: 5px;
  84. background-color: transparent;}
  85.  
  86.  
  87. .bar
  88. {padding-left: 200px;
  89. padding-top:150px;}
  90.  
  91. .bar a:hover
  92. {letter-spacing: 3px;}



et enfin le css du contenu
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. body
  5. {background: transparent;}
  6.  
  7. a, a:focus, a:hover
  8. {
  9. text-decoration:none;
  10. color:#222;}
  11.  
  12. .thumbtable
  13. {
  14. padding-left: 150px;}
  15.  
  16. .thumbtable td
  17. {
  18. padding-right: 50px;
  19. padding-bottom: 20px;}
  20.  
  21. .thumb img
  22. {
  23. height:150px;
  24. width: 150px;
  25. border: 1px solid #000;}
  26.  
  27. .thumb img:hover
  28. {
  29. height:150px;
  30. width: 150px;
  31. border: 1px solid #CCC;}
  32.  
  33.  
  34. .projets_table
  35. {
  36. padding-left: 130px;
  37. margin-top: -10px;
  38. }
  39. .projets_table td
  40. {
  41. padding-right: 50px;
  42. font-size:10px;
  43. background-color:#F60;
  44. }
  45.  
  46. .title_projet
  47. {
  48. float: right;
  49. border-left: 1px solid #AAA;
  50. border-bottom: 1px solid #AAA;
  51. font-size:15px;
  52. background-image:url(photo/white.png);
  53. padding-left: 2px;
  54. padding-right: 2px;}
  55.  
  56.  
  57. .me_left
  58. {width: 100px;
  59. height: 100px;
  60. background-image:url(photo/about/me_grey.jpg);
  61. display:block;
  62. float:left;
  63. margin: 5px 5px 5px 5px;}
  64.  
  65. .me_left:hover
  66. {
  67. background-image:url(photo/about/me_colored.jpg);}
  68.  
  69. .text
  70. { background-image:url(photo/white.png);
  71. padding: 5px 5px 5px 5px;
  72. text-align:center;
  73. font-family: Verdana, Geneva, sans-serif;
  74. font-size:10px;}



merci :) 
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Est-ce que tu pourrais fournir soit un lien vers le site, soit le contenu entier du HTML/CSS, ça sera plus simple ?!
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS