Hi there!
I have recently received some very poor feedback on our website.
The critic mentioned that I am not making full use of the width of the screen and therefore I should make changes to do so.
Although I don't entirely agree with this person I am happy to try anything to make the site more pleasing to its viewers. (It should be noted at this point that I have only received one complaint to date)
A typical page on the website in question is http://450squadronraaf.smugmug.com/g.../8206522_8xu3k and I wondered if someone could please advise how I could widen the working area of the page so that it covered the full width of the viewing screen. I am happy to leave the layout in filmstrip at this point, as it suits the purpose.
Hope someone can point me in the right direction, thank you

Filmstrip is an old style that I don't believe is being enhanced. It does not provide a stretchy mode. If you want your images to use more of the available space in the browser I suspect you will need to change to another style.

--- Denise

Originally Posted by denisegoldberg Filmstrip is an old style that I don't believe is being enhanced. It does not provide a stretchy mode. If you want your images to use more of the available space in the browser I suspect you will need to change to another style. --- Denise

Thank you Denise, I have managed to work out which parts of the website I wish to use Filmstrip and which I can use SMUGMUG style etc. which have the stretchy mode availability. However, I still have one issue that I am unable to get to the bottom of, and that is how do I now get my banners to match the width of the screen. I don't seem to be able to find the correct CSS code to apply to the banner information.
Would appreciate your feedback, thank you...

Originally Posted by Child of 450 I still have one issue that I am unable to get to the bottom of, and that is how do I now get my banners to match the width of the screen. I don't seem to be able to find the correct CSS code to apply to the banner information.

It looks like your banner is a single image, and images don't stretch. If you want the banner and navbar to stretch across the browser window the most common practice is to place the banner on the left side of the screen and float the navbar to the right.

Your banner looks like a single image, and you have it above the navbar. You could define the banner in pieces placing part on the left and part on the right and using a background color to make is look like it is a single image. Take a look at JFriend's thread Compact, stretchy, dynamic custom header. That shows how to place the banner and navbar side-to-side. You should be able to adapt the CSS to place multiple banner images.

--- Denise

Originally Posted by denisegoldberg It looks like your banner is a single image, and images don't stretch. If you want the banner and navbar to stretch across the browser window the most common practice is to place the banner on the left side of the screen and float the navbar to the right. Your banner looks like a single image, and you have it above the navbar. You could define the banner in pieces placing part on the left and part on the right and using a background color to make is look like it is a single image. Take a look at JFriend's thread Compact, stretchy, dynamic custom header. That shows how to place the banner and navbar side-to-side. You should be able to adapt the CSS to place multiple banner images. --- Denise

Thanks Denise, I only see one problem with that idea, and that is the number of topics on my drop down nav bar, it simply wouldn't all fit to the right of my header, as it barely fits across the screen now.

Any other ideas?

Originally Posted by Child of 450 Thanks Denise, I only see one problem with that idea, and that is the number of topics on my drop down nav bar, it simply wouldn't all fit to the right of my header, as it barely fits across the screen now.

I wasn't suggesting that you move the navbar to the right; I meant for you to look at how the two pieces were structured to span the browser window, then to adapt the code to do the same thing with multiple banner images. Again, a single image doesn't stretch. When you define your banner as a single piece you specify the size. If you want it to span the width of the browser window you will need to break it into several pieces and place those pieces to the right and left. Otherwise you can just leave it centered, or choose to place the banner image to the right or the left of the window.

--- Denise

Originally Posted by denisegoldberg I wasn't suggesting that you move the navbar to the right; I meant for you to look at how the two pieces were structured to span the browser window, then to adapt the code to do the same thing with multiple banner images. Again, a single image doesn't stretch. When you define your banner as a single piece you specify the size. If you want it to span the width of the browser window you will need to break it into several pieces and place those pieces to the right and left. Otherwise you can just leave it centered, or choose to place the banner image to the right or the left of the window. --- Denise

Ok! so let's see if I have this correct. Does this mean that to have multiple images in the banner I should be able to enter multiple photo details in the following current Banner CSS?
#my_banner {

width: 750px;
height: 175px;
margin: 0 auto;

background: url(http://www.450squadron.org.au/photos...-QKbZnjF-0.jpg) no-repeat;

Originally Posted by Child of 450 Ok! so let's see if I have this correct. Does this mean that to have multiple images in the banner I should be able to enter multiple photo details in the following current Banner CSS? #my_banner { width: 750px; height: 175px; margin: 0 auto; background: url(http://www.450squadron.org.au/photos...-QKbZnjF-0.jpg) no-repeat;

No. That means that you will need multiple divs in your CSS, one for each part of the banner. You will need to place one to the left and float on to the right.

--- Denise

This is very basic but you'd create a header div that would go side to side. Then inside that div create
image div's to position right and left. The header div would get a background color or pattern. The
center symbol and text, transparent image, could be a separate centered div.

Originally Posted by denisegoldberg No. That means that you will need multiple divs in your CSS, one for each part of the banner. You will need to place one to the left and float on to the right. --- Denise

Mm... well, unfortunately you have the upper hand on me, 'cos I am now lost. I really am out of my depth with the terminology "multiple divs" and "float". I have no idea where to start, so I am going to have to live with it until I can get some lessons. Sorry for taking up your time, but I really appreciate your efforts. thank you

Originally Posted by Child of 450 Mm... well, unfortunately you have the upper hand on me, 'cos I am now lost. I really am out of my depth with the terminology "multiple divs" and "float". I have no idea where to start, so I am going to have to live with it until I can get some lessons. Sorry for taking up your time, but I really appreciate your efforts. thank you

Create three images, left image, right image and center image and post a link to them. The center image
would be the symbol, text and background as is now.

The header div background will be the same color as the center image background when we get to it.

Originally Posted by Allen This is very basic but you'd create a header div that would go side to side. Then inside that div create image div's to position right and left. The header div would get a background color or pattern. The center symbol and text, transparent image, could be a separate centered div.

Thanks Al, But I really don't understand any of what you have just said. I'm sure it's the terminology that everyone is using. If it's not asking too much, could you possibly give me an example in the required code, perhaps then I might be able to follow you, please.

Originally Posted by Child of 450 Thanks Al, But I really don't understand any of what you have just said. I'm sure it's the terminology that everyone is using. If it's not asking too much, could you possibly give me an example in the required code, perhaps then I might be able to follow you, please.

Just tested an example. The header html would be something like this. Create the images and we'll try them.

<div id="myHeader">

<div id="leftHeader" style="float:left;"><img src="left image here" /></div>
<div id="rightHeader" style="float:right;"><img src="right image here" /></div>
<div id="centerHeader" align=center><img src="center image here" /></div>

</div>  <!-- closes myHeader -->

Originally Posted by Allen Just tested an example. The header html would be something like this. Create the images and we'll try them. <div id="myHeader"> <div id="leftHeader" style="float:left;"><img src="left image here" /></div> <div id="rightHeader" style="float:right;"><img src="right image here" /></div> <div id="centerHeader" align=center><img src="center image here" /></div> </div> <!-- closes myHeader -->

Hi Al thank you so much that's exactly what I was looking for, and I have tried the above html in the header after deleting my original code in both the CSS and Header and yes it does work using the following images (although they still need some changes). However, as I have multiple headers (a different header for each topic) the above code naturally overrides them. I thought I almost had it but although the headers still appeared in each topic, so did the new header (over the top of the old ones). A little confusing I know, but I have included an example of the ORIGINAL code from both CSS and HTML so that you can see for yourself what I need to change and where the changes need to be without losing the multiple headers (which I would also like to have appear as per your above coding).

ORIGINAL CSS Code:
#my_header {
width: 750px;
height: 175px;
margin: 0 auto;
background: url(http://www.450squadron.org.au/photos...-QKbZnjF-0.jpg) no-repeat;
}
.category_About_Us #my_header {
background: url(http://www.450squadron.org.au/photos...-QKbZnjF-0.jpg) no-repeat;
}



ORIGINAL HTML:
<div id="my_header"></div>

New image samples:

Header Image Left
http://www.450squadron.org.au/photos...-xTkwsjk-L.jpg
Header image right
http://www.450squadron.org.au/photos...-nWbWCLC-L.jpg
Header Image center
http://www.450squadron.org.au/photos...-cWXTs3K-L.jpg

Originally Posted by Child of 450 Hi Al thank you so much that's exactly what I was looking for, and I have tried the above html in the header after deleting my original code in both the CSS and Header and yes it does work using the following images (although they still need some changes). However, as I have multiple headers (a different header for each topic) the above code naturally overrides them. I thought I almost had it but although the headers still appeared in each topic, so did the new header (over the top of the old ones). A little confusing I know, but I have included an example of the ORIGINAL code from both CSS and HTML so that you can see for yourself what I need to change and where the changes need to be without losing the multiple headers (which I would also like to have appear as per your above coding). ORIGINAL CSS Code: #my_header { width: 750px; height: 175px; margin: 0 auto; background: url(http://www.450squadron.org.au/photos...-QKbZnjF-0.jpg) no-repeat; } .category_About_Us #my_header { background: url(http://www.450squadron.org.au/photos...-QKbZnjF-0.jpg) no-repeat; } ORIGINAL HTML: <div id="my_header"></div> New image samples: Header Image Left http://www.450squadron.org.au/photos...-xTkwsjk-L.jpg Header image right http://www.450squadron.org.au/photos...-nWbWCLC-L.jpg Header Image center http://www.450squadron.org.au/photos...-cWXTs3K-L.jpg

How many different versions of headers do you want? All 3 parts or just the new one?
homepage?
about?
different categories?

Looks like this might work for the three only for the homepage. Crop your center image so it repeats.
It will fill the center area when the browser is stretched. The center is actually the background of the
entire header with the other two, R&L, floating over it. The center image can be only one repeating not three.

<div id="my_HP_header"> 
<div id="leftHPheader"></div>
<div id="rightHPheader"></div>
</div>  <!-- closes my_HP_header -->

<div id="my_header"></div>

CSS

#my_HP_header {display:none;}
.homepage #my_HP_header {display:block;}
.homepage #my_header {display:none;}

#my_HP_header {
   position:relative;
   height: 150px;
   margin: 0 auto;
   background: url(/photos/i-cWXTs3K/0/L/i-cWXTs3K-L.jpg) repeat-x;
}

#leftHPheader {
   position:absolute;
   left:0;
   width: 314px;
   height: 150px;
   background: url(/photos/i-xTkwsjk/0/L/i-xTkwsjk-L.jpg) no-repeat;
}

#rightHPheader {
   position:absolute;
   right:0;
   width: 535px;
   height: 150px;
   background: url(/photos/i-nWbWCLC/0/L/i-nWbWCLC-L.jpg) no-repeat;
}

Originally Posted by Allen How many different versions of headers do you want? All 3 parts or just the new one? homepage? about? different categories? Looks like this might work for the three only for the homepage. Crop your center image so it repeats. It will fill the center area when the browser is stretched. The center is actually the background of the entire header with the other two, R&L, floating over it. The center image can be only one repeating not three. <div id="my_HP_header"> <div id="leftHPheader"></div> <div id="rightHPheader"></div> </div> <!-- closes my_HP_header --> <div id="my_header"></div> CSS #my_HP_header {display:none;} .homepage #my_HP_header {display:block;} .homepage #my_header {display:none;} #my_HP_header { position:relative; height: 150px; margin: 0 auto; background: url(/photos/i-cWXTs3K/0/L/i-cWXTs3K-L.jpg) repeat-x; } #leftHPheader { position:absolute; left:0; width: 314px; height: 150px; background: url(/photos/i-xTkwsjk/0/L/i-xTkwsjk-L.jpg) no-repeat; } #rightHPheader { position:absolute; right:0; width: 535px; height: 150px; background: url(/photos/i-nWbWCLC/0/L/i-nWbWCLC-L.jpg) no-repeat; }

Hi Al, As previously stated I currently have a different header for every category which works very well for me, and it is my preference to keep it that way. However, I wish to have each of those headers cover left to right of the screen, not just on the home page header.
So, before I start, do you still think that the above code will work? If so, which part of the above CSS coding do I put beside each category, so that each of the category header shows its own individual images?

Originally Posted by Child of 450 Hi Al, As previously stated I currently have a different header for every category which works very well for me, and it is my preference to keep it that way. However, I wish to have each of those headers cover left to right of the screen, not just on the home page header. So, before I start, do you still think that the above code will work? If so, which part of the above CSS coding do I put beside each category, so that each of the category header shows its own individual images?

Well, thought I'd try it anyway and yes the home page header works but then there are NO headers for any of the following pages, and the center image didn't repeat, as I was expecting it to. What are your thoughts, now please?

Originally Posted by Child of 450 Well, thought I'd try it anyway and yes the home page header works but then there are NO headers for any of the following pages, and the center image didn't repeat, as I was expecting it to. What are your thoughts, now please?

Did you remove the changes? It should work, must of been some simple code error on pasting in. Can you put back in and we'll look.

I just tried the code and it worked.

Originally Posted by Child of 450 Well, thought I'd try it anyway and yes the home page header works but then there are NO headers for any of the following pages, and the center image didn't repeat, as I was expecting it to. What are your thoughts, now please?

This does not go in CSS like this, only the pure CSS parts of it. It's for setting the style in html.
Remove only the red highlighted parts at the first and last of it.

<!--%%%%%%%%%%%% QuickMenu Styles [Keep in head for full validation!] %%%%%%%%%%%-->
<style type="text/css">


/*!!!!!!!!!!! QuickMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}


/*!!!!!!!!!!! QuickMenu Styles !!!!!!!!!!!*/


    /* QuickMenu 0 */

    /*"""""""" (MAIN) Items""""""""*/    
    #qm0 a    
    {    
        padding:5px 18px;
        color:#111111;
        font-family:Arial;
        font-size:12px;
        text-decoration:none;
    }


    /*"""""""" (SUB) Container""""""""*/    
    #qm0 div, #qm0 ul    
    {    
        padding:10px;
        margin:-2px 50px 50px;
        background-color:transparent;
        border-style:none;
    }


    /*"""""""" (SUB) Items""""""""*/    
    #qm0 div a, #qm0 ul a    
    {    
        padding:3px 10px 3px 5px;
        background-color:transparent;
        font-size:12px;
        border-width:0px;
        border-style:none;
    }


    /*"""""""" (SUB) Hover State""""""""*/    
    #qm0 div a:hover    
    {    
        background-color:#dadada;
        color:#cc0000;
    }


    /*"""""""" (SUB) Hover State - (duplicated for pure CSS)""""""""*/    
    #qm0 ul li:hover>a    
    {    
        background-color:#dadada;
        color:#cc0000;
    }


    /*"""""""" (SUB) Active State""""""""*/    
    body #qm0 div .qmactive, body #qm0 div .qmactive:hover    
    {    
        background-color:#dadada;
        color:#cc0000;
    }


    /*"""""""" Individual Titles""""""""*/    
    #qm0 .qmtitle    
    {    
        cursor:default;
        padding:3px 0px 3px 4px;
        color:#444444;
        font-family:arial;
        font-size:12px;
        font-weight:bold;
    }


    /*"""""""" Individual Horizontal Dividers""""""""*/    
    #qm0 .qmdividerx    
    {    
        border-top-width:1px;
        margin:4px 0px;
        border-color:#111111;
    }


    /*"""""""" Individual Vertical Dividers""""""""*/    
    #qm0 .qmdividery    
    {    
        border-left-width:1px;
        height:15px;
        margin:4px 2px 0px;
        border-color:#111111;
    }


    /*"""""""" (main) Rounded Items""""""""*/    
    #qm0 .qmritem span    
    {    
        border-color:#dadada;
        background-color:#f7f7f7;
    }


    /*"""""""" (main) Rounded Items Content""""""""*/    
    #qm0 .qmritemcontent    
    {    
        padding:0px 0px 0px 4px;
    }


    /*"""""""" Custom Rule""""""""*/    
    ul#qm0 li:hover > a    
    {    
        background-color:#f7f7f7;
    }


    /*"""""""" Custom Rule""""""""*/    
    ul#qm0 ul    
    {    
        padding:10px;
        margin:-2px 0px 0px;
        background-color:#f7f7f7;
        border-width:1px;
        border-style:solid;
        border-color:#dadada;
    }
#gallery_3635213 {
font-weight: normal;
}

</style>

Originally Posted by Allen This does not go in CSS like this, only the pure CSS parts of it. It's for setting the style in html. Remove only the red highlighted parts at the first and last of it. <!--%%%%%%%%%%%% QuickMenu Styles [Keep in head for full validation!] %%%%%%%%%%%--> <style type="text/css"> /*!!!!!!!!!!! QuickMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/ .qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;} /*!!!!!!!!!!! QuickMenu Styles !!!!!!!!!!!*/ /* QuickMenu 0 */ /*"""""""" (MAIN) Items""""""""*/ #qm0 a { padding:5px 18px; color:#111111; font-family:Arial; font-size:12px; text-decoration:none; } /*"""""""" (SUB) Container""""""""*/ #qm0 div, #qm0 ul { padding:10px; margin:-2px 50px 50px; background-color:transparent; border-style:none; } /*"""""""" (SUB) Items""""""""*/ #qm0 div a, #qm0 ul a { padding:3px 10px 3px 5px; background-color:transparent; font-size:12px; border-width:0px; border-style:none; } /*"""""""" (SUB) Hover State""""""""*/ #qm0 div a:hover { background-color:#dadada; color:#cc0000; } /*"""""""" (SUB) Hover State - (duplicated for pure CSS)""""""""*/ #qm0 ul li:hover>a { background-color:#dadada; color:#cc0000; } /*"""""""" (SUB) Active State""""""""*/ body #qm0 div .qmactive, body #qm0 div .qmactive:hover { background-color:#dadada; color:#cc0000; } /*"""""""" Individual Titles""""""""*/ #qm0 .qmtitle { cursor:default; padding:3px 0px 3px 4px; color:#444444; font-family:arial; font-size:12px; font-weight:bold; } /*"""""""" Individual Horizontal Dividers""""""""*/ #qm0 .qmdividerx { border-top-width:1px; margin:4px 0px; border-color:#111111; } /*"""""""" Individual Vertical Dividers""""""""*/ #qm0 .qmdividery { border-left-width:1px; height:15px; margin:4px 2px 0px; border-color:#111111; } /*"""""""" (main) Rounded Items""""""""*/ #qm0 .qmritem span { border-color:#dadada; background-color:#f7f7f7; } /*"""""""" (main) Rounded Items Content""""""""*/ #qm0 .qmritemcontent { padding:0px 0px 0px 4px; } /*"""""""" Custom Rule""""""""*/ ul#qm0 li:hover > a { background-color:#f7f7f7; } /*"""""""" Custom Rule""""""""*/ ul#qm0 ul { padding:10px; margin:-2px 0px 0px; background-color:#f7f7f7; border-width:1px; border-style:solid; border-color:#dadada; } #gallery_3635213 { font-weight: normal; } </style>

Hi Al, replaced the information with the new images and the header on the home page works well, but now I don't have any headers on the following pages. Have also removed the above red type as suggested. Where to now mate? I will leave the header as is until you get to have a look at it, and I will log back in tonight to see what you think. As I am in Oz our time zones are a little screwed up, but will stay up tonight to see if I can work with it while your online. Thanks heaps!