• Registered: 2013-01-15
  • Posts: 8

Topic: Alignment between Header and Footer HTML

I'd like to align my gallery between by header and footer.  So far, I've tried making div's and expressing the height as fixed pixels and percentages, but still haven't been able to 'align=center' my gallery.

Currently, the page looks this way:

http://rorshak.com/rockroll/

I've fixed the position after testing it on mobile units and finding it best to keep the headers/footer/gallery fixed in scale with one another.

Your help is appreciated!
Chilidogcowboy

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

Re: Alignment between Header and Footer HTML

Please see the Using a Resizable Gallery with a Header section of the SimpleViewer Embedding Guide, specifically the View Vertical Resizable Gallery with Header Example which has a web page with a header and a footer (both with fixed heights) and the SimpleViewer gallery resizes to fill the remaining browser window space, no matter what the size of the user's browser window is. No scroll bars are ever required or displayed.
You can download the example and modify it to suit your own needs.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2013-01-15
  • Posts: 8

Re: Alignment between Header and Footer HTML

I'm still at a loss as how to center my gallery.  Here's the code I'm dealing with:

<div align="center">    
<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "75%", "75%", "transparent", true, null, null, null, false);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->
</div>

This successfully centers it, but its height is only 20 pixels or so....

  • Registered: 2013-01-15
  • Posts: 8

Re: Alignment between Header and Footer HTML

...ps...I've allowed my gallery to scale apart from my header and footer at

http://rorshak.com/rockroll/

but my main issue remains:  how to center the simpleviewer gallery...

  • Registered: 2013-01-15
  • Posts: 8

Re: Alignment between Header and Footer HTML

Also important:

I applied the edit to my code per the instructions in the following thread:

http://www.simpleviewer.net/forum/viewt … p?id=14073

but alas my gallery is only 10-20 pixels tall.

  • Registered: 2013-01-15
  • Posts: 8

Re: Alignment between Header and Footer HTML

Hmmm...it seems this is an issue in IE but my Firefox is responding well to the code:

<div id="sv-container" style="margin: 0 auto;"></div>

:)

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

Re: Alignment between Header and Footer HTML

how to center the simpleviewer gallery...

If you are trying to center your gallery vertically between your header and footer, then using the Vertical Resizable Gallery with Header Example sample as a template may be the best course of action.
If you are trying to center your gallery horizontally, then using the following code should work:

<div id="sv-container" style="margin: 0 auto;"></div>

However, this will center the gallery only within its most immediate parent container, which, itself may need centered within its own parent container.

Hmmm...it seems this is an issue in IE but my Firefox is responding well to the code

Your web page has no Doctype Declaration so, without knowing which set of standards your web page should be conforming to, Internet Explorer could be displaying your web page with unpredictable results.
Looking at the code on your web page, it would appear that the most appropriate Doctype Declaration would be HTML 4.01 Transitional.
Put the following code at the very top of your web page (before the opening <html> tag):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

... and then check your web page for errors with the W3C Markup Validation Service and fix any errors reported.
Once your web page's code validates correctly, your web page should be displayed with greater predictability and consistency across different browsers.

Steven Speirs
SimpleViewer Support Team