28 Aug, 2009
Framebar (like diggbar) example in html and css with no javascript
This example code shows you how you can have a top branding bar similiar to diggbar in just a few lines of html and css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>framebar example by Web Development Blog</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 40px 0 0 0;
overflow: hidden;
font: 83%/1.4 Arial, Helvetica, Sans-Serif;
}
#bar {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100%;
min-width: 900px;
height: 30px;
padding: 5px 0;
line-height: 1;
background: #333;
color: #fff;
text-size: 1.2em;
}
#bar a {
padding: 0 5px;
color: #fff;
}
#frame {
width: 100%;
height: 100%;
z-index: 10;
}
</style>
</head>
<body>
<!-- BEGIN: bar -->
<div id="bar">
<a href="http://eisabainyo.net/weblog/" title="Web Development Blog">Web Development Blog</a>
</div>
<!-- END: bar -->
<iframe scrolling="auto" id="frame" src="http://eisabainyo.net/weblog/" frameborder="0"></iframe>
</body>
</html>
Found this article useful? Share it with your friends:
Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Other similar posts that you might be interested in:
- Embed a YouTube video iframe in a phonegap app
- Align an image in center and middle using CSS
- Code to embed Google Map and Street View
- Transitional vs. Strict
- Tips to creating an email signature for your online brand
- Creating a Contact Form in jQuery Mobile and PHP
- How to style a Submit button in CSS
Hello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more 
How do you add your “Html” or Java script to this code?
See my site I want a BAR where people can random surf websites on my blog.
seems to not work in firefox.
its working! thank u! :D