Jump to content
Killersites Community
Sign in to follow this  
iNoTo

Question

Recommended Posts

Greetings,

 

 

I would like to ask if there is a way to make a web layout fits for every resolution. As in if I see it on a resolution of 1440*980 px it would still fit on that resolution even the positions of the resources.

 

Like that website: http://www.mmosite.com/ for example, when I scroll out it stays at the same spot, but when I do that on the page that I'm currently creating everything seems to be out of place.

 

I hope to receive a positive feedback.

 

Thanks in return.

Share this post


Link to post
Share on other sites

I'm not totally sure I understand you correctly, but I'll try and see if I can answer:

 

Websites are designed either at a set width or fluid (using %). If you design a page with a set width, let's say 980 wide, centered, then you'll see your content in the middle and, on a resolution of 1280, you'd see 150px worth of background on each side. If you view the same page on a resolution of 1600, your content won't change, but now you'll see 310px of background on each side.

 

If you design the layout fluid, lets say your content to be 90%, then it'll be 1152px wide when viewed on a monitor set to a resolution of 1280. If you switch to a monitor with a resolution of 1900, the content area is now 1710 px wide.

 

There's also a way to design with min/max width, that's kind of a hybrid between the above, but that's doesn't work in all browsers.

 

When you zoom in or out on a page, that's not the same as changing resolution.

 

The example page you posted, for example, does not fit on my 1280 monitor, it gives me a scroll bar, but it fits nicely to my 1600 monitor. I looked at their CSS to see how they laid it out, but all that code is in one huge line, and I don't really feel like digging through that to see what exactly they have going.

 

Do you have a link to the page you are working on, so we can see what's happening with the 'out of place' part? Or, if it's not online, you can show us the HTML and the CSS you're using.

 

Does any of this answer your question at least somewhat?

Share this post


Link to post
Share on other sites

I'm not totally sure I understand you correctly, but I'll try and see if I can answer:

 

Websites are designed either at a set width or fluid (using %). If you design a page with a set width, let's say 980 wide, centered, then you'll see your content in the middle and, on a resolution of 1280, you'd see 150px worth of background on each side. If you view the same page on a resolution of 1600, your content won't change, but now you'll see 310px of background on each side.

 

If you design the layout fluid, lets say your content to be 90%, then it'll be 1152px wide when viewed on a monitor set to a resolution of 1280. If you switch to a monitor with a resolution of 1900, the content area is now 1710 px wide.

 

There's also a way to design with min/max width, that's kind of a hybrid between the above, but that's doesn't work in all browsers.

 

When you zoom in or out on a page, that's not the same as changing resolution.

 

The example page you posted, for example, does not fit on my 1280 monitor, it gives me a scroll bar, but it fits nicely to my 1600 monitor. I looked at their CSS to see how they laid it out, but all that code is in one huge line, and I don't really feel like digging through that to see what exactly they have going.

 

Do you have a link to the page you are working on, so we can see what's happening with the 'out of place' part? Or, if it's not online, you can show us the HTML and the CSS you're using.

 

Does any of this answer your question at least somewhat?

 

Yes, it does indeed answer my question. Thank you for the feedback!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×