View Full Version : Full sized website

07-17-2011, 12:29 AM

First of all, i'm sorry for my english, it's not my native language.
I am new on this forum, I hope I didn't miss any presentation thread :S

I'd use the ScrollTo in jQuery, but i've got some problems with the HTML/CSS (even if I thought that I knew those languages pretty well before starting learning jQuery :S).

Well, I'd make the same kind of website than this:

I do know the guy used a div with a very large width (like 30.000 pixels for this website) and an height of... 100% I guess?

I have some problems for the 100% things and I couldn't find any tutorial explaining it. How the webdesigner of this website placed his content exactly in the middle of every pages, on every screens? When i'm coding, I generally use a wrapper of 1024 width, as most of people are running with 17"+ screens.

How do I have to organize my css to obtain a kind of same result? Any of you got a tutorial which could help me?

PS: I'm not asking the way to use the jQuery system (scrollTo), just how to code a website on a big width AND make it fits for every screens.

Thank you in advance,

Sylvain, computer graphics student.

07-19-2011, 08:04 PM
Up :<

07-19-2011, 08:57 PM
margin: auto; or margin: 0 auto; will generate equal left/right margins that should center your content.

07-20-2011, 12:21 AM
Ya I know this one... but on a 30 000 pixel width, how do I place my elements correctly. To have... One page on 1200px, another on 1200,etc... everything placed correctly.

07-20-2011, 12:49 AM
* {
margin: 0; padding: 0;
html {
width: 200%; /* 100 * number of pages %) */
height: 100%;
body {
width: 100%;
height: 100%;
div.page {
width: 50%; /* 100 / number of pages % */
height: 100%;
float: left;

The only problem with this is that you cannot get a precise decimal from some numbers (e.g. if you have 3 pages, each one would need be 33.3333....% wide). One way this could be fixed would be by having your pages scroll vertically as opposed to horizontally, thus they could all have a comfortable width/height of 100%.

The site you mentioned is actually not optimized very well for different page sizes. What it does is oversize the pages and center the content (for a certain page width) so that you can resize your browser and you will still be able to at least see the content. However, the layout breaks in an 800x600 layout or larger than 1280x1024.

07-20-2011, 03:22 PM
Alright, it's working! Thank you very much :)