CODEWITHSUNDEEP
css
koool
koool

Reputation: 15527

css layout : screen resolution problem

I am stuck on how should I cope with the screen resolution problem ....

  1. If I design for High resolution(1280px wide) a very long horizontal scroll comes up on low resolution monitors

  2. If I design for low resolution the website seems to utilize jus a little space on the browser

please guide me how to get around this problem any help would be appreciated thanks

Upvotes: 2

Views: 5594

Answers (6)

Kashyap Vyas
Kashyap Vyas

Reputation: 1

screen resolution problem is not solved by any margin , padding ,absolute and relative when it comes in to body element ..... this is one of solution which i can prefer for one of case : use offset in window resize function to another element from which you want to alignment (offset top and offset left) example : $(window).resize(function () { var p = $("#divfromwhichyouwantalignment"); var offset = p.offset(); $(".element1toalign").offset({ left: offset.left }); $(".element2toalign").offset({ left: offset.top + 350 }); });

Upvotes: 0

Magnum26
Magnum26

Reputation: 275

I always use the rule of designing for the 978px Grid.

#container {
  width: 978px;
  margin: 0 auto;
}

This means it will fit in browsers down to 1024x768 and display centered in higher resolutions.

Upvotes: 1

ricosrealm
ricosrealm

Reputation: 1636

There are several suggestions...

  1. Design your site to center everything horizontally, along with designing with fixed widths. Then make sure that the most important part of your content stays in the center. Background images can fill the background area without causing a horizontal overflow (the scrollbar being shown).

  2. Use a design that fills 100% horizontally and make placements based on percentage width's. This may be difficult depending on your design but if you use some fixed width aspects from #1 that can help.

  3. Use conditional CSS loads. Only recommend this if you really need very different layouts for different screen sizes (like mobile sites). You can use Javascript to get the document.body.clientWidth and document.body.clientHeight to get the current window size and load something based on this. Remember though... a user can resize the screen so it won't be as great as #1 or #2.

Upvotes: 2

rahim asgari
rahim asgari

Reputation: 12437

U have two choices:

1-Make your layout width about 980px. so that users with 1024 resolution and higher will see all the screen without scroll.

2-Make your layout 100% width. without specifying constant width for your elements in pixel set their width in percent. so that every body with any resolution will see the whole page without scroll bars.

Upvotes: 2

Gerben Jacobs
Gerben Jacobs

Reputation: 4583

Google for "Responsive Web Design"

Upvotes: 2

SteeveDroz
SteeveDroz

Reputation: 6156

I had this problem before...

CSS can't detect screen size, but Javascript can. I don't remember how, though. But it can tell you what size does the browser window have. Depending of this size, you can then link to a CSS or another.

Upvotes: 1

Related Questions