Hi Sean Clarke!

Well first off your banner image is very wide for most monitors. It's what's pushing the content off to the right. Next is your tab images, when scrunched all together you are still limited to a screen size of around 1200 pixels.

I think most people run at resolutions around 1024x768 or 1440x900 (widescreen). I could be wrong, but I'm sure that mobile devices use smaller resolutions that I still need to learn about.

So it might be best to resize your banner and tab images... then look at the template below for screen resizing.

---

How to Adjust Your Page For Different Screen Resolutions

Images
I started out with a standard background image and resized it to fit the following screen widths: 800, 1024, 1280 and 1600. Then uploaded them to photobucket.

• blue-800.jpg
• blue-1024.jpg
• blue-1280.jpg
• blue-1600.jpg

CSS
Measure the inside width of each background - I recommend using MeasureIt (Firefox only addon). Now make a separate CSS file for each resolution and use the measured inside width as the "PageWrapper" width... the css only needs the size of the wrapper and left & right content zones... Make sure the width is followed by an "!important".

I left these as separate CSS files in case you want to use different box borders for smaller sizes. Here is what each file looks like:

Upload these CSS files to your site through the file manager.

*Note: "max-width" in the CSS does not work with IE6, so read the comments below as to the additional variables required to make it work.

blue-800.css

body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-800.jpg) top center;}
.PageWrapper {width:555px !important;}
.LeftContentZone {width:175px !important;}
.RightContentZone {width:175px !important;}
.CenterContentZone {max-width:180px; width:auto !important; width:180px;}

blue-1024.css

body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-1024.jpg) top center;}
.PageWrapper {width:860px !important;}
.LeftContentZone {width:200px !important;}
.RightContentZone {width:200px !important;}
.CenterContentZone {max-width:440px; width:auto !important; width:440px;}

blue-1280.css

body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-1280.jpg) top center;}
.PageWrapper {width:975px !important;}
.LeftContentZone {width:225px !important;}
.RightContentZone {width:225px !important;}
.CenterContentZone {max-width:500px; width:auto !important; width:500px;}

blue-1600.css

body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-1600.jpg) top center;}
.PageWrapper {width:1360px !important;}
.LeftContentZone {width:250px !important;}
.RightContentZone {width:250px !important;}
.CenterContentZone {max-width:825px; width:auto !important; width:825px;}

The Code

Add this script to your banner area or footer

<script type="text/javascript">
$(document).ready(function(){
 adjustCSS();
 $(window).resize(function(){ adjustCSS() });
})
function adjustCSS(){
 if (!$('#screencss').length) $('body').append('<div id="screencss"></div>');
 var pageWidth = $(window).width();
 var sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-800.css";
 if (pageWidth > 900) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1024.css";
 if (pageWidth > 1010) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1280.css";
 if (pageWidth > 1420) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1600.css";
 $("#screencss").html('<link href="' + sizeSelected + '" media="screen" rel="Stylesheet" type="text/css" />');
}
</script>

• If you are considering adding css for smaller screens, like an iphone, then you can make more files... in the example below I started with the sizeSelected variable at "blue-320.css" and the first (pageWidth > 510) line, like this:
  
   var sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-320.css";
   if (pageWidth > 510) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-640.css";
   if (pageWidth > 580) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-800.css";
   if (pageWidth > 900) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1024.css";
   if (pageWidth > 1010) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1280.css";
   if (pageWidth > 1420) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1600.css";


• Adjust the file location to where you uploaded the separate CSS files
• Adjust the pageWidth size (in red) to your liking. There is an additional amount added so the outside borders in the background are visible. Once the width drops below that, the next size is chosen.
• Since IE6 doesn't like the max-width CSS variable, there is a work-around to get it to work, but it requires you to enter the width twice.
  

  .CenterContentZone {max-width:825px; width:auto !important; width:825px;}

  In the example above, max-width is set to 825px and width at the end is set to that as well. Also, these three variables must stay in their present order.

Edit (3/12/2009): Added the extra CSS required to make the max-width variable work with IE.
Edit (9/25/2009): Added comment about using MeasureIt addon for Firefox
Edit (12/21/2009): Updated code to automatically adjust while resizing the browser window.

Hi.

I am trying to implement this solution here -> http://www.guildportal.com/Guild.aspx?GuildID=314588&TabID=2637476. It worked out fine for width, but the background doesn't go all the way down, filling the height. For now I have only updated the 1600 image file because it's the one that loads on my resolution (1440x900).

Any help will be apreciated.

Thanks for the reply Eph.

I tried your code but it made the background disapear... any idea why or any other suggestions?

Hey Haruosan!

I took a look at your site and files (thanks for providing the link) and the problem is in your CSS. When you add the extra parameters for the background CSS, they need to be grouped appropriately.

This won't work because top and center are separated:

body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-800.jpg) top no-repeat fixed center;}

This will work (top and center are together)

body {background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-800.jpg)top center no-repeat fixed ;}

When you are using words to indicate position, it doesn't matter what order you put them in as long as they are together. But if you are using percentages and/or exact numbers, the order is x-position y-position.

body {background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-800.jpg) 50% 20px center no-repeat fixed ;}

* this will position the background image 20 pixels from the top and centered left-to-right (50%)

Also, IE will ignore the background portion of the CSS if there isn't a space after the parenthesis. I just had this problem with someone else... for some reason the forum editor or the posting portion removes spaces. So this would make IE think it was reading gibberish and ignore it, but other browsers were able to understand it. In the example below, IE will ignore this bit of CSS completely (note the missing space between the right parenthesis and the word top):

body {background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-800.jpg)top center no-repeat fixed ;}

*cries *

Why that does not work anymore ?

That worked like 2 hours ago... and now... nothing... I guess I did something wrong... but what...
Anything changed on Guildportal recently ?


Is there some issues linked with  the required element $block[boilerplate]?   I guess it's my main question :

I read that $block[boilerplate] is like a marker, but if it's required, where am I supposed to put it ?  :/


Sorry if the answer has already been given, because english is not my native language, and may be because I'm tired.. I did not find any clear answer 


P.S : Is there a specific way to use the search function on this forum ? For instance, when I did a search on "banner", it did not find anything... I'm that stupid ?