HTML QUERY

[BJD88]

Hi guys!

 

So i'm making a new website for my workplace and really confused about webpage sizing. I've designed a homepage in photoshop following a tutorial that uses a width of 1020px - which displays perfectly on my 1680px screen. Now what im confused about is how to 'scale' the webpage down to fit a common user's pc screen with a resolution of say 1024 x 768px :confused::eek: i've tested my current design in the computers at work which use the 1024 width resolution and the page displays in its pre-defined size of 1020px (basically filling the entire screen) but the design is focused on a centered layout and shouldnt fill the whole screen if you understand what I mean.

 

The easiest way to describe what im after is a way of displaying my site with a reduced zoom percentage on 1024px screens in order for the layout to show properly. (sorry if that doesn't help at all :eek:)

 

[ATTACH=CONFIG]962.vB5-legacyid=1860[/ATTACH] So this is how the website is displayed on a 1024px wide screen (graphics width is 1020px). Content completely fills the page.

 

[ATTACH=CONFIG]961.vB5-legacyid=1859[/ATTACH] This is how I want the website to be displayed on the 1024px wide screen.

 

If anyone could point me in the right direction about solving this I would be so grateful. I work for a school and it would be great for us to have a half-decent site up and running as the current one is fairly aged now!

 

regards, BJD

[RandyL]

A fixed width, which is what you are using, is just that. The size is fixed. So depending on what users display settings are or what size screen, remember the old CRT monitors? then the page may fill the screen, may not fill the screen or even be to big for the screen which would mean sideways scrolling.

 

Using percentages for the width is the secret. Set them at less then 100%.

 

Without seeing your source code I don't know where or how you are setting your widths.

 

I can give you one example though. If your page is setup using tables then you make one large table set at 100%. Then you make smaller tables inside of tables making them less then 100%.

 

So if you use 70% as your next inside table and center it then that will leave your backround at 15% on both sides which totals 100%.

 

Using this method will utilize the full screen of everyones computer without sideways scrolling and give you your unused margins on the sides.

 

If you go to Page>View Source you can copy the code and paste it here. Unfortunately I only have minor experience in Pure HTML. If it is set up with CSS for instance I wouldn't have a clue. I also have no experience using Photoshop to create web pages.