How does one make an image on top of everything?

Discussion in 'HTML' started by jakeatkins via WebmasterKB.com, Jul 24, 2007.

  1. I'm trying to make an image that will cover all page content that scrolls
    under it stay at the top of the browser window, all within one frame, even
    while scrolling,. I've tried various combinations of float, position:fixed,
    absolute,relative, etc. and can't seem to figure it out. The image always
    stays "tacked" to the specific top left corner, and doesn't move with the
    scrolling window... any sample code please?

    I'm trying to make the apperance of text fading out of the top while
    scrolling, by using a gradual transparent image always at the top of the
    window. (I also want to do this at the bottom, but that might be harder).

    Thanks!

    --
    Message posted via WebmasterKB.com
    http://www.webmasterkb.com/Uwe/Forums.aspx/html-dev/200707/1
     
    jakeatkins via WebmasterKB.com, Jul 24, 2007
    #1
    1. Advertising

  2. jakeatkins via WebmasterKB.com

    Gwin Guest

    jakeatkins via WebmasterKB.com wrote:
    > I'm trying to make an image that will cover all page content that
    > scrolls under it stay at the top of the browser window, all within
    > one frame, even while scrolling,. I've tried various combinations of
    > float, position:fixed, absolute,relative, etc. and can't seem to
    > figure it out. The image always stays "tacked" to the specific top
    > left corner, and doesn't move with the scrolling window... any sample
    > code please?
    >
    > I'm trying to make the apperance of text fading out of the top while
    > scrolling, by using a gradual transparent image always at the top of
    > the window. (I also want to do this at the bottom, but that might be
    > harder).
    >
    > Thanks!


    style it in the css
    z-index:"value"
     
    Gwin, Jul 24, 2007
    #2
    1. Advertising

  3. Gwin wrote:
    >> I'm trying to make an image that will cover all page content that
    >> scrolls under it stay at the top of the browser window, all within

    >[quoted text clipped - 10 lines]
    >>
    >> Thanks!

    >
    >style it in the css
    >z-index:"value"



    Awesome, I notice using position:fixed doesn't work in IE6, but it does in
    safari. Any smart way of doing the same thing but for the bottom of the page,
    no matter what the size of browser window, having it stick on the bottom?
    Here's the code I used for the top:

    <img src="smred.gif" border="0"
    style="position:fixed;
    left:0px;
    top:0px;
    z-index:2;">

    --
    Message posted via WebmasterKB.com
    http://www.webmasterkb.com/Uwe/Forums.aspx/html-dev/200707/1
     
    jakeatkins via WebmasterKB.com, Jul 24, 2007
    #3
  4. jakeatkins via WebmasterKB.com

    Gwin Guest

    jakeatkins via WebmasterKB.com wrote:
    > Gwin wrote:
    >>> I'm trying to make an image that will cover all page content that
    >>> scrolls under it stay at the top of the browser window, all within

    >> [quoted text clipped - 10 lines]
    >>>
    >>> Thanks!

    >>
    >> style it in the css
    >> z-index:"value"

    >
    >
    > Awesome, I notice using position:fixed doesn't work in IE6, but it
    > does in safari. Any smart way of doing the same thing but for the
    > bottom of the page, no matter what the size of browser window, having
    > it stick on the bottom? Here's the code I used for the top:
    >
    > <img src="smred.gif" border="0"
    > style="position:fixed;
    > left:0px;
    > top:0px;
    > z-index:2;">


    nope
    ie7 will
    ie6 won't and there's really no workaround i know of

    try this
    html {height:100%; min-height: 100%;widith: 100%;}
    body {height: 100%; min-height: 100%; widith: 100%; text-align: center;}

    div#footer {height:100%; min-height:100%; width:100%; bottom:0;
    padding-bottom:2%; position:absolute; left:0;}
     
    Gwin, Jul 24, 2007
    #4
  5. jakeatkins via WebmasterKB.com

    Ed Mullen Guest

    Gwin wrote:
    > jakeatkins via WebmasterKB.com wrote:
    >> Gwin wrote:
    >>>> I'm trying to make an image that will cover all page content that
    >>>> scrolls under it stay at the top of the browser window, all within
    >>> [quoted text clipped - 10 lines]
    >>>> Thanks!
    >>> style it in the css
    >>> z-index:"value"

    >>
    >> Awesome, I notice using position:fixed doesn't work in IE6, but it
    >> does in safari. Any smart way of doing the same thing but for the
    >> bottom of the page, no matter what the size of browser window, having
    >> it stick on the bottom? Here's the code I used for the top:
    >>
    >> <img src="smred.gif" border="0"
    >> style="position:fixed;
    >> left:0px;
    >> top:0px;
    >> z-index:2;">

    >
    > nope
    > ie7 will
    > ie6 won't and there's really no workaround i know of
    >
    > try this
    > html {height:100%; min-height: 100%;widith: 100%;}
    > body {height: 100%; min-height: 100%; widith: 100%; text-align: center;}
    >
    > div#footer {height:100%; min-height:100%; width:100%; bottom:0;
    > padding-bottom:2%; position:absolute; left:0;}


    About the only one can do is sniff out the UA and serve up a separate
    style sheet for IE6 and tailor the presentation to account for IE6 not
    respecting fixed positioning of the header.

    --
    Ed Mullen
    http://edmullen.net
    http://mozilla.edmullen.net
    http://abington.edmullen.net
    If 7-11 stores are open 24 hours/7-days a week, why do they have locks
    on the front door?
     
    Ed Mullen, Jul 25, 2007
    #5
  6. jakeatkins via WebmasterKB.com

    Gwin Guest

    Ed Mullen wrote:
    > Gwin wrote:
    >> jakeatkins via WebmasterKB.com wrote:
    >>> Gwin wrote:
    >>>>> I'm trying to make an image that will cover all page content that
    >>>>> scrolls under it stay at the top of the browser window, all within
    >>>> [quoted text clipped - 10 lines]
    >>>>> Thanks!
    >>>> style it in the css
    >>>> z-index:"value"
    >>>
    >>> Awesome, I notice using position:fixed doesn't work in IE6, but it
    >>> does in safari. Any smart way of doing the same thing but for the
    >>> bottom of the page, no matter what the size of browser window,
    >>> having it stick on the bottom? Here's the code I used for the top:
    >>>
    >>> <img src="smred.gif" border="0"
    >>> style="position:fixed;
    >>> left:0px;
    >>> top:0px;
    >>> z-index:2;">

    >>
    >> nope
    >> ie7 will
    >> ie6 won't and there's really no workaround i know of
    >>
    >> try this
    >> html {height:100%; min-height: 100%;widith: 100%;}
    >> body {height: 100%; min-height: 100%; widith: 100%; text-align:
    >> center;} div#footer {height:100%; min-height:100%; width:100%; bottom:0;
    >> padding-bottom:2%; position:absolute; left:0;}

    >
    > About the only one can do is sniff out the UA and serve up a separate
    > style sheet for IE6 and tailor the presentation to account for IE6 not
    > respecting fixed positioning of the header.



    <!--[if IE 6]><link rel="stylesheet" type="text/css" href="IE6styles.css"
    /><![endif]-->
     
    Gwin, Jul 25, 2007
    #6
  7. Gwin wrote:
    >>>>>> I'm trying to make an image that will cover all page content that
    >>>>>> scrolls under it stay at the top of the browser window, all within

    >[quoted text clipped - 27 lines]
    >> style sheet for IE6 and tailor the presentation to account for IE6 not
    >> respecting fixed positioning of the header.

    >
    ><!--[if IE 6]><link rel="stylesheet" type="text/css" href="IE6styles.css"
    >/><![endif]-->


    How can I test for ANY IE browser, then have a different style.css file. I
    seem to be having problems with a horizontal scrollbar. I have the code:

    html { overflow-x: hidden; overflow:scroll; }

    in the style sheet. this works well in IE, but for FF and Safari, it inserts
    a blank horizontal scrollbar. If I remove the overflow:scroll; then IE
    browsers won't scroll with the mousewheel, only by dragging the scrollbar.
    So I'd like to test for IE browser, then go to the code above, otherwise,
    leave out the overflow:scroll;

    What's the simplest way of doing this?

    --
    Message posted via WebmasterKB.com
    http://www.webmasterkb.com/Uwe/Forums.aspx/html-dev/200707/1
     
    jakeatkins via WebmasterKB.com, Jul 27, 2007
    #7
  8. jakeatkins via WebmasterKB.com

    Gwin Guest

    jakeatkins via WebmasterKB.com wrote:
    > Gwin wrote:
    >>>>>>> I'm trying to make an image that will cover all page content
    >>>>>>> that scrolls under it stay at the top of the browser window,
    >>>>>>> all within

    >> [quoted text clipped - 27 lines]
    >>> style sheet for IE6 and tailor the presentation to account for IE6
    >>> not respecting fixed positioning of the header.

    >>
    >> <!--[if IE 6]><link rel="stylesheet" type="text/css"
    >> href="IE6styles.css" /><![endif]-->

    >
    > How can I test for ANY IE browser, then have a different style.css
    > file. I seem to be having problems with a horizontal scrollbar. I
    > have the code:
    >
    > html { overflow-x: hidden; overflow:scroll; }
    >
    > in the style sheet. this works well in IE, but for FF and Safari, it
    > inserts a blank horizontal scrollbar. If I remove the
    > overflow:scroll; then IE browsers won't scroll with the mousewheel,
    > only by dragging the scrollbar. So I'd like to test for IE browser,
    > then go to the code above, otherwise, leave out the overflow:scroll;
    >
    > What's the simplest way of doing this?


    overkill on useragent sniffing
    why are you having to deal with a horizontal scrollbar anyhoo?
    won't fit fluid?
     
    Gwin, Jul 27, 2007
    #8
  9. Gwin wrote:
    >>>>>>>> I'm trying to make an image that will cover all page content
    >>>>>>>> that scrolls under it stay at the top of the browser window,

    >[quoted text clipped - 19 lines]
    >>
    >> What's the simplest way of doing this?

    >
    >overkill on useragent sniffing
    >why are you having to deal with a horizontal scrollbar anyhoo?
    >won't fit fluid?


    I don't know why I should be having to deal with it either. IE won't fit it
    fluid without the html styles.css. It keeps adding a horizontal scrollbar
    with a small amount of moving for no reason. Check out
    www.scribalmusings.com in various browsers! Currently the style.css is set
    to:

    html { overflow-x:hidden; overflow:scroll;}

    IE likes this, but now others don't. Any help is greatly appreciated, it's
    driving me nuts!

    --
    Message posted via WebmasterKB.com
    http://www.webmasterkb.com/Uwe/Forums.aspx/html-dev/200707/1
     
    jakeatkins via WebmasterKB.com, Jul 27, 2007
    #9
  10. jakeatkins via WebmasterKB.com

    John Hosking Guest

    jakeatkins via WebmasterKB.com wrote:
    > Gwin wrote:


    >> <!--[if IE 6]><link rel="stylesheet" type="text/css" href="IE6styles.css"
    >> /><![endif]-->

    >
    > How can I test for ANY IE browser, then have a different style.css file.


    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="IEstyles.css" />
    <![endif]-->

    See, among others, http://www.quirksmode.org/css/condcom.html
    Or http://www.positioniseverything.net/articles/cc-plus.html
    Or even http://msdn2.microsoft.com/en-us/library/ms537512.aspx

    >
    > html { overflow-x: hidden; overflow:scroll; }


    Why not just html { overflow-x:scroll; } ?

    Or even html { } ?

    >
    > What's the simplest way of doing this?


    See above.

    --
    John
    Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
     
    John Hosking, Jul 27, 2007
    #10
  11. jakeatkins via WebmasterKB.com

    Gwin Guest

    jakeatkins via WebmasterKB.com wrote:
    > Gwin wrote:
    >>>>>>>>> I'm trying to make an image that will cover all page content
    >>>>>>>>> that scrolls under it stay at the top of the browser window,

    >> [quoted text clipped - 19 lines]
    >>>
    >>> What's the simplest way of doing this?

    >>
    >> overkill on useragent sniffing
    >> why are you having to deal with a horizontal scrollbar anyhoo?
    >> won't fit fluid?

    >
    > I don't know why I should be having to deal with it either. IE won't
    > fit it fluid without the html styles.css. It keeps adding a
    > horizontal scrollbar with a small amount of moving for no reason.
    > Check out www.scribalmusings.com in various browsers! Currently the
    > style.css is set to:
    >
    > html { overflow-x:hidden; overflow:scroll;}
    >
    > IE likes this, but now others don't. Any help is greatly
    > appreciated, it's driving me nuts!


    that's an iframe?
     
    Gwin, Jul 27, 2007
    #11
  12. jakeatkins via WebmasterKB.com

    Ben C Guest

    On 2007-07-27, jakeatkins via WebmasterKB.com <u35973@uwe> wrote:
    > Gwin wrote:
    >>>>>>>>> I'm trying to make an image that will cover all page content
    >>>>>>>>> that scrolls under it stay at the top of the browser window,

    >>[quoted text clipped - 19 lines]
    >>>
    >>> What's the simplest way of doing this?

    >>
    >>overkill on useragent sniffing
    >>why are you having to deal with a horizontal scrollbar anyhoo?
    >>won't fit fluid?

    >
    > I don't know why I should be having to deal with it either. IE won't fit it
    > fluid without the html styles.css. It keeps adding a horizontal scrollbar
    > with a small amount of moving for no reason. Check out
    > www.scribalmusings.com in various browsers! Currently the style.css is set
    > to:
    >
    > html { overflow-x:hidden; overflow:scroll;}
    >
    > IE likes this, but now others don't. Any help is greatly appreciated, it's
    > driving me nuts!


    overflow-x is a non-standard IE property (suggested for CSS3 I think).
     
    Ben C, Jul 27, 2007
    #12
  13. John Hosking wrote:
    >Or even html { } ?


    Beautiful, I have no idea what this actually does, but it makes Safari,
    Firefox, and IE 7 look good (I hope IE 6 too, I can't test that where I am
    right now). Thanks tons!

    --
    Message posted via http://www.webmasterkb.com
     
    jakeatkins via WebmasterKB.com, Jul 27, 2007
    #13
  14. jakeatkins via WebmasterKB.com

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Fri, 27 Jul 2007 21:16:40
    GMT jakeatkins via WebmasterKB.com scribed:

    > John Hosking wrote:
    >>Or even html { } ?

    >
    > Beautiful, I have no idea what this actually does, but it makes
    > Safari, Firefox, and IE 7 look good (I hope IE 6 too, I can't test
    > that where I am right now). Thanks tons!


    The real Big Jake would be mortified.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
     
    Neredbojias, Jul 28, 2007
    #14
  15. jakeatkins via WebmasterKB.com, Jul 30, 2007
    #15
  16. jakeatkins via WebmasterKB.com

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Mon, 30 Jul 2007 17:07:14
    GMT jakeatkins via WebmasterKB.com scribed:

    > Neredbojias wrote:
    >>The real Big Jake would be mortified.

    >
    > Well, maybe someone wants to explain why a blank style html{ } does
    > anything at all?


    Well, I can't, but my name is Neredbojias and the clan is known for its
    inexplicability.

    (Probably just one of the many ie "vagueries", but other browsers have
    bugs, too. Without trying it myself, though, it's like a visitor here
    asking a question without providing a url.)

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
     
    Neredbojias, Jul 30, 2007
    #16
    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. KathyB
    Replies:
    0
    Views:
    343
    KathyB
    Jul 23, 2003
  2. =?Utf-8?B?dmVsdQ==?=

    Everything happens inside a datagrid, a Complex one ?

    =?Utf-8?B?dmVsdQ==?=, Sep 4, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    359
    =?Utf-8?B?dmVsdQ==?=
    Sep 5, 2005
  3. Frederic HOUDE
    Replies:
    4
    Views:
    630
    Frederic HOUDE
    Aug 31, 2004
  4. Constantly Distracted
    Replies:
    3
    Views:
    745
    Constantly Distracted
    Mar 29, 2008
  5. LaughOutLoud
    Replies:
    1
    Views:
    135
    Randy Webb
    Sep 28, 2006
Loading...

Share This Page