create a digg facebook like frame to display external content
August 28, 2009
1 comment
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.
