[Ecart frame haut et bas]

[Ecart frame haut et bas] - HTML/CSS - Programmation

Marsh Posté le 05-01-2005 à 10:01:14    

Bonjour j'ai un soucis avec 2 frames, lorsque je suis sous ie l'écart entre les
2 frames est minim mais sous firefox il est plus grand.
 
Je vous joint les bouts de code :
 
 
 
1er : index.html
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  5.     <meta name="generator" content="PSPad editor, www.pspad.com">
  6.     <title>
  7.     </title>
  8.    
  9.       <FRAMESET ROWS="115,*" BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>
  10.         <FRAME id="frameHaut" SRC="frameHaut.htm" NAME="haut" scrolling="no" resize="no" marginheight="0" marginwidth="0">
  11.         <FRAME id="frameBas" SRC="frameBas.htm" NAME="bas" >
  12.       </FRAMESET>
  13.   </head>
  14. </html>


 
 
 
2eme frameHaut
 
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <title>
  5.    
  6.     </title>
  7.     <link type="text/css" rel="stylesheet" href="css/styles.css">
  8.     <script src="index_files/scripts.js" language="javascript"></script>
  9.     <meta content="text/html; charset=UTF-8" http-equiv="Content-type">
  10.   </head>
  11.   <body>
  12.     <table class="CadreDuHaut">
  13.       <tbody>
  14.         <tr>
  15.           <td class="CadreDeGauche">
  16.             <img alt="link" src="images/image.jpeg">
  17.           </td>
  18.           <td class="CadreDuMilieu">
  19.             <div class="TitreApplication">
  20.            
  21.             </div>
  22.           </td>
  23.           <td class="CadreDeDroite">
  24.           </td>
  25.         </tr>
  26.       </tbody>
  27.     </table>
  28.     <div class="BarreDeLiens">
  29.       <a class="Accueil" href="http://www.google.fr">YYYYYY</a>
  30.       <a class="Fonctionnalites" href="#">DDDDD</a>
  31.       <a class="Fonctionnalites" href="#">AAAAA</a>
  32.       <a class="Fonctionnalites" href="#">BBBBB</a>
  33.       <a class="Fonctionnalites" href="#">CCCCC</a>
  34.       <a class="Fonctionnalites" href="#">DDDDD</a>
  35.       <a class="Fonctionnalites" href="#">EEEEE</a>
  36.      </div>
  37. </body>
  38. </html>


 
 
3eme frameBas
 
 
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <title>
  5.     </title>
  6.     <link type="text/css" rel="stylesheet" href="css/styles.css">
  7.     <script src="js/scripts.js" language="javascript"></script>
  8.     <meta content="text/html; charset=UTF-8" http-equiv="Content-type">
  9.   </head>
  11.   <body>
  12.     <div class="menuDeroulant" id="zoneDeroulant_2" style="display:block;background-color: #666699" >
  13.       <ul>
  14.         <li>
  15.         <a href="#">Sous-Menu 2.1</a></li>
  16.         <li>
  17.         <a href="#">Sous-Menu 2.2</a></li>
  18.         <li>
  19.         <a href="#">Sous-Menu 2.3</a></li>
  20.       </ul>
  21.     </div>
  22.   </body>
  23. </html>


 
la feuille de style placée sous css : styles.css
 

Code :
  1. body, td {
  2.     margin: 0;
  3.     padding: 0;
  4.     font-family: Verdana, Tahoma, Helvetica, Sans-Serif;
  5. }
  7. .CadreDuHaut {
  8.     background-color: #333333;
  9.     color: white;
  10.     border: none;
  11.     border-spacing: 0;
  12.     border-collapse: separate;
  13.     margin: 0;
  14.     padding: 0;
  15.     width: 100%;
  16. }
  18. .CadreDeGauche {
  19.     vertical-align: bottom;
  20.     text-align: left;
  21.     border-right: 1px solid #9999FF;
  22.     width: 70px;
  23.     padding: 0;
  24. }
  26. .CadreDuMilieu {
  27.     vertical-align: bottom;
  28.     text-align: left;
  29. }
  31. .CadreDeDroite {
  32.     vertical-align: bottom;
  33.     text-align: left;
  34. }
  36. .TitreApplication {
  37.    display: block;
  38.    padding-left: 3px;
  39.    padding-right: 3px;
  40.    padding-top: 2px;
  41.    padding-bottom: 2px;
  42.    padding-left: 10px;
  43.    font-family: Verdana; 
  44.    font-size: 18pt;
  45.    color: #F5F5F5;
  47. }
  49. .BarreDeLiens {
  50.    background-color: #666699;
  51.    border-top: 1px solid #9999FF;
  52.    border-left: 1px solid #9999FF;
  53.    border-right: 1px solid #003399;
  54.    border-bottom: 1px solid #003399;
  55.    display: block;
  56.    height: 20px;
  57.    font-size: 8pt;
  58.    color: White;
  59.    vertical-align: middle;
  60. }
  62. .Accueil {
  63.     float:left;
  64.     margin-left: 15px;
  65.     padding-top: 4px;
  66.     padding-bottom: 4px;
  67.     padding-left: 6px;
  68.     padding-right: 6px; 
  69.     font-size: 8pt;
  70.     color: White;
  71. }
  73. .Fonctionnalites {
  74.     float: right;
  75.     margin-right: 15px;
  76.     padding-top: 4px;
  77.     padding-bottom: 4px;
  78.     padding-left: 6px;
  79.     padding-right: 6px;
  80.     font-size: 8pt;
  81.      color: White;
  82. }
  84. .MenuDeroulant {
  85.    background-color: #FDF5E6;
  86.    margin-left: 800px;
  87. }
  89. .ContenuPagraphe {
  90.     background-color: white;
  91.     color: black;
  92.     margin-right: 210px;
  93.     min-height: 800px;
  94. }
  96. .Paragraphe {
  97.      font-weight: normal;
  98.    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  99. }
  101. .PositionCorps {
  102.     margin-top: 25px;
  103.     margin-left: 40px;
  104.     margin-right: 0px;
  105. }
  107. .EnteteDeSection {
  108.     display: block;
  109.     text-align:left;
  110.     color: darkslategray;
  111.     border-bottom:solid 1px #333333;
  112.     margin-left: -12px;
  113.     margin-right: 0px;
  114.     padding-left: 10px;
  115.     padding-right: 10px;
  116.     padding-top: 30px;
  117. }
  120. .PiedPage {
  121.     background-color: white;
  122.     color: black;
  123.     border-top: 1px solid;
  124.     margin-top: 30px;
  125.     margin-bottom: 10px;
  126.     margin-right: 210px;
  127.     margin-left: 30px;
  128.     padding-top: 1px;
  129.     padding-bottom: 3px;
  130.     padding-left: 10px;
  131.     padding-right: 10px;
  132.     font-size: 75%;
  133.     font-family: Verdana, Tahoma, Helvetica, Sans-Serif;
  134.     font-style: italic;
  135. }
  137. .Droits { 
  138.     font-family: Verdana;
  139.     font-style: italic;
  140.     font-size: 80%;
  141. }


 
 

une image jpeg sous images : image.jpeg de taille 168x85 pixels
 
 
Pourriez vous regarder et tester ce code ?, et si la meme erreur apparait
auriez vous la solution ?
 
 
Merci.
 
@+ Pierre.   :)

Reply

Marsh Posté le 05-01-2005 à 10:01:14   

Reply

Marsh Posté le 05-01-2005 à 10:02:34    

Marrant, ta page dans la Frame est XHTML 1.0 Strict, pourtant tu t'amuses à utiliser des frames :??: , c'est bien dommage...
 
Un conseil : c'est même pas la peine de tenter de faire quelque chose avec des frames, y'a trop de limitations et de truc qui font chier pour les utiliser...

Reply

Marsh Posté le 05-01-2005 à 10:24:15    

Ok, mon but est de faire apparaitre un menu déroulant dans l'autre frame, que me proposes tu à la place ??
 
@+ Pierre.

Reply

Marsh Posté le 05-01-2005 à 10:34:45    

Ben fait tout dans la même page...

Reply

Marsh Posté le 05-01-2005 à 10:40:42    

oui pourquoi pas, mais mon but final c'est d'avoir un menu fixe et un contenu de page dynamique (jsp ...)
@+ Pierre.

Reply

Marsh Posté le 05-01-2005 à 11:17:06    

et puis ?
 
Mise en page CSS ...
 
Tu fais ton menu dans un bloc que tu positionne tjrs au meme endroit, et que t'inclues ...
 
en php c'est faisable, en jsp ca doit l'etre aussi ...


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 05-01-2005 à 11:18:48    

Oui, les pseudo-frames côté serveur

Reply

Marsh Posté le 05-01-2005 à 11:21:29    

ok je vais voir, merci pour ces renseignements
 
@+ Pierre

Reply

Sujets relatifs:

Leave a Replay

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