Trying to keep things simple, sometimes I use the 'max-width' and 'min-width' properties of CSS. Makes it simple if you are letting someone upload images to a site for you.
For example, blogCFC has a slideshow function. Here's an example. Ok.. so you've got this slideshow and you are letting someone else upload the images or create totally new slideshows.. Telling them to keep the images a to a certain width is all fine but.. People tend to “forget” and then you may have an image or two soooo big that they break your lay-out. Well, that's were the 'max-width' property would come in.
In your style sheet you could add something like:
.slideshow img {
max-width: 150px;
}
This would effectively make every image in the slideshow class have a max width of 150 pixels.
Another property is the 'min-width' which, the liquid skin of blogCFC uses in the layout css. It sets the minimum width of the page to 800 pixels.. looking like this in the style sheet:
#page{
width:90%;
min-width:800px;
margin: 0 auto 0 auto;
padding: 0 0 10px 0;
}
Now.. all this is great but…. doesn't really work in Internet Explorer for Windows prior to version 7. I was looking for some other solutions when I ran across this javascript from Doxdesk. Their minmax module fixes the css 'min | max' height problems. All you need to do is add this js to your site and call it by inserting a link:
I've attached the file to this entry.. If you make use of this please do not change the author credits found in the file. The author had a few other interesting javascripts.. I havent had time to check those out though. But you can! 😉
Doxdesk.com
© 2007, Robert Owen. All rights reserved.
