Displaying images in css "frames"

Discussion in 'HTML' started by Paul.Lee.1971@gmail.com, Apr 28, 2008.

  1. Guest

    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>
     
    , Apr 28, 2008
    #1
    1. Advertising

  2. wrote:
    > 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.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 28, 2008
    #2
    1. Advertising

  3. Guest

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

    Thanks

    Paul
     
    , Apr 28, 2008
    #3
  4. John Hosking Guest

    wrote:
    > 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.

    --
    John
    Pondering the value of the UIP: http://improve-usenet.org/
     
    John Hosking, Apr 28, 2008
    #4
  5. Guest

    On 28 Apr, 17:32, John Hosking <>
    wrote:
    > wrote:
    > > 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.



    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
     
    , Apr 28, 2008
    #5
  6. 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

    wrote:
    > 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.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 28, 2008
    #6
  7. wrote:
    > On 28 Apr, 17:32, John Hosking <>
    > wrote:
    >> wrote:
    >>> 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.

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



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 28, 2008
    #7
  8. Guest

    No, the top frame is just a logo, with no text at all.
     
    , Apr 28, 2008
    #8
  9. Jonathan N. Little, Apr 28, 2008
    #9
  10. Guest

    Whats that got to do with my query? I've been posting to usenet since
    1992!
     
    , Apr 28, 2008
    #10
  11. wrote:
    > 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.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 29, 2008
    #11
  12. wrote:
    > 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/<41dab$48160b1f$40cba7ca$>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 29, 2008
    #12
  13. Andy Dingley Guest

    On 28 Apr, 17:12, "" <Paul.Lee.
    > wrote:
    > 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.
     
    Andy Dingley, Apr 29, 2008
    #13
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Powerslave2112

    From Frames to no frames?

    Powerslave2112, Jan 20, 2004, in forum: HTML
    Replies:
    2
    Views:
    637
    brucie
    Jan 20, 2004
  2. Philip
    Replies:
    3
    Views:
    1,019
    Karl Groves
    Jun 28, 2004
  3. Ale

    Frames or not Frames...

    Ale, Aug 3, 2005, in forum: HTML
    Replies:
    17
    Views:
    1,010
    Adrienne
    Aug 5, 2005
  4. Replies:
    1
    Views:
    1,039
    dorayme
    Feb 10, 2006
  5. Replies:
    0
    Views:
    1,221
Loading...

Share This Page