How to resize a website?

Question

I am wondering how to resize a website like www.apple.com or www.youtube.com. Where, it has a set width, and when your browser becomes bigger, the spaces on the side become smaller, and when your browser becomes smaller, the spaces start to eventually not be there.
I have tried adding spaces to the side of mine, but when I open it and change the browser size, it keeps the large empty spaces, so someone with a fixed resolution at that, would just see blank when they come to my site until they've scrolled over. I've also tried starting on a small resolution, and when I open that in a bigger screen, it stays in the corner, and I can't use center tags, and I don't know how I'd add margins without effecting the versions on smaller screens. I also run into the problem, when using seperate css files for seperate resolutions, that the height is too small. I also can't use percents, because for what ever reason, I look at my site on one screen using percents, then another, and they are wayyyyy off, usually because of margins that push things too far or too high with percents. I want to do what apple does, and have a fixed website size, and as the screen/browser gets smaller, the spaces to the left and right get smaller and go away... If there is a way to accomplish what I want in javascript, php, or preferably HTML and CSS, please help.

Thank You.

Answer 1

Choosing Dimensions for Your Web Page Layout:



In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/

Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choosing-dimensions-for-your-web-page-layout/

How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/

Care With Font Size: http://www.w3.org/QA/Tips/font-size

Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/t/y/l/ydlyuyd/birtthtw/h/



Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites-shouldnt-look-the-same-across-different-browsers%E2%80%A6here-is-why.html

Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/news/cross-browser-css-in-seconds-with-prefixr/

Responsive Web Design Demystified: http://www.elated.com/articles/responsive-web-design-demystified/



Ron

Answer 2

In IE7 and leter, you note a "resize" button interior the decrease ideal nook of the browser's statys bar. click on the "down" (v) arraow to go with a zoom aspect. The textual content will be smaller yet a minimum of you'd be able to verify the finished web page without scrolling. possibly it's time for a sparkling reveal screen (if you're utilising a operating laptop or computer)? On a respectable 17 inch reveal screen, a decision of 1280 x 1024 is often used. AT this decision highly a lot each and every website is person-friendly to view with IE, FF.

Answer 3

There are two ways of keeping content resizeable: one is a liquid design, and the other is the centered site that you mentioned. The liquid design can be accomplished by setting the site with percents, or absolute positioning as I have accomplished on one of my websites here: http://weeksseth.netne.net/0weeks/index.html or here: http://weeksseth.netne.net/macosx/index.html I used a combination of absolute positioning and percents if you look at the css code for the first site: http://weeksseth.netne.net/0weeks/style.css Notice how the page resizes as you zoom or resize the window. You can replace the percent values with pixels. For the effect that is on the Apple website or another one of my sites: http://www.ftc3750.com/newroboticsstyle.html Try zooming on that site. This was accomplished with auto margins on a main div. Look at the css for the class .main in this css file: http://www.ftc3750.com/style2.css margin is set to auto with a constant pixel amount for the width. If you need help implementing this, just ask me.