Displaying images in css "frames"

P

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>
 
J

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.
 
P

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
 
J

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.
 
P

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
 
J

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.
 
J

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>
 
J

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top