• Registered: 2012-10-08
  • Posts: 2

Topic: Adding top and bottom divs, custom stage padding top and bottom

Hello,

Everything is working GREAT with JuiceBox Pro. I'm modifying the index.html to add branding and copyright info at the top and the bottom. I want to add a top DIV that is 100% wide, 60px tall, and a bottom DIV that is 100% wide, 25px tall, both fixed position floating above the juicebox-container DIV.

I try to specify the custom padding/margins for the juicebox-container DIV in the CSS file, but it doesn't work. And unfortunately the StagePadding value is uniform.

What is the best way to specify this custom padding/margins?

Thanks,

Ernie

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Adding top and bottom divs, custom stage padding top and bottom

If you want to have a page with a header, gallery and footer, please see the View Resizable Gallery with Top Menu Example in the Using a Resizable Gallery with a Header section of the Juicebox - Embedding Guide. The header and footer in the example both have fixed heights and the gallery takes up the remaining space in between them, no matter what the size of the user's browser window is. You can view the source of the page in a browser to see how this can be achieved.

If you actually want your header and footer to overlap the gallery, you can add code such as the following to your gallery's 'index.html' page:

<div id="header" style="width: 100%; height: 60px; background-color: #aabbcc; position: absolute; top: 0px; left: 0px; z-index: 9999;">Header content goes here</div>
<div id="footer" style="width: 100%; height: 25px; background-color: #aabbcc; position: absolute; bottom: 0px; left: 0px; z-index: 9999;">Footer content goes here</div>

The high 'z-index' values will ensure that the header and footer content are visible and stacked above the gallery layers but please bear in mind that, in doing so, the header and footer may obscure gallery elements (such as the Gallery Title) and controls (such as the Button Bar).

  • Registered: 2012-10-08
  • Posts: 2

Re: Adding top and bottom divs, custom stage padding top and bottom

Thanks!! That's exactly what I was looking for! ;-)