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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Overflow: auto et scrollbar ie6

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Overflow: auto et scrollbar ie6

n°1859637
clear
Posté le 10-03-2009 à 00:59:26  profilanswer
 

J'ai pas mal googler mais rien trouver ... j'ai un template XHTML et CSS avec du flash.
 
Dedans je voudrais une petite partie avec une scrollbar. sous ie7 et firefox pas de probleme. Sous ie6 pas moyen de trouver ...
 
Le CSS:
 

Code :
  1. html, body{
  2. margin:0;
  3. padding:0;
  4. width:100%;
  5. height:100%;
  6. border:none;
  7. background: #CCC;
  8. }
  9. * html{
  10. overflow-x: hidden;
  11. }
  12. #mainContent {
  13. background: #CCC;
  14. margin: 0px;
  15. padding: 0px;
  16. position: absolute;
  17. top: 0px;
  18. left: 350px;
  19. right: 0px;
  20. bottom: 0px;
  21. overflow: hidden;
  22. }
  23. #header {
  24. background: #FFF;
  25. margin: 0px;
  26. padding: 0px;
  27. width: 350px;
  28. height: 400px;
  29. clear: both;
  30. position: absolute;
  31. top: 0px;
  32. left: 0px;
  33. list-style-type: none;
  34. overflow: hidden;
  35. text-align: justify;
  36. }
  37. #header h1{
  38. font-family: Verdana, Geneva, sans-serif;
  39. font-size: 12px;
  40. color: #1B75CB;
  41. text-align: justify;
  42. font-weight: normal;
  43. }
  44. #newshead {
  45. width: 350px;
  46. height: 30px;
  47. clear: both;
  48. position: absolute;
  49. top: 400px;
  50. left: 0px;
  51. background: #F60;
  52. margin: 0px;
  53. padding: 0px;
  54. list-style-type: none;
  55. overflow: hidden;
  56. }
  57. #news {
  58. width: 350px;
  59. clear: both;
  60. position: absolute;
  61. top: 430px;
  62. bottom: 20px;
  63. left: 0px;
  64. background: #F60;
  65. margin: 0px;
  66. padding: 0px;
  67. list-style-type: none;
  68. overflow: auto;
  69. }
  70. #para {
  71. font-family: Verdana, Geneva, sans-serif;
  72. font-size: 10px;
  73. font-style: normal;
  74. color: #666;
  75. padding: 10px;
  76. background: #FFF;
  77. text-align: justify;
  78. border: 10px solid #F60;
  79. position:relative;
  80. }
  81. #footer {
  82. width: 100%;
  83. clear: both;
  84. position: absolute;
  85. bottom: 0;
  86. left: 0;
  87. background: #333 url(img/footer.jpg) repeat-x;
  88. margin: 0px;
  89. padding: 0px;
  90. height: 20px;
  91. }
  97. .bords{
  98. margin: 10px;
  99. }
  100. .copy{
  101. font-family: Verdana, Geneva, sans-serif;
  102. font-size: 10px;
  103. font-style: normal;
  104. color: #E1DDD0;
  105. text-align: center;
  106. margin: 4px;
  107. }
  108. .titre{
  109. background: url(img/news.jpg) repeat-x;
  110. height: 15px;
  111. margin: 7px 0px 8px;
  112. }


 
Le HTML :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>test</title>
  7. <style type="text/css">
  8. <!--
  9. @import url("layout.css" );
  10. -->
  11. </style>
  13. <script src="scripts/swfobject_modified.js" type="text/javascript"></script>
  14. </head>
  16. <body>
  17. <div id="header">
  18. <div class="bords">
  19. <img src="img/logo.gif" width="112" height="135" alt="logo" />
  20. <h1>
  21. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  22.     <br />
  23.     <br />
  24.   <br />
  25.   <img src="img/iso.jpg" width="330" height="43" alt="iso" /><br />
  26.   <img src="img/logos.jpg" width="330" height="38" alt="software" /><br />
  27. </h1>
  28. </div>
  29. </div>
  30. <div id="newshead">
  31. <div class="titre">
  32. </div>
  33. </div>
  34. <div id="news">
  35. <div id="para">
  36. What is Lorem Ipsum?
  37.    
  38. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  39. <br />
  40. <br />
  41. Why do we use it?
  42. <br />
  43. <br />
  44. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
  45. <br />
  46. <br />
  47. Where does it come from?
  48. <br />
  49. <br />
  50. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur
  51. <br />
  52. <br />
  53. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
  54. Where can I get some?
  55. <br />
  56. <br />
  57. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
  58. <br />
  59. <br />
  60. What is Lorem Ipsum?
  61.    
  62. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  63. <br />
  64. <br />
  65. Why do we use it?
  66. <br />
  67. <br />
  68. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
  69. <br />
  70. <br />
  71. Where does it come from?
  72. <br />
  73. <br />
  74. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur
  75. <br />
  76. <br />
  77. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
  78. Where can I get some?
  79. <br />
  80. <br />
  81. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
  82. </div>
  83. </div>
  84. <div id="mainContent">
  85.   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="FlashID" title="Index">
  86.     <param name="movie" value="index.swf" />
  87.     <param name="quality" value="high" />
  88.     <param name="wmode" value="opaque" />
  89.     <param name="swfversion" value="6.0.65.0" />
  90.     <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  91.     <param name="expressinstall" value="scripts/expressInstall.swf" />
  92.     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  93.     <!--[if !IE]>-->
  94.     <object type="application/x-shockwave-flash" data="index.swf" width="100%" height="100%">
  95.       <!--<![endif]-->
  96.       <param name="quality" value="high" />
  97.       <param name="wmode" value="opaque" />
  98.       <param name="swfversion" value="6.0.65.0" />
  99.       <param name="expressinstall" value="scripts/expressInstall.swf" />
  100.       <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
  101.       <div>
  102.         <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
  103.         <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
  104.       </div>
  105.       <!--[if !IE]>-->
  106.     </object>
  107.     <!--<![endif]-->
  108.   </object>
  109. </div>
  110. <div id="footer">
  111. <div class="copy">
  112. &copy;
  113. </div>
  114. </div>
  115. <script type="text/javascript">
  116. <!--
  117. swfobject.registerObject("FlashID" );
  118. //-->
  119. </script>
  120. </body>
  121. </html>


 
Je voudrais la scrollbar dans la div news.

mood
Publicité
Posté le 10-03-2009 à 00:59:26  profilanswer
 

n°1859691
olivthill
Posté le 10-03-2009 à 10:58:56  profilanswer
 

Sous IE 6 pour une zone avec une barre de scrolling, on utilise souvent une IFRAME.
Sinon, il faudrait voir le codage des pages qui ont cette fonctionalité.

n°1859692
dwogsi
Défaillance cérébrale...
Posté le 10-03-2009 à 11:02:41  profilanswer
 

Euh... Personnellement j'ai jamais eu de problème pour avoir des scrollbar sous IE6. Maintenant vu la quantité de code qui nous est donnée, ça me donne pas envi de chercher d'où peu venir le problème. Et une démo en ligne serait bien plus pratique.


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
n°1859730
clear
Posté le 10-03-2009 à 11:51:04  profilanswer
 

ca me surprend que tu n'ai jamais eu de problemes avec les scrollbar sous ie6, apperement il y a bcp de bug avec ca ...
 
Pour le test en ligne :
 
www.33pixel.com/tmp/


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

  Overflow: auto et scrollbar ie6

 

Sujets relatifs
Enlever le son d'une vidéo en lancement auto[résolu] clé primaire auto-incrémentée avec masque de deux caractères?
[RESOLU] Ouverture petite fenetre autoBlocage accès formulaire & update auto
Table invisible IE6/AJAX insidescrollbar - action a repeter tant que le bouton est enfoncé
ExternalInterface... problemes IE6Rajout auto de caractères en fin de ligne d'un txt
comment scroller dans une pile de texte (alignée en bas)?Problème avec Internet Explorer IE6 et IE7: Afficher Derouler - cacher
Plus de sujets relatifs à : Overflow: auto et scrollbar ie6

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

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