asked on

need a floating title

I need a title that wil always be in the same place (the top) regardless of whether the user has scrolled don to the bottom of the page.

Can someone tell me how to do this?

newbieweb

ASKER CERTIFIED SOLUTION

ADSLMark

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

curiouswebster

ASKER

Mark,

Which parts go in the style sheet and which parts go in the HTML page?

My compiler didn't recognize: overflow-y: hidden;

"overflow-y" is not a known CSS property name.

newbieweb

ADSLMark

div.content
{
height: 100%;
overflow: auto;
}
div.title
{
position: absolute;
top: 0;
left: 0;
width: 100%;
}

goes into the css file and

<div class="title"></div>
<div class="content"></div>

in the html file.

Mark

curiouswebster

ASKER

Mark,

I put the word "Glossary" into both the title and the content. And in both cases the text scrolls with the window.

I need it to stay put, even when I scroll the window.

Any suggestions?

newbieweb

ADSLMark

What browser?

Mark

curiouswebster

ASKER

IE 6

ADSLMark

I tried it, using IE6, it works in my opinion. Take a look:

<html>
<head>
<style>
div.content
{
height: 100%;
overflow: auto;
}
div.title
{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
</style>
</head>

<body>
<div class="title">Glossary (this one should stay on top)</div>
<div class="content">
Glossary Glossary Glossary Glossary Glossary Glossary Glossary Glossary Glossary Glossary 
</div>
</body>
</html>

Mark

ADSLMark

Using external stylesheet:

==test.html==
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>

<body>
<div class="title">Glossary (this one should stay on top)</div>
<div class="content">
Glossary
 
Glossary
 
Glossary
 
Glossary
 
Glossary
 
Glossary
 
Glossary
 
Glossary
 
Glossary
 
Glossary
 
</div>
</body>
</html>

==mystyle.css==
div.content
{
height: 100%;
overflow: auto;
}
div.title
{
position: absolute;
top: 0;
left: 0;
width: 100%;
}

Mark

curiouswebster

ASKER

Mark,

Yes it sure does work. I must have done something wrong when I integrated it.

Thanks.