Displaying images in css "frames"

[Paul.Lee.1971]

Hi everyone,
Hopefully someone can help me.
I'm trying to create a webpage using css, rather than frames, so that
the top 100 pixels of the browser window will show a fixed, non-
scrollable image. The "frame" below this will show another image,
which will allow the text to be scrollable, but will not allow the
image to move. I don't want the text in this bottom frame to scroll
over the top frame. I've written the following css and html but it
doesn't display the two images, nor does it prevent the bottom-most
text scrolling over the top-most frame, even though I have specified a
higher z-order for it. Te top frame will just show the image; the
bottom will show an image and white text. Can anyone please help?

Many thanks

Paul

--

This is defined in the head section:

#header
{
position: fixed;
background-image: url(top_backdrop.jpg);
background-repeat: no-repeat;
top: 0px;
bottom: 0px;
height: 100px;
width: 100%;
background-attachment: fixed;
z-index; 10;
}

#mainbody
{
position: relative;
background-image: url(backdrop_main.jpg);
background-repeat: no-repeat;
top: 100px;
bottom: 0;
background-attachment: fixed;
color: #ffffff;
}

</style>


and then, in the body of the html page, I have

<div id="header"></div>


<div id="mainbody">Body text here</div>

 

[Jonathan N. Little]

Hi everyone,
Hopefully someone can help me.
I'm trying to create a webpage using css, rather than frames, so that
the top 100 pixels of the browser window will show a fixed, non-
scrollable image. The "frame" below this will show another image,
which will allow the text to be scrollable, but will not allow the
image to move. I don't want the text in this bottom frame to scroll
over the top frame. I've written the following css and html but it
doesn't display the two images, nor does it prevent the bottom-most
text scrolling over the top-most frame, even though I have specified a
higher z-order for it. Te top frame will just show the image; the
bottom will show an image and white text. Can anyone please help?

Many thanks

This is defined in the head section:

<snip code>

I don't have top_backdrop.jpg on my computer. Post a URL not code.

 

[Paul.Lee.1971]

I can't ftp my code and pictures to my website at present. Is there
any obviously wrong in the css?

Thanks

Paul

 

[John Hosking]

I can't ftp my code and pictures to my website at present. Is there
any obviously wrong in the css?

No. But things become a lot more obvious when we have a URL.

We'll probably just wait until you get your FTP figured out. GL.

 

[Paul.Lee.1971]

No. But things become a lot more obvious when we have a URL.

We'll probably just wait until you get your FTP figured out. GL.

Its got fixed. The URL is http://www.paullee.com/book_test3.html

I've since solved some of the problems (included, amonst others, a
missing semi-colon), but other problems have now become evident.
For instance, Both the top and bottom frame are now references from
the top left origin of the screen; I wanted the bottom frame to be
flush against the top one.
The white text in the bottom frame doesn't show up (and yes, the text
I put in is only a placeholder)
Also, when scrolling the bottom frame up, it obscures the top frame,
even though I have set the top frame to have a high z-order value.

With best wishes

Paul

 

[Jonathan N. Little]

Firstly, learn how to quote and post, use your Google:

http://www.google.com/search?hl=en&...t=result&cd=1&q=how+to+post+on+Usenet&spell=1
how to post on Usenet - Google Search

I can't ftp my code and pictures to my website at present.

Why is your FTP client on strike?

Is there
any obviously wrong in the css?

Hard to say, in your header is there going to be any content? Or is your
top_backdrop.jpg really a logo image and should be content and not
background. Post a *URL* to real working attempt at what you wish.

 

[Jonathan N. Little]

Its got fixed. The URL is http://www.paullee.com/book_test3.html

I've since solved some of the problems (included, amonst others, a
missing semi-colon), but other problems have now become evident.
For instance, Both the top and bottom frame are now references from
the top left origin of the screen; I wanted the bottom frame to be
flush against the top one.
The white text in the bottom frame doesn't show up (and yes, the text
I put in is only a placeholder)
Also, when scrolling the bottom frame up, it obscures the top frame,
even though I have set the top frame to have a high z-order value.

I don't think so.

Better solution

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Try this</title>

<style type="text/css">
html, body { margin: 0; padding: 0; }
html {
/*
I would trim this, only need left 70px,
no one will see right side images
Apply to HTML so fill window
*/
color: white; background:
black url(http://www.paullee.com/backdrop_main.jpg) no-repeat fixed
left 104px;
}

div#header { position: fixed; top: 0; left: 0; overflow: hidden; }
div#content {
/* to clear top heading and left decor */
padding: 110px 1em 1em 80px;
}
</style>

</head>
<body>
<div id="header">
<img src="http://www.paullee.com/top_backdrop.jpg" height="104"
width="1261" alt="header image">
</div>
<div id="content">
<h1>Your Page</h1>
<p>The rest of your page</p>
</div>
</body>
</html>

 

[Paul.Lee.1971]

No, the top frame is just a logo, with no text at all.

 

[Jonathan N. Little]

No, the top frame is just a logo, with no text at all.

Obviously you did not see my other post, and obviously you did not
reference the URL gave:


http://www.google.com/search?hl=en&...t=result&cd=1&q=how+to+post+on+Usenet&spell=1
how to post on Usenet - Google Search

 

[Paul.Lee.1971]

Whats that got to do with my query? I've been posting to usenet since
1992!

 

[Jonathan N. Little]

Whats that got to do with my query? I've been posting to usenet since
1992!

What's what got to do with your query? I do not use GG. Maybe you've
been oblivious for 16 years.

 

[Jonathan N. Little]

Whats that got to do with my query? I've been posting to usenet since
1992!

BTW I did address your query elsewhere in the thread

http://message-id.net/<[email protected]>

 

[Andy Dingley]

I can't ftp my code and pictures to my website at present.
Is there any obviously wrong in the css?

Yes, it's not on a server.

Post a URL.