Jump to content

[SOLVED] Adjusting pae for the resolution?


budimir

Recommended Posts

Hey guys,

 

I need small help, or better said advice.

 

What are you doing for adjusting the pages for different screen resolutions ?

 

Right now, I have users in my company which are using different resolutions: 1024x768, 1240x1280, 1440x900...

 

I'm using a small javascript snipet which is checking the screen resolution and then loading different web page wich I adjusted for that resolution, but it's not always working correctly.

 

Do you have any better solutions??

Link to comment
Share on other sites

Thats just some basic css. U dont set a fixed width for an element (like width:850px); but u set it to a percentage, like width:90%;. Basically:

 

[div id=wrapper" style="width:90%]

[div id=content]Some Content[/div]

[div id=sidebar]Sidebar here[/div]

[/div]

 

Everything will wrap depending on the resolution, so if the guy has a 1024px resolution, the page width will be 90% of 1024 = ~921px. Thats the same for bigger resolutions. I suggest reading something on liquid layouts; u can search on google as there are quite a lot.

 

EDIT: I took for granted that all the other elements inside the wrapper will have no width, but thats rarely the case. If u want to set a width for "content" u must set it also to a percentage, as a fixed width will have no effect for a liquid layout. So lets say u may end with: content width=70% and sidebar width=30%.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.