Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How does one make an image on top of everything?

Reply
Thread Tools

How does one make an image on top of everything?

 
 
jakeatkins via WebmasterKB.com
Guest
Posts: n/a
 
      07-24-2007
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/Forum...l-dev/200707/1

 
Reply With Quote
 
 
 
 
Gwin
Guest
Posts: n/a
 
      07-24-2007
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"


 
Reply With Quote
 
 
 
 
jakeatkins via WebmasterKB.com
Guest
Posts: n/a
 
      07-24-2007
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/Forum...l-dev/200707/1

 
Reply With Quote
 
Gwin
Guest
Posts: n/a
 
      07-24-2007
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;}


 
Reply With Quote
 
Ed Mullen
Guest
Posts: n/a
 
      07-25-2007
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?
 
Reply With Quote
 
Gwin
Guest
Posts: n/a
 
      07-25-2007
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]-->


 
Reply With Quote
 
jakeatkins via WebmasterKB.com
Guest
Posts: n/a
 
      07-27-2007
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/Forum...l-dev/200707/1

 
Reply With Quote
 
Gwin
Guest
Posts: n/a
 
      07-27-2007
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?


 
Reply With Quote
 
jakeatkins via WebmasterKB.com
Guest
Posts: n/a
 
      07-27-2007
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/Forum...l-dev/200707/1

 
Reply With Quote
 
John Hosking
Guest
Posts: n/a
 
      07-27-2007
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/...s/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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
How does one make use of sub files to make DVD? Bun Mui DVD Video 0 05-21-2006 03:24 PM
How does one make use of sub files to make DVD? Bun Mui Computer Support 0 05-21-2006 03:09 PM
Why does my Top DashBoard Image do not touch top of the screen? Frederic HOUDE HTML 4 08-30-2004 11:22 PM
Aligning one image on top of an (almost identical) image Aaron Queenan Digital Photography 13 04-14-2004 09:08 PM



Advertisments