create a digg facebook like frame to display external content
You might have noticed the stylish iframes used by digg or facebook that display external content. There are plenty of argument about how bad is the iframe for the web , I believe its okay to use iframe if you wanted to share some interesting content for your visitors and keep them inside your site. Here is the simplest, optimised html and css to create a digg like frame to show external content inside your website. Enjoy.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
overflow: hidden;
}
body, iframe {
margin: 0 auto;
padding: 0;
}
#frameHeader {
background: #ccc;
height: 30px; /* change this to increase the bar height */
left: 0;
top: 0;
position: absolute;
width: 100%;
z-index: 999;
}
#content {
padding: 5px;
}
iframe {
margin-top: 30px; /* change this to increase the bar height */
width: 100%;
height: 101%; /* just to make sure that iframe takes the full content, you can reset this to 100% */
}
</style>
</head>
<body>
<div id="frameHeader">
YOUR SPACE TO ADD STUFFS
</div>
<iframe src="http://www.ajaxination.com"></iframe>
</body>
</html>
*Update* – 30/Aug/2009
I am glad to know that folks at broadbandproviders.co.uk implimented this code in their broadband news section.
This is a great tutorial on creating I frames. I implemented a sample for my website and everything worked great except for the height. I want it to display the height at 100% but it only displays a small amount. Take a look at http://www.ElanceEnergy.com/frame.html When I look at the broadband news example it displays at 100% so I don’t think it is my browser. Any suggestions?
Hello Wesley,
I am glad you liked the tutorial. Please note the difference in doctype we used. Various doctype versions calculate height attributes differently. That should fix your issue.
Ahah! Yes that did it. Thanks so much!