Jump to content

Question


iNoTo

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.

Link to comment
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?

Link to comment
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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...