ivanmax Posted April 7, 2009 Share Posted April 7, 2009 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 Quote Link to comment Share on other sites More sharing options...
OJB Posted April 7, 2009 Share Posted April 7, 2009 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 Quote Link to comment Share on other sites More sharing options...
ivanmax Posted April 7, 2009 Author Share Posted April 7, 2009 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 Quote Link to comment Share on other sites More sharing options...
TCH-Bruce Posted April 7, 2009 Share Posted April 7, 2009 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. Quote Link to comment Share on other sites More sharing options...
TCH-Thomas Posted April 7, 2009 Share Posted April 7, 2009 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 Quote Link to comment Share on other sites More sharing options...
OJB Posted April 7, 2009 Share Posted April 7, 2009 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. Quote Link to comment Share on other sites More sharing options...
ivanmax Posted April 13, 2009 Author Share Posted April 13, 2009 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.