• Registered: 2012-09-19
  • Posts: 2

Topic: Simpleveiwer gallery in Fluid layout

I have been working on a fluid layout and I have the main page working properly on resize, but the page with the embedded SV gallery, I cannot get to work properly.

The SV gallery is inside of a parent div that sets the width and height, just like the main page, but no matter what settings I use (px, %, em's) on the parent div or the SV gallery itself I cannot get the gallery to resize properly when the browser window is shrunk/stretched.

Is it even possible to use SV gallery in a fluid layout? If so any tips or advice? I don't really know much at all about Flash coding so please be nice!

Here are a coupe of links to the working fluid Main page as well as the not properly functioning gallery page.  Another issue I am having is extra height in the gallery page that is causing the scrollbar to show. I cannot figure out what is causing this. Any help would be much appreciated. Thanks!!

PS- I do own Simpleviewer Pro v2, not just the free version.

Main page (Working fluid layout) www.sweetconnollyphotography.com/mainfixed.html
Gallery page (not properly functioning upon browser resize) www.sweetconnollyphotography.com/babies/tester.html

Last edited by forbish07 (2012-09-20 06:11:08)

  • Registered: 2008-07-06
  • Posts: 6,311

Re: Simpleveiwer gallery in Fluid layout

Is it even possible to use SV gallery in a fluid layout?

Yes. As long as the gallery's dimensions and those of all parent containers are expressed as percentages (rather than fixed pixel values), then the gallery will dynamically resize depending on the size of the user's browser window.
Try resizing your browser window whilst viewing this sample gallery.

On the page containing the gallery, the 'mainslide' and 'footer' divs are not closed.
This is likely to be causing layout issues when browsers render the page.
The first thing I would do is check your web page for HTML errors using the W3C Markup Validation Service and then fix any errors reported. This will eliminate HTML errors as a possible cause of your problem.

Also, I think the problem may have something to do with your 'logo' div being floated 'left'.
Try adding the CSS rule clear: both; to the 'slideshow' class in your 'defaultfixed.css' file, i.e.:

.slideshow {
    clear: both;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 0;
    height: 85%;
    width: 100%;
    border-bottom: 0 solid #fff;
    padding-bottom: 12%;
    }
Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-09-19
  • Posts: 2

Re: Simpleveiwer gallery in Fluid layout

Thank you very much. So I have the gallery page working as good as I can I think, it isn't perfect, but good enough for now. The only Issue I am having now is that the overflow scroll bar is showing up even though the content is not overflowing the page. I know what is causing it, but this is the only page that is having the issue. The culprit is in my CSS;

#mainslide {   
    height: 85%;
    width: 80%;
    margin: 0 auto;
    margin-top:1.25%;
    text-align: left;
    background-color: #ffffff;
    border: 2px solid #aaaaaa;
    max-width: 1000px;
    max-height: 770px;

It is the Margin-top: 1.25%. When I remove this (Change to :0%)the scroll bar drops away. BUT, I don't have the same overflow issue on any other page that uses the same exact Margin-top: 1.25%. So I assume that the gallery is somehow causing this overflow but cannot figure out how to remove it. Using overflow:hidden is not an option since I want people to see the bar if their screen is to small.  Can you see any reason why this one page only does this?

Here are the links again, as well as another page that is working just fine with the margin-top: 1.25%.

Gallery page with overflow activating  www.sweetconnollyphotography.com/babies/tester.html
Properly functioning main page  www.sweetconnollyphotography.com/mainfixed.html
Properly function page as well  www.sweetconnollyphotography.com/contact.html

  • Registered: 2008-07-06
  • Posts: 6,311

Re: Simpleveiwer gallery in Fluid layout

Your 'contact.html' page does not have any content that resizes dynamically with the size of the browser window.
The contact information has a fixed height and in a browser window with a large enough height to accommodate it, no vertical scroll bar will be necessary or, indeed, displayed.

Using overflow:hidden is not an option since I want people to see the bar if their screen is to small.

With your 'tester.html' page, the gallery resizes dynamically so as the browser window is made larger, the gallery becomes larger and so the scroll bar remains.
The vertical scrollbar appears because the content of your page (header + gallery + footer) is always greater than the browser window height. (The header and footer have fixed heights as they do not dynamically resize and the height of the gallery is expressed as a percentage.)

The quick solution would be to reduce the height of the gallery (or it's parent container).

The ultimate solution would be to create your web page so that the header and footer (with fixed heights) are displayed on the page and the gallery takes up only the remaining space. This would mean that a vertical scroll bar is never required or displayed.
This can be achieved with JavaScript. Please see the 'Using a Resizable Gallery with a Header' section of the SimpleViewer Embedding Guide for details, specifically the 'View Vertical Resizable Gallery with Header Example' which has a header, footer and gallery and no matter what size the browser window is, the header and footer heights remain unchanged and scroll bars are never displayed. You can download the example (as a zip file) and examine and modify the code to suit your needs.

Steven Speirs
SimpleViewer Support Team