Css Resize

[ivanmax]

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

[OJB]

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

[ivanmax]

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

[TCH-Bruce]

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.

[TCH-Thomas]

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

[OJB]

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.

[ivanmax]

Thanks!

 

I manage to solve the problem playing around with "min width":

 

http://www.primaryteachingresources.net/te.../website12.html

 

Regards and thanks a lot

 

Iván