Topic: Appreciate someone viewing a couple of galleries and advising...

I would appreciate it if some of you guys with more experience of SV than me would look at these galleries and offer a little advice as to why I am unable to get the tumbnails and main pic to sit in the same place on the page on each gallery considering I am using the same template and am using the same settings for each of the galleries made in SV pro. 

I am obviously missing something simple but important.  Having spent hours on these three galleries alone, I think it's time to seek a little expert advice.

Here they are

http://www.lesleywestrop.com/cathedral/cathedral.htm

http://www.lesleywestrop.com/landscape/landscape.htm

http://www.lesleywestrop.com/life/life.htm

life drawing is the worst, the gallery placing is right below the bottom left hand nav button.

Really appreciate some input on this, been at it so long I am now punch drunk - Keith

Re: Appreciate someone viewing a couple of galleries and advising...

I am using the same template and am using the same settings for each of the galleries made in SV pro

A quick comparison of your gallery XML files shows that the settings are not not same for all of your galleries ('cathedral' differs from 'landscape' and 'life').
However, this is not the cause of the different page layouts.
Each of your HTML files ('cathedral.htm', 'landscape.htm', and 'life.htm') is different.
Open them all in a plain text editor and take a look. You will see different code in each. For example, 'life.htm' has more <p>&nbsp;</p> entries after line 56 than 'cathedral.htm' and 'landscape.htm'.
Also, 'cathedral.htm' has an additional <tr> element after the gallery which is not present in 'landscape.htm' and 'life'.

I would start afresh with a new template and embed the galleries into the template one at a time (saving the template as a new file after embedding each gallery) following the instructions in the SimpleViewer Embedding Guide.

Your HTML documents should also include a Doctype Declaration so that browsers know what standards your page's code should conform to. Without a Docytpe Declaration, browsers will render your page in 'quirks mode' which may give unpredictable results.
Looking at the code on your pages, the most appropriate Doctype Declaration would be HTML 4.01 Transitional, in which case you should place the following code at the very top of each of your HTML pages, before the opening <html> tags.

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

Once you have included the Doctype Declaration in your pages, you can then validate them with the W3C Markup Validation Service to check for any HTML errors. If any errors are reported, they should be fixed to ensure that your pages are displayed with greater predictability and consistency across different browsers.

If, after using the same template for all your pages, adding a Doctype Declaration to your pages and making sure that your code validates, you still see too much space around your gallery in your pages, please see the Layout Troubleshooting section of the SimpleViewer-Pro Layout Guide which deals with the question:
"I have extra spacing in my gallery. How do I get rid of it?"

Steven Speirs
SimpleViewer Support Team.

Re: Appreciate someone viewing a couple of galleries and advising...

Steven, I appreciate very much your input.  I will certainly look at the cod in the next day or so.

The frustration of learning the quirks of the program and having to mess around with the pages is almost certainly what led to the bits of extra unwanted code in the pages.

Will report back on how I get on.

This is my first attempt at incorporating SV galleries into a site,

Keith

Re: Appreciate someone viewing a couple of galleries and advising...

Hello again,

Have taken the points made on board and reloaded the cathedral gallery.  I made a mistake leaving an old piece of previous code on the page which didn't help with my testing.  Removed that, but now I have another question in addition to did I swallow a dumb pill or something ?  This link viewed in explorer is fine - however if I view it in Chrome I get a title Cathedral (which I do not get in explorer) and this throws the page out again.

If Steven or someone could toss me a bone, it would be appreciated before I go load the other galleries and make a pigs ear of the whole site again.  Keith  - http://www.lesleywestrop.com/cathedral/cathedral.htm

Re: Appreciate someone viewing a couple of galleries and advising...

Your gallery's XML file uses the setting:

title="cathedral"

... so the 'cathedral' title should be displayed in the gallery in all browsers.
However, the top of the gallery is likely to be obscured by another element on your web page (hiding the title) when viewed in Internet Explorer.

The cause of this may be the fact that your page's Doctype Declaration is half way down your page in the middle of a <table>.
It should be at the very top of your page before the opening <html> tag.
With the Doctype Declaration in place, validate your page with the W3C Markup Validation Service and fix any errors found.
Once your page validates, it should be displayed with greater consistency across different browsers.

Steven Speirs
SimpleViewer Support Team.

Re: Appreciate someone viewing a couple of galleries and advising...

Hi Steven, thank you for the prompt response.  OK, I see what you are saying.  Actually I did not realise I had specified a title in the design so will go back and remove.

The Doctype was put in in error down the page - thought I had removed.  Will go back and try again.

I thank you for your patience.  Been writing websites a long time but not using these types of gallery.  Learning, but slowly.

Keith

Re: Appreciate someone viewing a couple of galleries and advising...

Hi Steven,

I seem to be digging myself a deeper and deeper hole - I put in the DOCTYPE line in the place it should be and it is now affecting how things look on the page.

I have uploaded this for you to see http://www.lesleywestrop.com/cathedral/cathedral.htm

I did the check on W3C and frankly a lot of what it reports makes no sense to me.  I have never had problems with items sitting where I put them before, but now I feel like I no longer have any control all because of how SV involves itself.

In explorer for example Westrop Artist now centres itself on the page, but not in chrome, where it just offsets. against the Lesley which is in a different table / cell.

Beginning to wonder if I have bitten off more than I can chew with SV Pro ?  All I want is galleries thumbs and main pic sitting flush with the top of the nav buttons.  I notice now, that the cathedral gallery no longer displays in Safari, whereas on test yesterday, it did. 

I don't want to become a pest to you, but my needs are simple and the solution does not seem to follow suit.  Appreciate simple advice.  Keith

Later - I reviewed in Chrome and Explorer the latter is now a complete mess. The gallery appears way down the page.  Starting to lose faith now.

Last edited by soxer123 (2012-09-17 12:42:21)

Re: Appreciate someone viewing a couple of galleries and advising...

First of all, there is a typo in your Doctype Declaration.
Change:

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

... to:

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

I put in the DOCTYPE line in the place it should be and it is now affecting how things look on the page.

It is important to have a Doctype Declaration on your web page. Please see this web page for further information.

In explorer for example Westrop Artist now centres itself on the page, but not in chrome, where it just offsets.

I do not know how your web pages are being created but it is a little difficult to debug your page with 7 nested <tables> on your page.
Inside a single <td> element of one <table>, you currently have the 'Westrop Artist' text, the SimpleViewer gallery, a <div> within a complete <table> (containing your footer) and another complete <table> within a <div> (containing your copyright message).
I think most of your problems arise from the over-complex layout of the page with all the nested tables and I believe that you would probably encounter the same layout issues if you took the gallery out of the equation and replaced it with an empty <div> with the same dimensions.
The template for your page does not need to be this complicated. You could display the 'Lesley Westrop Artist' as a header across the top of your page. You could then have a single table with two columns: your links in one column and the gallery in the other.
Finally, you could display your footer and copyright message at the bottom of you page.

Alternatively, you could layout your page using CSS rather than tables.
Below is an alternative to your own 'cathedral.htm' page which uses CSS and no tables at all.
Try replacing your own 'cathedral.htm' file with the code below. I have tried to remain faithful to the layout of your original page. You should hopefully be able to follow the code and make modifications to the CSS if necessary. It may not be perfect or exactly what you are after but it shows what can be done with CSS. A guide to CSS can be found here.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>SimpleViewer-Pro Gallery</title>
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
        function doLayout() {
            var winHeight, winWidth, menuWidth;
            winHeight = window.innerHeight ? window.innerHeight : $(window).height();
            winWidth = window.innerWidth ? window.innerWidth : $(window).width();
            menuWidth = $('#menu').outerWidth();
            $('#gallery').height(parseInt(winHeight)).width(parseInt(winWidth) - parseInt(menuWidth) - 80);
        }
        $(document).ready(function () {
            doLayout();
            $(window).bind('resize', doLayout);
            simpleviewer.load('sv-container', '100%', '600', 'd0c9c0', true);
        });
    </script>
    <style type="text/css">
        html, body {
            overflow-x: hidden;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #d0c9c0;
            font-family: Verdana;
            margin-top: 20px;
        }
        a, a:link, a:visited {
            color: #333333;
        }
        a:active {
            color: #663300;
        }
        img {
            border: none;
        }
        #header {
            position: absolute;
            top: 60px;
            left: 35px;
            white-space: nowrap;
        }
        #name {
            color: #663300;
            font-size: 40px;
        }
        #artist {
            color: #ffffff;
            font-size: 40px;
        }
        #menu {
            background-color: #ffffff;
            float: left;
            height: 700px;
            margin-left: 20px;
            margin-right: 20px;
            padding-left: 10px;
            width: 140px;
        }
        #gallery {
            float: right;
            margin-top: 100px;
        }
        #footer {
            clear: both;
            color: #663300;
            font-size: 16px;
            text-align: center;
        }
        #copyright {
            color: #663300;
            font-size: 12px;
            margin-right: 20px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="header">
        <span id="name">Lesley Westrop</span>&nbsp;&nbsp;&nbsp;<span id="artist">Artist</span>
    </div>
    <div id="wrap">
        <div id="menu">
            <p><br><br><br><br><br><br></p>
            <a href="http://www.lesleywestrop.com/gallery.htm"><img src="gallerynewgrey.gif" width="132" height="60" alt="image"></a>
            <p><br><br><br></p>
            <img src="cathblu.png" width="135" height="65" alt="image">
        </div>
        <div id="gallery">
            <div id="sv-container"></div>
        </div>
    </div>
    <div id="footer">
        <span id="contact">CONTACT 07891 196778</span>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <a href="mailto:lesley.westrop@gmail.com"><span id="email">lesley.westrop@gmail.com</span></a>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <img src="twittrop.gif" width="46" height="43" style="vertical-align: middle;" alt="image">
        <a href="http://www.twitter.com/LesleyWestrop"><span id="twitter">@LesleyWestrop</span></a>
        <p><br></p>
    </div>
    <div id="copyright">
        <span>&copy; Lesley Westrop, 2012</span>
    </div>
    <p><br><br><br></p>
</body>
</html>

All you will need to do in addition to swapping the code is to include the file 'jquery-1.8.1.min.js' in your 'cathedral' folder alongside the 'cathedral.htm' page. It can be downloaded from this web page. (It is used to dynamically resize the gallery horizontally when the user changes the browser window size.)

Steven Speirs
SimpleViewer Support Team.

Re: Appreciate someone viewing a couple of galleries and advising...

Hi Steven,  again I thank you for the time spent on analysing my page.

I use an old Frontpage program which is what I cut my teeth on.  I have no experience of CSS and whenever I have looked at programs which use it as a default (Dreamweaver for example) I am blind to what greets me on the screen.

I am chatting with a pal up the road who I know is more familiar with more modern authoring tools than I am and with a little input from him and yours too, we will finally get there.

I will let you know how I get on.

I will also be considering sitting down with a big book on CSS, but I must sort out Lesley's site first before embarking on a learning process elsewhere.

Keith