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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème Hauteur en %

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème Hauteur en %

n°1115773
oxoid
Matos pas cher et bone qualité
Posté le 10-06-2005 à 14:41:57  profilanswer
 

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

mood
Publicité
Posté le 10-06-2005 à 14:41:57  profilanswer
 

n°1115791
ritzle
Posté le 10-06-2005 à 14:54:45  profilanswer
 

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

n°1115792
ritzle
Posté le 10-06-2005 à 14:55:03  profilanswer
 

:ange:

n°1115801
gatsusat
Posté le 10-06-2005 à 15:00:21  profilanswer
 

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

n°1115944
oxoid
Matos pas cher et bone qualité
Posté le 10-06-2005 à 16:31:12  profilanswer
 

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 ++

n°1115951
gatsusat
Posté le 10-06-2005 à 16:38:14  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème Hauteur en %

 

Sujets relatifs
Probleme avec fonction include[ JEXCEL/JXL] Problème lors de la création d'une feuille (sheet)
Probleme avec l'AUTOFLUSH !!!problème de menu en flash...,
Gros problème <input type='file'>!!!![EXCEL] Problème intéressant !
Aux amateur de difficultés - Problème de hauteur de cellulesCSS - Probleme de hauteur pour un div englobant
Problème avec l'hauteur d'un tableau -> resoluprobleme de hauteur de frameset dans netscape
Plus de sujets relatifs à : Problème Hauteur en %

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

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