• Registered: 2009-11-07
  • Posts: 11

Topic: Fixed Layout - No Left to Right Scroll

What do I need is a fixed layout that will expand and contract as needed per the viewers screen resolution or to allow left and right scrolling at least?

Thank you!

  • Registered: 2009-03-17
  • Posts: 2,725

Re: Fixed Layout - No Left to Right Scroll

If you are using the css that came in the example html files remove: 

overflow: hidden;
Mike Richards
SimpleViewer Support Team.
  • Registered: 2009-11-07
  • Posts: 11

Re: Fixed Layout - No Left to Right Scroll

I am not using overflow:hidden

Thank you for your continued help :-)

  • Registered: 2009-03-17
  • Posts: 2,725

Re: Fixed Layout - No Left to Right Scroll

Please post the URL of the gallery for further assistance.

Mike Richards
SimpleViewer Support Team.
  • Registered: 2009-11-07
  • Posts: 11

Re: Fixed Layout - No Left to Right Scroll

davidbarrphotography.com

Problem is the site is taking up about 1300px and on non-widescreens or people with their resolution set low the caption text is cut off.

Thank you!

  • Registered: 2009-03-17
  • Posts: 2,725

Re: Fixed Layout - No Left to Right Scroll

Try giving your #flashcontent div and the var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#181818");
a fixed width.

Mike Richards
SimpleViewer Support Team.
  • Registered: 2009-11-07
  • Posts: 11

Re: Fixed Layout - No Left to Right Scroll

Tried that...you can view it here:
http://staging.davidbarrphotography.com/index.html

What I really need is for the left to right browser scroll to show or for the site to contract to fit the screen which I am pretty sure won't work with a fixed layout.

Another idea is to move the introductory text to the top however then the thumbnails become hidden...

Thanks for your continued help :-)

  • Felix
  • Site Admin
  • Offline
  • Registered: 2006-03-16
  • Posts: 4,395

Re: Fixed Layout - No Left to Right Scroll

If the SWF width is set to 1000 px wide and the browser is smaller than that, the browser should show a left-right scroll bar. Not sure why it is not in your case, I am guessing it's an issue in the HTML code. Try stripping out some of the CSS and tables until you see the scroll bars.

Felix Turner
SimpleViewer Support Team.

Felix's Website

  • Registered: 2009-11-03
  • Posts: 5

Re: Fixed Layout - No Left to Right Scroll

What I feel that if  you set SWF width is set to 1050 px wide and if browser is smaller than that, the browser should show a left-right scroll bar.  There is no need to do anything extra. Can you share some more info what exactly you are doing and what you get. Since HTML takes care of these thing so generally we don't do.

  • Registered: 2009-11-07
  • Posts: 11

Re: Fixed Layout - No Left to Right Scroll

Here is the code & thank you in advance for your help!

<style type="text/css">
    /* hide from ie on mac \*/
    * { 
margin:0; 
padding:0;

}
    
    html {
        height: 100%;
        
    }

    #flashcontent {
        height: 770px;
        
        

    
    }
    /* end hide */

    body {
        margin: 0;
        padding: 0;
        background-color: #181818;
    }

    a {    
        color:#cccccc;
    }
    
    #header {
        
        background-color: #222222;
        vertical-align:top;
        width: 100%;

        
    }
    
    .headertext {
        font-family:Verdana, Geneva, sans-serif;
        font-size:22px; font-weight:bold;
        float:left;
    padding-top:8px;
        padding-left:30px;
        color:#FFFFFF;
    }
    .navtext {
        font-family:Verdana, Geneva, sans-serif;
        font-size:14px;
        color: #868686;
            float:right;
        padding-right:20px;
        
    }
    
    .navtext a { color:#868686; }

    
    .introtext {
        font-family:Verdana, Geneva, sans-serif;
        font-size:14px;
        color: #868686;
    position:absolute; top:80; left:30; width:240px;

    }
    
    .introtext a { color:#868686; }
    
    #footer {
        text-align: center;
font-family:Verdana, Geneva, sans-serif;
        font-size:11px;
        color:#868686;
        width: 100%;
        height: 10px;
        padding: 10px 0 0px 0;
    }
</style>
</head>
<body>

    <div id="header"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="headertext">DAVID BARR PHOTOGRAPHY</td>
    <td align="right"><span class="navtext"><a href="index.html"><strong>Antarctica Gallery</strong></a> | <a href="underwater/">Underwater Gallery</a> | <a href="misc/">Miscellaneous Gallery</a></span></td>
  </tr>
</table>
</div>
<div class="introtext">Welcome to the gallery of photographer David Barr, specializing in Antarctic and underwater photography.
    My wildlife and adventure photographs have been published worldwide, in publications such as <a href="http://www.nationalgeographic.com/" target="_blank" style="text-decoration:none;">National Geographic Magazine</a>, Stern, View, and Le Figaro.<br /><br />
    For inquiries, or to order archival prints, please send an email to <a href="mailto:DavidBarrPhotography@gmail.com">DavidBarrPhotography@gmail.com</a>
</div>
    <div id="flashcontent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>

<script type="text/javascript">

        var fo = new SWFObject("viewer.swf", "viewer", "1000", "100%", "8", "#181818");

        // SIMPLEVIEWER CONFIGURATION OPTIONS
        // To use an option, uncomment it by removing the "//" at the start of the line
        // For a description of config options, go to:
        // http://www.airtightinteractive.com/simpleviewer/options.html

        //fo.addVariable("xmlDataPath", "gallery.xml");
        //fo.addVariable("firstImageIndex", "5");
        //fo.addVariable("langOpenImage", "Open Image in New Window");
        //fo.addVariable("langAbout", "About");
        fo.addParam("wmode", "transparent");
        fo.addVariable("preloaderColor", "0x313131");

        fo.write("flashcontent");
    </script>
    <div id="footer">Copyright &copy; 2009 David Barr Photography. All Rights Reserved.</div>
</body>
</html>