Jump to content


Photo

Question


  • Please log in to reply
2 replies to this topic

#1 Moznic

Moznic

    New member

  • New Members
  • 2 posts

Posted 16 February 2012 - 07:15 PM

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.
  • 0

#2 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,730 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 17 February 2012 - 06:54 AM

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?
  • 0

#3 Moznic

Moznic

    New member

  • New Members
  • 2 posts

Posted 17 February 2012 - 12:09 PM

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!
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users