hauteur d'un tableau et insertion d'iframe

hauteur d'un tableau et insertion d'iframe - HTML/CSS - Programmation

Marsh Posté le 04-09-2008 à 21:19:06    

bonjour
j'avance dans la restructuration de mon site et je rencontre deux problèmes
pour expliquer un peu les choses dans l'ordre :
j'ai fais un site qui fonctionne bien qui utilise une mise en page par tableau avec insertion d'une iframe dans une cellule
le tout fonctionne bien mais le code n'est pas très propre : tous les attribut des tableaux, cellule etc... sont dans le code html (j'ai fai un fichier css uniquement pour certains aspect comme un liseret autour d'un tableau, polices ...)
donc logiquement j'ai voulu épurer mon code html en mettant le plus de parametres possible dans le css
et la rien ne vas plus
 
 
je m'arrache les cheveux sur :  
- la hauteur du tableau au liseret rouge qui ne veux pas prendre la valeur height: 85%;
- la hauteur de la cellule contenant le iframe : quelle que soit sa hauteur (à la cellule) le iframe reste dans une rectangle beaucoup plus petit avec scrollbar
par avance merci si vous trouvez une solution et milles excuses pour la longueur
petite précision : j'ai tenté de mettre des div pour remplacer mes table, tr et td : exactement le même rendu (je deviens fou)  
 
 
 
j'oubliai : le but de l'opération et d'avoir :
 
un liseret rouge de 1 px qui fasse environ 99% de la page en largeur et 85% en hauteur
à l'interieur du liseret : toujours le même formatage : le titre en haut à gauche (une image png) - juste en dessous des onglets de liens (une images png avec map) - en dessous : le contenu informatif de la page (une iframe contenant les infos - si c'est trop long par rapport au liseret : aparition d'un scrollbar)
 
en dehors du liseret : juste en dessous (presque collé à lui) à gauche "page précédente" au centre "retour accueil" et à droite "page suivante"
en dessous une longue cellule (meme largeur que le liseret rouge) avec liseret noir recapitulant le cheminement (style : vous êtes ici : accueil > rubrique 1 > sous-rubrique 1-a)
 
 
pour voir le résultat que j'arrive à avoir (avec du code "sale" ) : http://www.ac-nancy-metz.fr/Pres-etab/CollJJRousseauHomecourt/    (rubrique administration - infos administratives)  
 
 
 
 
donc si quelqu'un arrive à m'aider à me dépatouiller - merci d'avance
 
 
 
 
 
 
 
 
je vous met le code des pages
pour commencer : le code "sale mais qui marche"
 
 
 
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>collège jean-Jacques Rousseau - Homécourt</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <link rel="stylesheet" type="text/css" href= "styles01.css">
  7. <script language="JavaScript" type="text/JavaScript">
  8. <!--
  9. function presence_frame()
  10. {
  11. if (!(parent.frames["gauche"] && parent.frames["centre"] && parent.frames["droite"]))
  12. { location.href="frameset.htm?" + location.pathname;
  13. }
  14. }
  15. function MM_reloadPage(init) { //reloads the window if Nav4 resized
  16. if (init==true) with (navigator) {if ((appName=="Netscape"&&(parseInt(appVersion)==4)) {
  17. document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  18. else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
  19. }
  20. MM_reloadPage(true);
  21. function MM_preloadImages() { //v3.0
  22. var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  23. var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  24. if (a.indexOf("#"!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  25. }
  26. //-->
  27. </script>
  28. </head>
  29. <body onLoad="presence_frame();">
  30. <table width="99%" height="80%" border="0" align="center" cellpadding="0" cellspacing="0" class="Style_calque">
  31. <tr>
  32. <td height="81" align="left" valign="top"><img src="img/titres/administration_vert.png" alt="administration" width="480" height="81"> <div align="center"></div> </td>
  33. </tr>
  34. <tr>
  35. <td height="55"><img src="img/liens/administration_002.png" width="587" height="55" border="0" usemap="#Map"></td>
  36. </tr>
  37. <tr>
  38. <td colspan="2" valign="top"><IFRAME SRC="horraires.html" frameborder="0" width="99%" height="99%" align="left"></IFRAME></td>
  39. </tr>
  40. </table>
  41. <table width="99%" border="0" align="center" class="Style_grasbleu">
  42. <tr>
  43. <td width="38%"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif" class="Style_grasbleu"><a href="administration_001.htm" class="Style_grasbleu">page
  44. pr&eacute;c&eacute;dente</a></font></td>
  45. <td width="28%"><div align="center"><a href="une.htm" target="centre" class="Style_grasbleu">accueil</a></div></td>
  46. <td width="34%"><div align="right"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif" class="Style_grasbleu"><a href="administration_003.htm" class="Style_grasbleu">page
  47. suivante</a></font></div>
  48. </td>
  49. </tr>
  50. </table>
  51. <br>
  52. <table width="99%" border="0" align="center" cellpadding="0" cellspacing="0" class="style_calque2">
  53. <tr>
  54. <td width=90 class="Style_petit_text_gras"> -Vous &ecirc;tes ici : </td>
  55. <td width=50 class="Style_liens_bas_de_page"><a href="une.htm" class="Style_liens_bas_de_page">Accueil</a></td>
  56. <td width=20 class="Style_titre_rouge">&gt;</td>
  57. <td width="87" class="Style_liens_bas_de_page"><a href="administration_001.htm" class="Style_liens_bas_de_page">Administration</a></td>
  58. <td width="20" class="Style_titre_rouge">&gt;</td>
  59. <td width="243" class="Style_liens_bas_de_page"><a href="administration_002.htm" class="Style_liens_bas_de_page">Infos
  60. administratives</a></td>
  61. <td width="100" class="Style_titre_rouge"> </td>
  62. <td width="100" class="Style_liens_bas_de_page"> </td>
  63. <td width="100" class="Style_titre_rouge"> </td>
  64. <td width="100" class="Style_liens_bas_de_page"> </td>
  65. </tr>
  66. </table>
  67. <map name="Map">
  68. <area shape="rect" coords="152,7,292,47" href="administration_002.htm" target="centre" alt="infos administratives">
  69. <area shape="rect" coords="302,6,438,50" href="administration_003.htm" target="centre" alt="gestion">
  70. <area shape="rect" coords="448,4,585,49" href="administration_004.htm" target="centre" alt="conseil d'administration">
  71. <area shape="rect" coords="2,5,141,48" href="administration_001.htm" target="centre" alt="le mot du principal">
  72. </map>
  73. </body>
  74. </html>


 
 
 
et le css qui lui est associé
 
 
 

Code :
  1. /* les differents styles css du site*/
  2. /* exemple*/
  3. .Style0 {
  4. FONT-FAMILY: Arial, Helvetica, sans-serif;
  5. FONT-SIZE: 12pt;
  6. COLOR: #999999;
  7. text-decoration: none;
  8. }
  9. /* style utilisé pour les menus texte en gris*/
  10. .Style_menu {
  11. FONT-FAMILY: Arial, Helvetica, sans-serif;
  12. FONT-SIZE: 12pt;
  13. COLOR: #999999;
  14. text-decoration: none;
  15. }
  16. /* style utilisé pour les annotations*/
  17. .Style_petit_text {
  18. FONT-FAMILY: Arial, Helvetica, sans-serif;
  19. FONT-SIZE: 9pt;
  20. COLOR: #000000;
  21. text-decoration: none;
  22. }
  23. /* style utilisé pour les annotations en gras*/
  24. .Style_petit_text_gras {
  25. FONT-WEIGHT: bold;
  26. FONT-FAMILY: Arial, Helvetica, sans-serif;
  27. FONT-SIZE: 9pt;
  28. COLOR: #000000;
  29. text-decoration: none;
  30. }
  32. /* style utilisé pour les liens en bas de page*/
  33. .Style_liens_bas_de_page {
  34. FONT-FAMILY: Arial, Helvetica, sans-serif;
  35. FONT-SIZE: 9pt;
  36. COLOR: #0000FF;
  37. text-decoration: none;
  38. }
  40. /* style utilisé pour le texte*/
  41. .Style_text {
  42. FONT-FAMILY: Arial, Helvetica, sans-serif;
  43. FONT-SIZE: 12pt;
  44. COLOR: #000000;
  45. text-decoration: none;
  46. }
  47. /* style utilisé pour le texte des onglets */
  48. .Style_onglet {
  49. FONT-WEIGHT: bold;
  50. FONT-FAMILY: Arial, Helvetica, sans-serif;
  51. FONT-SIZE: 14pt;
  52. COLOR: #000000;
  53. text-decoration: none;
  54. }
  55. /* style utilisé pour le texte des onglets inactifs */
  56. .Style_onglet_inactif {
  57. background-color: #666666;
  58. FONT-WEIGHT: bold;
  59. FONT-FAMILY: Arial, Helvetica, sans-serif;
  60. FONT-SIZE: 14pt;
  61. COLOR: #ffffff;
  62. text-decoration: none;
  63. }
  64. /* style utilisé pour faire des lien bleu sans soulignement*/
  65. .Style_grasbleu {
  66. text-decoration: none;
  67. FONT-WEIGHT: bold;
  68. FONT-FAMILY: Arial, Helvetica, sans-serif;
  69. FONT-SIZE: 12pt;
  70. COLOR: #0000FF;
  71. }
  72. /* style utilisé pour faire des lien bleu sans soulignement*/
  73. .Style_liensuivantprecedent {
  74. text-decoration: none;
  75. FONT-WEIGHT: bold;
  76. FONT-FAMILY: Arial, Helvetica, sans-serif;
  77. FONT-SIZE: 12pt;
  78. COLOR: #0000FF;
  79. }
  80. /* style utilisé pour faire des lien noir sans soulignement*/
  81. .Style_grasnoir {
  82. FONT-WEIGHT: bold;
  83. FONT-FAMILY: Arial, Helvetica, sans-serif;
  84. FONT-SIZE: 12pt;
  85. COLOR: #000000;
  86. text-decoration: none;
  87. }
  88. /* style utilisé pour faire des lien inactifs gris sans soulignement*/
  89. .Style_grasgris {
  90. FONT-WEIGHT: bold;
  91. FONT-FAMILY: Arial, Helvetica, sans-serif;
  92. FONT-SIZE: 12pt;
  93. COLOR: #666666;
  94. text-decoration: none;
  95. }
  96. /* style utilisé pour faire des titres en noir*/
  97. .Style_titre_noir {
  98. FONT-WEIGHT: bold;
  99. text-align: center;
  100. FONT-FAMILY: Arial, Helvetica, sans-serif;
  101. FONT-SIZE: 14pt;
  102. COLOR: #000000;
  103. text-decoration: none;
  104. }
  105. /* style utilisé pour faire des titres en rouge*/
  106. .Style_titre_rouge {
  107. FONT-WEIGHT: bold;
  108. text-align: center;
  109. FONT-FAMILY: Arial, Helvetica, sans-serif;
  110. FONT-SIZE: 14pt;
  111. COLOR: #FF0000;
  112. text-decoration: none;
  113. }
  114. /* liseret noir autour d'un tableau*/
  115. .style_calque2 {
  116. border: 1px solid black;
  117. }
  119. /* liseret rouge autour d'un tableau*/
  120. .style_calque {
  121. border: 1px solid red;
  122. FONT-FAMILY: Arial, Helvetica, sans-serif;
  123. FONT-SIZE: 12pt;
  124. COLOR: #000000;
  125. text-decoration: none;
  126. }


 
 
 
et maintenant le code "propre qui marche pas"
 
 

Code :
  1. Code :
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>collège jean-Jacques Rousseau - Homécourt</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <meta http-equiv="Content-Script-Type" content="text/javascript">
  8. <link rel="stylesheet" type="text/css" href= "styles01.css">
  9. <script src="scripts/javascripts.js" type="text/javascript"></script>
  10. <SCRIPT LANGUAGE="JavaScript" type="text/javascript">
  11. i1 = new Image();
  12. i1.src = "img/titres/administration_vert.png";
  13. i2 = new Image();
  14. i2.src = "img/liens/onglets/administration_001.png";
  15. </SCRIPT>
  16. </head>
  17. <body onLoad="presence_frame();">
  18. <table id="rouge">
  19. <tr>
  20. <td id="titre"><img src="img/titres/administration_vert.png" alt="titre de la page" width="480" height="81"></td>
  21. </tr>
  22. <tr>
  23. <td id="onglets" ><img src="img/liens/onglets/administration_002.png" alt="onglets" width="587" height="55" border="0" usemap="#Map"></td>
  24. </tr>
  25. <tr>
  26. <td id="iframe"><IFRAME src="iframes/modele_iframe_avec_menu.htm" frameborder="0" width="100%" height="99%" align="left"></IFRAME></td>
  27. </tr>
  28. <tr>
  29. <td id="bas_du_tableau"> </td>
  30. </tr>
  31. </table>
  32. <map name="Map">
  33. <area shape="rect" coords="3,1,145,49" href="#" alt="onglet">
  34. <area shape="rect" coords="149,2,292,50" href="#" alt="onglet">
  35. <area shape="rect" coords="294,1,439,49" href="#" alt="onglet">
  36. <area shape="rect" coords="441,2,584,48" href="#" alt="onglet">
  37. </map>
  38. <table id="nav">
  39. <tr>
  40. <td id="page_precedente"><a href="javascript:history.go(-1);">page pr&eacute;c&eacute;dente</a></td>
  41. <td id="lien_accueil"><a href="une.htm" target="centre">accueil</a></td>
  42. <td id="page_suivante"><a href="javascript:history.go(1);">page suivante</a></td>
  43. </tr>
  44. </table>
  45. <table id="ici">
  46. <tr>
  47. <td id="vous_etes_ici">Vous &ecirc;tes ici : <a href="#">Lien 1</a> <b>&gt;</b> <a href="#">Lien 2</a> <b>&gt;</b> <a href="#">Lien 3</a> <b>&gt;</b> <a href="#">Lien 4</a> </td>
  48. </tr>
  49. </table>
  51. </body>
  52. </html>


 
 
et son css
 
 

Code :
  1. /* les differents styles css du site*/
  2. /* exemple*/
  3. .Style0 {
  4. FONT-FAMILY: Arial, Helvetica, sans-serif;
  5. FONT-SIZE: 12pt;
  6. COLOR: #999999;
  7. text-decoration: none;
  8. }
  9. /* MENU DE GAUCHE */
  10. /* style utilisé pour les menus texte en gris*/
  11. .Style_menu_gris {
  12. FONT-FAMILY: Arial, Helvetica, sans-serif;
  13. FONT-SIZE: 12pt;
  14. COLOR: #999999;
  15. text-decoration: none;
  16. font-style: normal;
  17. font-weight: normal;
  18. }
  19. /* TABLEAU VOUS ETES ICI */
  20. /* style utilisé pour les liens en bas de page dans la zone vous êtes ici*/
  21. .Style_liens_vous_etes_ici {
  22. FONT-FAMILY: Arial, Helvetica, sans-serif;
  23. FONT-SIZE: 9pt;
  24. COLOR: #0000FF;
  25. text-decoration: none;
  26. }
  27. /* style utilisé pour le texte vous êtes ici*/
  28. .Style_texte_vous_etes_ici {
  29. FONT-FAMILY: Arial, Helvetica, sans-serif;
  30. FONT-SIZE: 9pt;
  31. COLOR: #000000;
  32. text-decoration: none;
  33. font-weight: bold;
  34. }
  35. /* style utilisé pour les chevron de la partie vous êtes ici*/
  36. .Style_chevron_vous_etes_ici {
  37. FONT-FAMILY: Arial, Helvetica, sans-serif;
  38. FONT-SIZE: 14pt;
  39. COLOR: #FF0000;
  40. text-decoration: none;
  41. font-weight: bold;
  42. }
  43. /* PARTIE CENTRALE */
  44. /* style utilisé pour faire des lien bleu sans soulignement*/
  45. .Style_liensuivantprecedent {
  46. text-decoration: none;
  47. FONT-WEIGHT: bold;
  48. FONT-FAMILY: Arial, Helvetica, sans-serif;
  49. FONT-SIZE: 10pt;
  50. COLOR: #0000FF;
  51. }
  52. /* style utilisé pour faire du texte en noir*/
  53. .Style_texte_noir {
  54. FONT-WEIGHT: normal;
  55. text-align: left;
  56. FONT-FAMILY: Arial, Helvetica, sans-serif;
  57. FONT-SIZE: 10pt;
  58. COLOR: #000000;
  59. text-decoration: none;
  60. vertical-align: top;
  61. }
  62. /* style utilisé pour faire du texte en noir italique*/
  63. .Style_texte_noir_italique {
  64. FONT-WEIGHT: normal;
  65. text-align: left;
  66. FONT-FAMILY: Arial, Helvetica, sans-serif;
  67. FONT-SIZE: 10pt;
  68. COLOR: #000000;
  69. text-decoration: none;
  70. font-style: italic;
  71. }
  72. /* style utilisé pour faire des titres en rouge*/
  73. .Style_titre_rouge {
  74. FONT-WEIGHT: bold;
  75. text-align: left;
  76. FONT-FAMILY: Arial, Helvetica, sans-serif;
  77. FONT-SIZE: 14pt;
  78. COLOR: #FF0000;
  79. text-decoration: none;
  80. }
  81. /* liseret noir autour d'un tableau*/
  82. .style_tableau_liseret_noir {
  83. border: 1px solid black;
  84. }
  85. /* liseret rouge autour d'un tableau*/
  86. .style_tableau_liseret_rouge {
  87. border: 1px solid red;
  88. }
  89. /* style utilisé pour remplacer h1*/
  90. .H1 {
  91. FONT-WEIGHT: bold;
  92. text-align: left;
  93. FONT-FAMILY: Arial, Helvetica, sans-serif;
  94. FONT-SIZE: 16pt;
  95. COLOR: #000000;
  96. text-decoration: none;
  97. }
  98. /* style utilisé pour remplacer h2*/
  99. .H2 {
  100. FONT-WEIGHT: bold;
  101. text-align: left;
  102. FONT-FAMILY: Arial, Helvetica, sans-serif;
  103. FONT-SIZE: 14pt;
  104. COLOR: #000000;
  105. text-decoration: none;
  106. }
  107. /* style utilisé pour remplacer h3*/
  108. .H3 {
  109. FONT-WEIGHT: bold;
  110. text-align: left;
  111. FONT-FAMILY: Arial, Helvetica, sans-serif;
  112. FONT-SIZE: 12pt;
  113. COLOR: #000000;
  114. text-decoration: none;
  115. }
  116. /* style utilisé pour remplacer h4*/
  117. .H4 {
  118. FONT-WEIGHT: bold;
  119. text-align: left;
  120. FONT-FAMILY: Arial, Helvetica, sans-serif;
  121. FONT-SIZE: 10pt;
  122. COLOR: #000000;
  123. text-decoration: none;
  124. }
  125. /* style utilisé pour remplacer h5*/
  126. .H5 {
  127. FONT-WEIGHT: bold;
  128. text-align: left;
  129. FONT-FAMILY: Arial, Helvetica, sans-serif;
  130. FONT-SIZE: 8pt;
  131. COLOR: #000000;
  132. text-decoration: none;
  133. }
  134. /* style utilisé pour remplacer h6*/
  135. .H6 {
  136. FONT-WEIGHT: bold;
  137. text-align: left;
  138. FONT-FAMILY: Arial, Helvetica, sans-serif;
  139. FONT-SIZE: 5pt;
  140. COLOR: #000000;
  141. text-decoration: none;
  142. }
  143. #a2 {
  144. text-decoration: none;
  145. FONT-WEIGHT: bold;
  146. FONT-FAMILY: Arial, Helvetica, sans-serif;
  147. FONT-SIZE: 10pt;
  148. COLOR: #0000FF;
  149. }
  150. /* styles utilisés pour la création d'un menu texte */
  151. ul#menu {
  152. list-style-type: none;
  153. }
  154. ul#menu li {
  155. float: left;
  156. }
  157. ul#menu b {
  158. float: left;
  159. margin: 0 2px;
  160. padding: 5px 15px;
  161. text-align: center;
  162. border: 1px solid black;
  163. text-decoration: none;
  164. color: #000000;
  165. background-color: #FFFFFF;
  166. font-family: Arial, Helvetica, sans-serif;
  167. font-size: 14px;
  168. }
  169. ul#menu a {
  170. float: left;
  171. margin: 0 2px;
  172. padding: 5px 15px;
  173. text-align: center;
  174. border: 1px solid black;
  175. text-decoration: none;
  176. color: #FFFFFF;
  177. background-color: #990000;
  178. font-family: Arial, Helvetica, sans-serif;
  179. font-size: 14px;
  180. }
  181. ul#menu a:hover {
  182. border: 1px solid black;
  183. background-color: #FF0000;
  184. }
  185. /* styles utilisés pour faire un liseret noir autour */
  186. table#noir {
  187. border: 1px solid black;
  188. }
  189. /* TABLEAUX DE MISE EN PAGE DES PAGES CENTRALES DU SITE */
  190. /* I) TABLEAU PRINCIPAL */
  191. /* définition du tableau */
  192. table#rouge {
  193. border-width:1px;
  194. border-style:solid;
  195. border-color:red;
  196. border-collapse:collapse;
  197. width:99%;
  198. height:85%;
  199. text-align: left;
  200. vertical-align:top;
  201. margin: 0px;
  202. padding:0px;
  203. }
  204. /* définition de la premiere cellule du tableau ou se trouve le titre (fichier image) */
  205. td#titre {
  206. height:81px;
  207. width:100%;
  208. text-align: left;
  209. vertical-align: top;
  210. padding:0px;
  211. }
  212. /* définition de la seconde cellule du tableau ou se trouvent les onglets de navigation (fichier image) */
  213. td#onglets {
  214. height:55px;
  215. width:100%;
  216. text-align: left;
  217. vertical-align: top;
  218. padding:0px;
  219. }
  220. /* définition de la troisième cellule du tableau ou se trouve le contenu informatif de la page (généralement un lien de type iframe) */
  221. td#iframe {
  222. width:100%;
  223. padding:0px;
  224. }
  225. /* définition de la quatrième cellule du tableau pour laisser un espace blanc en dessous du contenu */
  226. td#bas_du_tableau {
  227. height:5px;
  228. padding:0px;
  229. }
  231. /* II) TABLEAU DE NAVIGATION suivant / précédent / retour accueil */
  232. /* définition du tableau */
  233. table#nav {
  234. width:99%;
  235. margin: 0px;
  236. padding:0px;
  237. }
  238. /* définition de la premiere cellule du tableau : page précédente */
  239. td#page_precedente {
  240. height:25px;
  241. width:33%;
  242. text-align: left;
  243. vertical-align: top;
  244. padding:0px;
  245. }
  246. /* définition du texte dans la cellule */
  247. td#page_precedente a {
  248. text-decoration: none;
  249. FONT-WEIGHT: bold;
  250. FONT-FAMILY: Arial, Helvetica, sans-serif;
  251. FONT-SIZE: 10pt;
  252. COLOR: #0000FF;
  253. }
  254. td#page_precedente a:hover {
  255. text-decoration: none;
  256. FONT-WEIGHT: bold;
  257. FONT-FAMILY: Arial, Helvetica, sans-serif;
  258. FONT-SIZE: 10pt;
  259. COLOR: red;
  260. }
  261. /* définition de la seconde cellule du tableau : retour accueil */
  262. td#lien_accueil {
  263. height:25px;
  264. text-align: center;
  265. vertical-align: top;
  266. padding:0px;
  267. }
  268. /* définition du texte dans la cellule */
  269. td#lien_accueil a {
  270. text-decoration: none;
  271. FONT-WEIGHT: bold;
  272. FONT-FAMILY: Arial, Helvetica, sans-serif;
  273. FONT-SIZE: 10pt;
  274. COLOR: #0000FF;
  275. }
  276. td#lien_accueil a:hover {
  277. text-decoration: none;
  278. FONT-WEIGHT: bold;
  279. FONT-FAMILY: Arial, Helvetica, sans-serif;
  280. FONT-SIZE: 10pt;
  281. COLOR: red;
  282. }
  283. /* définition de la troisième cellule du tableau : page suivante */
  284. td#page_suivante {
  285. height:25px;
  286. width:33%;
  287. text-align: right;
  288. vertical-align: top;
  289. padding:0px;
  290. }
  291. /* définition du texte dans la cellule */
  292. td#page_suivante a {
  293. text-decoration: none;
  294. FONT-WEIGHT: bold;
  295. FONT-FAMILY: Arial, Helvetica, sans-serif;
  296. FONT-SIZE: 10pt;
  297. COLOR: #0000FF;
  298. }
  299. td#page_suivante a:hover {
  300. text-decoration: none;
  301. FONT-WEIGHT: bold;
  302. FONT-FAMILY: Arial, Helvetica, sans-serif;
  303. FONT-SIZE: 10pt;
  304. COLOR: red;
  305. }
  307. /* III) TABLEAU DE LIENS "vous êtes ici" */
  308. /* définition du tableau */
  309. table#ici {
  310. border-width:1px;
  311. border-style:solid;
  312. border-color:black;
  313. width:99%;
  314. height:25px;
  315. text-align: left;
  316. vertical-align:middle;
  317. margin: 1px;
  318. padding:1px;
  319. }
  320. /* définition de la cellule du tableau */
  321. td#vous_etes_ici {
  322. height:25px;
  323. width:100%;
  324. text-align: left;
  325. vertical-align:middle;
  326. FONT-FAMILY: Arial, Helvetica, sans-serif;
  327. FONT-SIZE: 9pt;
  328. COLOR: #000000;
  329. text-decoration: none;
  330. font-weight: bold;
  331. }
  332. td#vous_etes_ici a {
  333. text-align: left;
  334. vertical-align:middle;
  335. FONT-FAMILY: Arial, Helvetica, sans-serif;
  336. FONT-SIZE: 9pt;
  337. COLOR: #0000FF;
  338. text-decoration: none;
  339. }
  340. td#vous_etes_ici a:hover {
  341. text-align: left;
  342. vertical-align:middle;
  343. FONT-FAMILY: Arial, Helvetica, sans-serif;
  344. FONT-SIZE: 9pt;
  345. COLOR: red;
  346. text-decoration: none;
  347. }
  348. td#vous_etes_ici b {
  349. text-align: left;
  350. vertical-align:middle;
  351. FONT-FAMILY: Arial, Helvetica, sans-serif;
  352. FONT-SIZE: 14pt;
  353. COLOR: #FF0000;
  354. text-decoration: none;
  355. font-weight: bold;
  356. }


Message édité par scottsummer le 04-09-2008 à 23:42:39
Reply

Marsh Posté le 04-09-2008 à 21:19:06   

Reply

Marsh Posté le 05-09-2008 à 17:35:24    

bon ... ça avance un peu
c'est pas encore nickel mais ça va dans le bon sens
 
 
voici un code un peu plus simple
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Document sans titre</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <script language="JavaScript" type="text/JavaScript">
  7. <!--
  8. function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  9.   if (init==true) with (navigator) {if ((appName=="Netscape" )&&(parseInt(appVersion)==4)) {
  10.     document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  11.   else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
  12. }
  13. MM_reloadPage(true);
  14. //-->
  15. </script>
  16. </head>
  18. <body>
  19. <div id="Layer1" style=" width:100%; height:85%; border-width:1px; border-style:solid; border-color:red; ">
  20. <div id="Layer2" style=" width:100%; height:20%; background-color: yellow; ">
  21. <img src="img/titres/administration_vert.png"><br>
  22. <img src="img/liens/onglets/administration_002.png">
  23. </div>
  24. <div id="Layer3" style=" width:100%; height:80%; background-color: blue; ">
  25. <iframe src="iframes/modele_iframe_avec_menu.htm" width="100%" height="99%"></iframe>
  26. </div>
  27. </div>
  28. </body>
  29. </html>


---------------
mon site ouaib : http://photoscott54.perso.neuf.fr
Reply

Sujets relatifs:

Leave a Replay

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