Problème Hauteur en %

Problème Hauteur en % - HTML/CSS - Programmation

Marsh Posté le 10-06-2005 à 14:41:57    

Bonjour,
 
Bon, j'ai un problème qui me titille depuis maintenant quelques jours, je n'arrive pas à le résoudre.
 
Voilà, donc j'ai fait une page qui est divisée en 5 parties :
 
_une entete
_une colonne avec menu a gauche
_une colonne avec menu a droite
_un pied de page
_et un contenu au centre
 
J'ai réglé ces parties de la sorte :
 
_colonne gauche >> height:100%; width:160px;
_colonne droite >> height:100%; width:160px;
_pied de page >> height:30px; width:100%; bottom:0px;
_centre (cadran)>> height:50%; width:50%;
 
Bon, quand je fais un aperçu dans ie (F12) sous Dreamweaver, tout marche nikel, les colonnes font bien la hauteur de la page etc, mon cadran du centre, s'adapte a son contenu, le pied de page est toujours bien en bas etc, enfin tout se passe bien.
 
Le problème : ma page contient des bout de code en asp, je la test donc en local en utilisant http://localhost/dossier/test.asp
 
Bon, ca marche MAIS les hauteur en % ne sont plus pris en compte. donc mes colonnes n'apparaisse meme plus. Mon pied de page reste bloqué au meme endroit, mon cadran n'apparai plus non plus, enfin bref, tout ce qui a des hauteur en % ne marchent plus.
 
Je ne sais pas comment résoudre ce probleme.
 
Help me !!! please

Reply

Marsh Posté le 10-06-2005 à 14:41:57   

Reply

Marsh Posté le 10-06-2005 à 14:54:45    

quand je clique sur le lien il me dit qu'il trouve pas la page... :cry:

Reply

Marsh Posté le 10-06-2005 à 14:55:03    

:ange:

Reply

Marsh Posté le 10-06-2005 à 15:00:21    

file nous le code HTML généré de ta page et le code CSS de ta page
MMe soleil est en vacances donc elle peut po nous aider

Reply

Marsh Posté le 10-06-2005 à 16:31:12    

Voici ma page asp :
 

Code :
  1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  5. <!-- ============================================== HEAD ================================================================ -->
  7. <head>
  8. <title>=== TRANSFERT ===</title>
  9. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  11. <!-- Appel de la CSS externe -->
  12. <link rel="stylesheet" href="transfert.css">
  16. <!-- Script pour intégrer des images png n'importe où dans le document -->
  17. <script language="JavaScript">
  18. function correctPNG()
  19. {
  20. for(var i=0; i<document.images.length; i++)
  21. {
  22. var img = document.images[i]
  23. var imgName = img.src.toUpperCase()
  24. if (imgName.substring(imgName.length-3, imgName.length) == "PNG" )
  25. {
  26. var imgID = (img.id) ? "id='" + img.id + "' " : ""
  27. var imgClass = (img.className) ? "class='" + img.className + "' " : ""
  28. var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
  29. var imgStyle = "display:inline-block;" + img.style.cssText
  30. var imgAttribs = img.attributes;
  31. for (var j=0; j<imgAttribs.length; j++)
  32. {
  33. var imgAttrib = imgAttribs[j];
  34. if (imgAttrib.nodeName == "align" )
  35. {
  36. if (imgAttrib.nodeValue == "left" ) imgStyle = "float:left;" + imgStyle
  37. if (imgAttrib.nodeValue == "right" ) imgStyle = "float:right;" + imgStyle
  38. break
  39. }
  40. }
  41. var strNewHTML = "<span " + imgID + imgClass + imgTitle
  42. strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
  43. strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  44. strNewHTML += "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
  45. img.outerHTML = strNewHTML
  46. i = i-1
  47. }
  48. }
  49. }
  50. window.attachEvent("onload", correctPNG);
  52. /* SCRIPT POUR L'HEURE */
  53. Today = new Date;
  54. Heure = Today.getHours();
  55. Min = Today.getMinutes();
  56. Heure = Heure + "h" + Min ;
  57. /* FIN SCRIPT POUR L'HEURE */
  59. </script>
  61. </head>
  65. <!-- ============================================== BODY ================================================================ -->
  67. <body class="nospace">
  69. <!-- ============ ENTETE ============ -->
  70. <div class="entete-gauche"></div>
  71. <div class="entete-droite"> </div>
  73. <div class="entete">
  74.   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="600" height="140">
  75.         <param name="movie" value="bandeau-seche.swf">
  76.         <param name="quality" value="high">
  77.         <embed src="bandeau-seche.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="140"></embed>
  78.       </object>
  79. </div>
  82. <!-- ============ BANDE INFORMATION ============ -->
  83. <div class="bande-info">
  84.   <div align="center"><img src="barre-info.png"></div>
  85. </div>
  86. <div class="image-haut-gauche"><img src="images/hg-sous-logo.jpg"></div>
  87. <div class="cadran-heure"><img src="images/cadran-heure.png"></div>
  89. <!-- ============ MENU GAUCHE ============ -->
  90. <div class="bande-menu-gauche"></div>
  91. <div class="sous-menu-gauche"></div>
  93. <div class="bouton-annuaire">
  94.   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="140" height="30">
  95.         <param name="movie" value="bouton-annuaire.swf">
  96.         <param name="quality" value="high">
  97.  <param name="wmode" value="transparent" />
  98.         <embed src="bouton-annuaire.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="140" height="30"></embed>
  99.       </object>
  100. </div>
  102. <div class="bouton-transfert">
  103.   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="140" height="30">
  104.         <param name="movie" value="bouton-transfert.swf">
  105.         <param name="quality" value="high">
  106.  <param name="wmode" value="transparent" />
  107.         <embed src="bouton-transfert.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="140" height="30"></embed>
  108.       </object>
  109. </div>
  111. <div class="bouton-meteo">
  112.   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="140" height="30">
  113.         <param name="movie" value="bouton-meteo.swf">
  114.         <param name="quality" value="high">
  115.  <param name="wmode" value="transparent" />
  116.         <embed src="bouton-meteo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="140" height="30"></embed>
  117.       </object>
  118. </div>
  120. <div class="bouton-aides">
  121.   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="140" height="30">
  122.         <param name="movie" value="bouton-aides.swf">
  123.         <param name="quality" value="high">
  124.  <param name="wmode" value="transparent" />
  125.         <embed src="bouton-aides.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="140" height="30"></embed>
  126.       </object>
  127. </div>
  129. <div class="bouton-infos">
  130.   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="140" height="30">
  131.         <param name="movie" value="bouton-infos.swf">
  132.         <param name="quality" value="high">
  133.  <param name="wmode" value="transparent" />
  134.         <embed src="bouton-infos.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="140" height="30"></embed>
  135.       </object>
  136. </div>
  138. <div class="bouton-outils">
  139.   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="140" height="30">
  140.         <param name="movie" value="bouton-outils.swf">
  141.         <param name="quality" value="high">
  142.  <param name="wmode" value="transparent" />
  143.         <embed src="bouton-outils.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="140" height="30"></embed>
  144.       </object>
  145. </div>
  147. <!-- ============ MENU DROITE ============ -->
  148. <div class="bande-menu-droite"></div>
  149. <div class="sous-menu-droite"></div>
  150. <div class="sous-menu-droite2"></div>
  152. <!-- ============ CADRANS CENTRE ============ -->
  154. <div class="fond-centre-titre">
  155. <div align="center">Transfert de fichiers</div>
  156. </div>
  158. <div class="fond-centre"></div>
  160. <div class="cadran-centre1"><table width="100%" height="60px"border="0" cellspacing="0" cellpadding="0">
  161.   <tr>
  162.     <td width="2%">&nbsp;</td>
  163.     <td width="68%"><input type="file" name="file" size="29"></td>
  164.     <td width="30%"><input type="submit" name="upload" value="Transférer le fichier"></td>
  165.   </tr>
  166.     <tr>
  167.       <td>&nbsp;</td>
  168.       <td><input type="text" name="textfield" size="29">
  169.         <input type="submit" name="dossier" value="Cr&eacute;er un dossier"></td>
  170.       <td>&nbsp;</td>
  171.     </tr>
  172. </table>
  173. </div>
  179. <!-- =========================================== CODE ASP QUI AFFICHE LA LISTE DES FICHIERS D'UN DOSSIER ============================= -->
  180. <div class="cadran-listing">
  182. <% response.expires = "-1" %>
  183. <%
  184. Dim dossier, chemin, dossierParent , intFich, intRep
  185. Set objFs = Server.CreateObject("Scripting.FileSystemObject" ) 
  187. 'Nous créons ici une instance du composant FileSystemObject sur le serveur.
  189. dossier = Request.QueryString("dossier" )
  191. 'La variable dossier contient le chemin du répertoire virtuel à parcourir;
  192. 'sa valeur par défaut est la racine de votre “home directory” ou répertoire de base. 
  194. chemin = Server.MapPath(dossier&"/" )
  196. 'Nous utilisons la méthode MapPath de l’objet Server qui permet de retrouver le chemin réel
  197. 'correspondant au répertoire virtuel.
  199. set objDossier = objFs.getFolder(chemin) %>
  201. <!--Ici nous créons un objet Folder qui possède des propriétés de manipulation des répertoires.-->
  203. <%if dossier <> "" Then
  204. dossierParent = Left(dossier, inStrRev(dossier, "/" )-1) %>
  206. <% end if %>
  208. <!--On affiche un lien vers le répertoire parent uniquement si on ne se trouve pas à la racine.
  209. Mais auparavant, il nous faut supprimer la partie de la chaîne qui correspond au dernier répertoire. -->
  212. <!-- REPERTOIRE PARENT -->
  213. <a href="transfert.asp?dossier=<%=dossierParent%>" style="text-decoration : none"><img src="up.gif" border="0">&nbsp;&nbsp;Dossier Parent</a>
  214. <p>
  216. <table border="0" cellspacing="0" width="100%">
  217.   <tr>
  218.     <td width="25%" align="left"><p align="left"><strong><font face="Arial">Dossiers</font></strong></td>
  219. <!-- AFFICHAGE DU NOM DU DOSSIER ACTUELLEMENT PARCOURU AVEC ATTRIBUT COULEUR TAILLE ETC -->
  220. <td width="60%" align="left"><strong><font face="Arial">Actuellement  :  </font></strong><b><font color="##006F00" size="5"><%=objDossier.Name %></font></b></td>
  221. </tr>
  222. </table><hr>
  224. <table width="100%"  border="0" cellspacing="0" cellpadding="0">
  225.   <tr>
  226.     <td width="14"></td>
  227.     <td width="1003"><% intRep=0
  228.   for each sousDossier in objDossier.SubFolders
  229.   intRep=intRep+1
  230.  %>
  231.   <a href="transfert.asp?dossier=<%=dossier&"/"&sousDossier.Name%>" style="text-decoration : none">
  232.   <img src="rep.gif" border="0">&nbsp;&nbsp;<%=SousDossier.Name%></a>
  233.   <br>
  234.  <% next %>
  235. </td>
  236.   </tr>
  237. </table>
  238. <br>
  240. <!--Nous parcourons la collection des sous-répertoires avec une boucle For…Next
  241. en utilisant la propriété SubFolders. Nous créons un lien vers chaque sous-répertoire
  242. en ajoutant leur nom au chemin virtuel contenu dans la variable dossier. -->
  244. <p>
  245. <table border="0" cellspacing="0" width="100%">
  246.   <tr>
  247.     <td width="25%" align="left"><p align="left"><strong><font face="Arial">Fichiers</font></strong></td>
  248.     <td width="15%" align="left" size="2"><strong><font face="Arial">Taille</font></strong></td>
  249.     <td width="25%" align="left" size="2"><strong><font face="Arial">Type</font></strong></td>
  250.     <td width="20%" align="left" size="2"><strong><font face="Arial">Date</font></strong></td>
  251. </tr>
  252. </table><hr>
  254. <% intFich=0
  255.  For each Fichier in objDossier.Files 
  256.  intFich= intFich+1
  257. %>
  259. <table border="0" cellspacing="0" width="100%">
  260.   <tr>
  261.     <td width="25%" align="left"><a href="<%=dossier&"/"&Fichier.Name%>">
  262.         <%=Fichier.Name%></a> </td>
  264.     <td width="15%" align="left" size="2"><font face="Arial"><%= formatnumber(Fichier.Size/1024,2) & " Ko" %></font></td>
  265.     <td width="25%" align="left" size="2"><font face="Arial"><%=Fichier.Type%></font></td>
  266.     <td width="20%" align="left" size="2"><font face="Arial"><%= Fichier.dateLastModified%></font><br></td>
  267. </tr>
  269. </table>
  271. <% next
  272. Set objFs = Nothing
  273. Set objDossier = Nothing %>
  275. <hr><center> Il y a <%=intRep%> Dossier(s) et <%=intFich%> Fichier(s)</center>
  278. <!-- =========================================== CODE ASP QUI AFFICHE LA LISTE DES FICHIERS D'UN DOSSIER ============================= -->
  279. </div>
  280. <!-- Fin CADRAN-LISTING -->
  283. <!-- ============ PIED ============ -->
  284. <div class="pied">
  285. <div align="center"><img src="images/barre-pied.png"></div>
  286. </div>
  287.  
  288.   <div class="heure">
  289. <div align="center">
  290.  <SCRIPT LANGUAGE="JavaScript">document.write(Heure);</SCRIPT>
  291. </div>
  292. </div>
  295.  
  296.  
  297.  
  298.  
  299. </body>
  300. </html>


 
et voila ma page css :
 

Code :
  1. .nospace {width:100%;margin: 0px; background:#598DC6}
  3. /* ============================================ ENTETE ============================================== */
  5. /* OK pour la position */
  6. .entete {
  7. z-index:200;
  8. position:absolute;
  9. width:100%;
  10. height:140px;
  11. background-image: url(bande.jpg);
  13. }
  15. /* OK pour la position */
  16. .entete-gauche {
  17. z-index:250;
  18. position:absolute;
  19. width:600px;
  20. height:140px;
  21. background-color:#193157;
  22. }
  24. /* OK pour la position */
  25. .entete-droite {
  26. z-index:250;
  27. position:absolute;
  28. top:0px;
  29. right:0px;
  30. width:140px;
  31. height:140px;
  32. color:#FFFFFF;
  33. text-align:center;
  34. font: bold 16px/140px Asenine;
  35. background-image: url(bande.jpg);
  36. }
  38. /* ============================================ BANDE INFO ============================================== */
  41. .bande-info {
  42. z-index:50;
  43. position:absolute;
  44. top:140px;
  45. width:100%;
  46. height:40px;
  48. }
  51. .image-haut-gauche {
  52. z-index:150;
  53. position:absolute;
  54. height:20px;
  55. width:170px;
  56. top:140px;
  57. }
  60. .cadran-heure {
  61. z-index:250;
  62. position:absolute;
  63. height:23px;
  64. width:94px;
  65. left:38px;
  66. top:170px;
  67. }
  69. /* ============================================ MENU GAUCHE ============================================== */
  71. /* OK pour la position */
  72. .bande-menu-gauche {
  73. z-index:100;
  74. position:absolute;
  75. height:100%;
  76. width:170px;
  77. background-image: url("trame-verticale-gauche.jpg" );
  78. background-repeat: repeat-y;
  79. }
  81. .sous-menu-gauche {
  82. z-index:150;
  83. position:absolute;
  84. height:300px;
  85. width:150px;
  86. top:180px;
  87. left:10px;
  88. background-color: #5478AF;
  89. border: 1px solid #FFFFFF;
  91. }
  93. .bouton-annuaire {
  94. z-index:200;
  95. position:absolute;
  96. height:30px;
  97. width:140px;
  98. top:210px;
  99. left:15px;
  100. }
  102. .bouton-transfert {
  103. z-index:200;
  104. position:absolute;
  105. height:30px;
  106. width:140px;
  107. top:250px;
  108. left:15px;
  109. }
  111. .bouton-meteo {
  112. z-index:200;
  113. position:absolute;
  114. height:30px;
  115. width:140px;
  116. top:290px;
  117. left:15px;
  118. }
  120. .bouton-outils {
  121. z-index:200;
  122. position:absolute;
  123. height:30px;
  124. width:140px;
  125. top:330px;
  126. left:15px;
  127. }
  129. .bouton-aides {
  130. z-index:200;
  131. position:absolute;
  132. height:30px;
  133. width:140px;
  134. top:370px;
  135. left:15px;
  136. }
  138. .bouton-infos{
  139. z-index:200;
  140. position:absolute;
  141. height:30px;
  142. width:140px;
  143. top:410px;
  144. left:15px;
  145. }
  147. /* ============================================ MENU DROITE ============================================== */
  148. .bande-menu-droite {
  149. z-index:100;
  150. position:absolute;
  151. height:100%;
  152. width:170px;
  153. right:0px;
  154. background-image: url("trame-verticale-droite.jpg" );
  155. background-repeat: repeat-y;
  156. }
  158. .sous-menu-droite {
  159. z-index:150;
  160. position:absolute;
  161. height:210px;
  162. width:150px;
  163. top:180px;
  164. right:10px;
  165. background-color: #5478AF;
  166. border: 1px solid #FFFFFF;
  167. }
  169. .sous-menu-droite2 {
  170. z-index:150;
  171. position:absolute;
  172. height:150px;
  173. width:150px;
  174. top:415px;
  175. right:10px;
  176. background-color: #5478AF;
  177. border: 1px solid #FFFFFF;
  178. }
  180. /* ============================================ CADRAN CENTRE ============================================== */
  182. .fond-centre {
  183. z-index:40;
  184. position:absolute;
  185. top:200px;
  186. left:20%;
  187. height:100%;
  188. width:60%;
  189. background-image: url(trame.jpg);
  190. border: 1px solid #FFFFFF;
  191. }
  193. /* Cadran qui contient le titre, titre centré verticalement en fonction de la hauteur de cellule */
  194. .fond-centre-titre {
  195. z-index:50;
  196. position:absolute;
  197. left:20%;
  198. top:200px;
  199. color:#ffffff;
  200. font: bold 20px/30px Asenine;
  201. height:30px;
  202. letter-spacing:4px;
  203. width:60%;
  204. background-image: url(trame2.jpg);
  205. border: 1px solid #ffffff;
  206. }
  208. /* Cadran pour uploader ou créer un dossier */
  209. .cadran-centre1 {
  210. z-index:50;
  211. position:absolute;
  212. top:245px;
  213. left:22.5%;
  214. height:60px;
  215. width:55%;
  216. font:16px/30px Verdana ;
  217. color:#ffffff;
  218. background-color: #5A89BD;
  219. border: 1px solid #FFFFFF;
  220. }
  222. /* Cadran ou s'afficheront les fichiers contenu dans le dossier UPLOAD */
  223. .cadran-listing {
  224. z-index:50;
  225. position:absolute;
  226. padding:10px;
  227. margin-bottom:20px;
  228. top:320px;
  229. height:35%;
  230. left:22.5%;
  231. width:53.5%;
  232. background-color: #6599D3;
  233. border: 1px solid #FFFFFF;
  234. }
  236. /* ============================================ PIED ============================================== */
  237. .pied {
  238. z-index:50;
  239. position:relative;
  240. height:40px;
  241. width:100%;
  242. bottom:0px;
  243. }
  244. /* ============================================ HEURE ============================================== */
  246. .heure {
  247. z-index:250;
  248. position:relative;
  249. left:55px;
  250. top:132px;
  251. height:20px;
  252. width:60px;
  253. font:bold 18px Asenine;
  254. letter-spacing:1px;
  255. color:#FFFFFF;
  257. }


 
Bonne chance :p le principal, je pense qu'il faut regardé dans la css (peu etre)  
 
merci ++

Reply

Marsh Posté le 10-06-2005 à 16:38:14    

JE VEUX LA PAGE HTML UNE FOIS Générée

Reply

Sujets relatifs:

Leave a Replay

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