9 Replies Latest reply on Apr 8, 2010 1:11 PM by Chorale0001

    Probleme with an unwanted horizontal scrollbar

    Chorale0001 Level 1

      Hi

       

      Link of reference : http://www.episodesoft.com/demo/index_fr.html

       

      I'm having a little difficulty with the horizontal scrollbar, i dont want it to appear since the website is designed for 1024x768 up to 2000, so obviously everything is adjusting itself depending of your viewscreen, So does the flash ( the menu and header ).

       

      However it is the flash that cause the scrolling on the right but not on the left ??? the browser automatiquely adjust the left portion of the flash and is not creating a scrollbar for that, however i cannot find a way so it manage the right portion the same way it do the right one.

       

      It is weird because before the header was not in flash but still 2000px and i didn't have that probleme with the CSS.

       

      For the flash there is no CSS but here is the code. Feel free to view the source of the webpage itself

       

      Any idea ?

       

      Thanks a lot !

      <div id="layer1" style="position:absolute; top:-10px; left:50%; margin-left:-1000px; width:2000px; height:580px; z-index:2">
      <table width="950" border="0" align="center" >
        <tr>
          <td align="center" valign="middle">
          <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="2000" height="580">
            <param name="movie" value="Video/Menu.swf" />
            <param name="wmode" value="transparent">
            <param name="quality" value="high" />
            <param name="wmode" value="transparent" />
            <param name="swfversion" value="6.0.65.0" />
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <param name="embed" value="wmode=&quot;transparent&quot;" />
            <param name="selectable" value="false" />
            <param name="border" value="0" />
            <param name="embed" value="border=&quot;0&quot;" />
           <object type="application/x-shockwave-flash" data="Video/Menu.swf" width="2000" height="580">
              <param name="quality" value="high" />
              <param name="wmode" value="transparent" />
              <param name="swfversion" value="6.0.65.0" />
              <param name="expressinstall" value="Scripts/expressInstall.swf" />
              <param name="embed" value="wmode=&quot;transparent&quot;" />
              <param name="selectable" value="false" />
              <param name="border" value="0" />
              <param name="embed" value="border=&quot;0&quot;" />
              <div>
                <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                <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>
              </div>
            </object>
            </object>
          </td>
        </tr>
      </table>
      </div>
        • 1. Re: Probleme with an unwanted horizontal scrollbar
          jeremyluby Level 3

          The flash banner is sized at 2000, so the browser reserves 2000 pixels of space for it, hence the reason you have a horizontal scroll bar.

           

          I would make a 1 pixel wide image of the right side of your flash banner and tile that in the back of a div.  Place your flash with the extra stuff at the right side cropped off.

           

          J

          • 2. Re: Probleme with an unwanted horizontal scrollbar
            Chorale0001 Level 1

            Thx for answering.

             

            Ok but, why in that case the browser is not "reserving" 650 pixel on the left too ? he has no probleme hiding the 650 on the left but not those on the right ? because if you click my link you will see that  when you resize your IE, it adjust the left perfectly but not the right.

             

            As you will see the right side is an almost pure Black ( left is pure white ), and the background of the website is white.. if i put a 1 px large band on the right then tell with CSS to fill the background i will cover the whole website but the flash itself, which is exactly why i cannot do it.

            • 3. Re: Probleme with an unwanted horizontal scrollbar
              jeremyluby Level 3

              Not sure where you are getting that number, but the simple answer is because he has

              margin-left:-1000px; in the div that has the flash menu in it.

              The background image tiling that I am asking you to do is for the div that the menu is within. 

              If you do it just on that div, it will not do that for the whole page.

              J

              • 4. Re: Probleme with an unwanted horizontal scrollbar
                Chorale0001 Level 1

                Herm oook.

                 

                I just tryed to remove the margin-left:-1000px; however when i do that, the flash start in center of the viewscreen or will no longer auto center itself.

                 

                The flash is in his own div and that div is above another div ( the content ).... so as long i put a background color in this one, it will cover all the website or the right side if i make one going from transparent to 100% on the right.

                 

                Here is the whole code to help you

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Logiciel Épisode</title>
                <style type="text/css">
                #bottom {
                background-repeat:no-repeat;
                background-position: bottom;
                background-image: url(images/barre_bottom.png);
                height: 5px;
                }

                #headinner  {
                background-position: center top;
                margin-top: 0px;
                margin-bottom: 0px;
                background-color: #F5F6F7;
                background-repeat: no-repeat;
                height: 95px;
                background-image: url(images/HeaderFR.png);
                   }

                body {
                background-color: #ffffff;
                margin-top: auto;
                margin-right: auto;
                margin-bottom: auto;
                margin-left: auto;
                background-image: url(images/fond.png);
                text-align: center;
                background-position: bottom;
                background-repeat: no-repeat;
                }
                #Copyright {
                text-align: center;
                margin-bottom: 1px;
                margin-top: 1px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 10pt;
                }
                #layer2 #Layer2 tr td p {
                text-align: center;
                font-size: 36px;
                margin-top: 100px;
                <!-- margin-left: 30px;
                -->;
                }

                </style>
                <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
                </head>

                <body>
                <!--<div id="headinner">
                INACTIVE HEADER  
                </div> -->
                <div id="layer1" style="position:absolute; top:-10px; margin-left:-1000px; left:50%; width:2000x; height:580px; z-index:2">
                <table width="950" border="0" align="center" >
                  <tr>
                    <td align="center" valign="middle">
                    <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="2000" height="580">
                      <param name="movie" value="Video/Menu.swf" />
                      <param name="wmode" value="transparent">
                      <param name="quality" value="high" />
                      <param name="wmode" value="transparent" />
                      <param name="swfversion" value="6.0.65.0" />
                      <param name="expressinstall" value="Scripts/expressInstall.swf" />
                      <param name="embed" value="wmode=&quot;transparent&quot;" />
                      <param name="selectable" value="false" />
                      <param name="border" value="0" />
                      <param name="embed" value="border=&quot;0&quot;" />
                     <object type="application/x-shockwave-flash" data="Video/Menu.swf" width="2000" height="580">
                        <param name="quality" value="high" />
                        <param name="wmode" value="transparent" />
                        <param name="swfversion" value="6.0.65.0" />
                        <param name="expressinstall" value="Scripts/expressInstall.swf" />
                        <param name="embed" value="wmode=&quot;transparent&quot;" />
                        <param name="selectable" value="false" />
                        <param name="border" value="0" />
                        <param name="embed" value="border=&quot;0&quot;" />
                        <div>
                          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                          <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>
                        </div>
                      </object>
                      </object>
                    </td>
                  </tr>
                </table>
                </div>
                <div id="layer2" style="margin-top:100px" >
                <table border="0" align="center" id="Layer2" name="Layer2">
                  <tr>
                    <td background="images/accueil_fond.png" width="1035" height="485" aling="right" ><img src="images/accueil2_4.png" width="950" height="485" align="left" valign="middle"/></a></td>
                    </tr>
                </table>
                </div>
                <div id="bottom">
                </div>
                <p id="Copyright">© 2010 - Logiciel Episode Inc.</p>
                <table width="10" border="0" align="center">
                  <tr>
                    <td align="center" valign="middle"><a href="index_us.html" target="_self">English</a></td>
                    <td align="center" valign="middle"><a href="index_fr.html" target="_self">Francais</a></td>
                <!--
                    <td align="center" valign="middle"><p><a href="index_us.html" target="_self"><img src="images/Drapeau_US.png" width="25" height="15" border="0" align="absmiddle" /></a></p></td>
                    <td align="center" valign="middle"><a href="index_fr.html" target="_self"><img src="images/Drapeau_fr.png" width="25" height="15" border="0" align="absmiddle" /></a></td>
                -->  </tr>
                 
                </table>
                <script type="text/javascript">
                <!--
                swfobject.registerObject("FlashID");
                //-->
                </script>
                </body>
                </html>

                • 5. Re: Probleme with an unwanted horizontal scrollbar
                  Chorale0001 Level 1

                  Please i need help. this webpage need to be online soon

                  Anyone ? Thx in advance for all the help

                   

                   

                  Dont forget to check the link in the main subject to see the actual page.

                  • 6. Re: Probleme with an unwanted horizontal scrollbar
                    Nancy OShea Adobe Community Professional & MVP

                    Probably not what you want to hear at this moment, but I feel Flash only is a very poor choice for modern web sites.  It's not web friendly, it's impossible to access on web devices that don't support Flash (iPhone, iTouch, iPads...)  Robots cannot "see" Flash content.  So your site will remain invisible to screen readers, translators, search engines and many humans who can't use Flash.

                     

                    The best advice I can offer is to re-design your web pages to include real text links and HTML content that can be seen and used by everybody.

                     

                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists
                    http://alt-web.com/
                    http://twitter.com/altweb
                    http://alt-web.blogspot.com

                    • 7. Re: Probleme with an unwanted horizontal scrollbar
                      Chorale0001 Level 1

                      Well Thanks Nancy.

                       

                      I am aware of Html4 that can do everything flash can do ( for the most part) but i dont know that html4 and even so my knowledge of HTML is limited soo.. right now i have to do what i can with what i have

                      • 8. Re: Probleme with an unwanted horizontal scrollbar
                        Nancy OShea Adobe Community Professional & MVP

                        Start with a basic CSS Layout.

                        http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html

                         

                        Change background colors to match your web site.

                        Insert a banner image  on top.

                        Add some text links, and content that isn't all images.

                         

                        Nancy O.
                        Alt-Web Design & Publishing
                        Web | Graphics | Print | Media  Specialists
                        http://alt-web.com/
                        http://twitter.com/altweb
                        http://alt-web.blogspot.com

                        1 person found this helpful
                        • 9. Re: Probleme with an unwanted horizontal scrollbar
                          Chorale0001 Level 1

                          Thanks Nancy

                           

                          I found the answer!

                           

                          Solution is extremely easy in CSS:

                           

                          html {
                          overflow-x: hidden;
                          overflow-y: auto;
                          }

                           

                          I can finally sleep !