Css-based "i-frames" (sort Of) A couple of ways to do it...

[jlhaslip 4]

I got thinking that it might be nice to have a method to load a bunch of pictures up to a site, but not have them taking up a lot of space. And without using a bunch of php, while still presenting the entire picture. And using full-on CSS coding, not tables or frames.

So here you go... a "picture in a picture" method.

A CSS framed picture

And a "hidden" "picture in a picture" method.

A "hidden" CSS framed picture

Sort of a way to 'hide the picture and let the user decide if they want to actually see the image. All it does is use positioning for placing the image down and to the right about the width/height of the iframe outline. Margins top and left would likely work as well.
This demonstration uses position:absolute to present them on the demo pages, but the 'frame' can be placed using any of the various positioning techniques in CSS. Or probably Tables, too.

Enjoy.

( ps: this picture is from a Memorial service for one of the Timber Framers Guild Members who was active in building the Timber Framed Bridge in the picture... )

And here is the CSS for the placement of the "mid" div (the picture) and the "outer" div (the basic frame). Adjust the positioning and/or sizes to suit.

#mid {	 position:absolute;	 top: 0px;	  /* or the height of the 'frame' to hide the picture  */	 left: 0px;	  /* or the width of the 'frame' to hide the picture  */	 background-color: #eeeeee;	 margin: 0px;	 padding: 0px;	 }	 #outer {	 position:absolute;	 top: 80px;			/* or whatever you need to position the 'frame' */	 left: 80px;			/* or whatever -- ditto --  */	 width: 200px;	   /* the width of the 'frame' */	 height: 200px;	   /* the height of the 'frame' */	 background-color: #eeeeee;	 margin: 100px;	 overflow: auto;	 border: 5px solid #99cc99;	 }

*warning*

Includes a 640 by 480 JPG file so, dial-up users might want to grab this zip-file instead and have a look locally.
CSS framed picture "zip file" approximately 80k.

[jet 0]

Hmm... I imagine that would be a good way to hide spoilers and such, or non-work-safe pictures, but I personally like seeing everything up big and revealed! Why else would I buy a 20.1" screen??Good CSS insight though, I hadn't thought of that before.