tags:

views:

115

answers:

4

Google Images is the best example. Once you follow an image, a frame remains at the top of the page, always reminding you to return to Google. Does this technique have a special name and what is the most efficient way to do this?

I have this so far:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Framed content</title>
    <style type="text/css">
        #bar {
            width:100%;
            height:10%;
        }
        iframe {
            width:100%;
            height:90%;
        }
    </style>
</head>
<body>
    <div id="bar"><!-- PUT THE CONTENTS OF THE BAR HERE --></div>
    <iframe src="{LOCATION OF THE HTML PAGE}"></iframe>
</body>
</html>

How can I adapt the above so that #bar can read 100px high rather than 10% high? How does that affect the code? This is the crux of my question.

Many thanks. Patrick

+3  A: 

I think it's still just called 'framing' even if it's more advanced than the old frameset style popular in the late '90s and early 2000s. Other examples you could study include Facebook and Stumbleupon.

beggs
Digg is a good example of this, too.
ceejayoz
+1  A: 

I've seen it called a "topbar"...

Personally, though, I find them really annoying unless they're serving a very useful purpose. I don't need to be reminded to go back to your website. You might as well just open the link in a new window at that point.

Gabriel Hurley
A: 

After a bit of investigation, I came across this, which doesn't use iframes at all. I know some people won't touch framesets with a bargepole, but I'd be interested to know what people think could be potential problems, other than the obvious "frames not supported".

<html>  
<frameset rows="100,*" frameborder="no" framespacing="0"> 
  <frame name="h" src="top_source" scrolling="no" noresize >      
  <frame name="t" src="main_source" scrolling="auto" noresize > 
</frameset> 
</html>

This makes use of the wildcard " * ", which div height attributes don't have.

Patrick Beardmore
+1  A: 

You could do what google does, and remove your doctype tag. your markup will pretty much work right away with this one modification, and you'll be able to set the bar's height to 100px, and the iFrame's height to 100% -- producing the desired results.

Gus Melo
With that setup, could you create a box that stretches to the edges of the screen (top, left, right, bottom) which has a fixed width (left and right) and fixed height (top and bottom), with the centre reserved for a huge iframe that filled the rest of the space.If so, how could that be done. When ever I try, the table won't obey it's width requirements.Many thanks,Patrick
Patrick Beardmore