Jump to content
Sign in to follow this  
ivanmax

Css Resize

Recommended Posts

Hi,

 

I am building a website with resources for primary school teachers. I have built the design for the main pages of the site and everything looked fine in my computer screen. Here is a link:

 

http://www.primaryteachingresources.net/te...l/website9.html

 

However when I tried the main page at different screens resolutions the right lower part of the page started to become smaller and smaller.

 

Here is the page at 1440 X 900 (everything looks fine here):

 

http://www.flickr.com/photos/22338638@N06/3421175089/

 

 

Here it is at 1280 X 768 (still everything looks fine):

 

http://www.flickr.com/photos/22338638@N06/3421981992/

 

 

Here it is at 1024 X 768 (you can see the right lower part of the page starts to get smaller):

 

http://www.flickr.com/photos/22338638@N06/3421176179/

 

And here it is at 600 X 800 (total disaster...the right lower part gets smaller and smaller...also the letters get ones on top of another)

 

http://www.flickr.com/photos/22338638@N06/3421982902/

 

Why does this happen? I have spent the whole day trying to find out before writing here. Please give a hand.

 

Thanks a lot in advance,

 

Ivánmax

Share this post


Link to post
Share on other sites

The reason this has happened is you are using relative sizes in your CSS, not absolute.... i.e. you are using percentages of the page width and not fixed widths etc.

 

I can understand why you would do this because you want it to expand/contract to the size of the window. The problem is that the font size and images you have used will not shrink, so whilst the elements around them are shrinking the text and the images are not, hence you get a mangled effect when you are on smaller window resolutions.

 

My suggestion would be either:

 

1) Create a fixed width design that is the same size on all windows and resolutions (using absolute values e.g. width: 900px;)

2) Use min-width to specify a minimum width your elements can shrink to before stopping. This will probably result in scroll bars on smaller resolutions but at least it wont be all squished. (e.g. min-width: 40px; or min-width: 10%;) etc

 

Bare in mind min-width behaves differently in different browsers and I dont know if IE6 even supports it, but there are 'hacks' out there to help.... just google IE6 min-width

Share this post


Link to post
Share on other sites

Thanks a lot. Is there a way to make the images and text shrink at the same rate as the other elements?

 

Thanks in advance,

 

Iván

Share this post


Link to post
Share on other sites

I don't think you can do anything about the images but text size can be set to percentages instead of pixels and they will shrink/grow when resized using style.

Share this post


Link to post
Share on other sites

I made a search on google and it looks like you can resize images in css but the images will probably look funny when resized

Share this post


Link to post
Share on other sites

The only 'good' way to resize images is using a library such as the built in PHP GD library, but that is alot of work just to have an adaptable layout.

 

As bruce says you can set font sizes to be relative too for instance:

 

font-size: 10%;

 

 

To be honest this sort of layout will usually cause more issues than benefits. I strongly suggest something with either a min-width/min-height or something fixed width because it means you won't have to keep messing about with percentages to ensure it looks fine on all resolutions in all browsers.

Share this post


Link to post
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.

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.

Sign in to follow this  

×
×
  • Create New...