Using CSS

[Ronx]

<div id="bmlogo" style="position:absolute; bottom:-29px; right:8px;">
<a href="somepage.htm"><img src="images/piccy.gif" width="149"
height="131" alt="logo"></a>
</div>
Tested, and works in Firefox and IE6.
The image is positioned at the bottom right corner of the page
content, (this is not necessarily the bottom right corner of the
browser window), if the page is too long for the browser window it
will not appear until the bottom of the page scrolls into view.

I prefer bottom:-10px in the positioning - adjust to suit your design.

The div's style can be placed in your main style sheet and removed
from the page HTML.

#bmlogo {position:absolute; bottom:-29px; right:8px;}

 

[Murray]

LOL. Neener.

--
Murray
============

Hey, that's what *I* said.After YOU!!

;-P

--
HTH,

Kevin Spencer
Microsoft MVP
.Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

 

[Murray]

It's still a bad solution.

It's time for a rethink of the design concept. Having a menu that can drop
below the bottom margin of the viewport on long pages is not very user
friendly.

 

[Kevin Spencer]

Hi peebs,

By golly you're right. It sets correctly initially, but remains in the same
place when the window scrolls.

Now, I spent some time figuring out how to fix this, so you'd better use it!
It requires a bit of JavaScript, and the kicker is that if the browser is
IE, the JavaScript has to be tinkered a bit. IE considers the client bottom
of the window to be absolute 0, while Mozilla browsers consider the bottom
of the body to be absolute 0. Thankfully, the next version of IE should
conform to the standard.

First, you have to give your image an id attribute. I named the id "logo",
as in:

<img src="images/Menu_image_anim2.gif" style="position: absolute; right: 8;
bottom:-26; width:149px; height:131px">

Then put this script just before the </body> tag in the page (I've left the
</body> tag in for context - don't copy that):

<script type="text/javascript"><!--
function setLogo()
{
var el = document.getElementById("logo");
var b = document.body.clientHeight - (document.body.clientHeight +
document.body.scrollTop);
el.style.bottom = b - 26;
if (navigator.userAgent.indexOf("MSIE") >= 0)
el.style.bottom = -26;
el.style.right = 0;
}
setLogo();
window.onscroll=setLogo
// --></script>

</body>

I know, you don't want to have to put all that into every page. You could
use an included .js file. For the .js file, you would put all the code
except for the script tags into a text file named, for example, "logo.js".
Put that file in the same folder, and put the following script tag where I
told you to put the above:

<script type="text/javascript" src="logo.js"></script>

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

 

[peebs]

Hi Murray,
With my original design the menu logo always stayed in view at the bottom
right corner (or anywhere else i chose to put it).
The original design worked fine - I just wanted to try and get both the
background image and the menu linked logo image into a single place(CSS)
rather than have the background image in the common CSS and the logo image in
each separate htm page. If necessary, i can live with my original design.
Regards,

 

[peebs]

Thanks Kev, I will give it a try.
Regards,
Peter

 

[peebs]

Hi Ronx,
Sorry but the logo image MUST be in view at all times. It is a link to the
navigation menu for the site and if it is not in view bang goes all the other
pages!!
Regards

 

[Murray]

Anything that requires javascript for the main site's navigation is a bad
solution. I think Kevin's solution is an excellent one, but I still say
it's a bad layout plan - definitely not user friendly.

 

[peebs]

Hi Murray,
I agree re Java script - that is another reason why I wanted to change but I
have included a fall back menu if jave is not available. I also agree on
kevins idea. The logo image MUST stay visible and cannot scroll.

 

[Kevin Spencer]

I don't agree. JavaScript is an indispensible part of (for example) an
ASP.Net web site, and is used heavily by the larger companies out there.
There is very little you can do without it, other than having static content
on a page. I'm not sure why Murray feels this way.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

 

[Murray]

Any page that requires javascript for its navigation to function is an
inaccessible page. That's why.

I am guessing that the sites you refer to offer alternative navigation
elements....

 

[Kathleen Anderson [MVP - FrontPage]]

JavaScript used for site navigation can be accessible to people with
disabilities (using the keyboard and a screen reader), if done correctly.
It's only 'inaccessible' to people who have support for JavaScript turned
off in their browser.

--

~ Kathleen Anderson
Microsoft MVP - FrontPage
Spider Web Woman Designs
web: http://www.spiderwebwoman.com/resources/
FrontPage Support: http://www.frontpagemvps.com/

 

[peebs]

Excuse my ignorance Murray, but why is it inaccessible? I have checked out my
system with a number of browsers and it works OK, I really only put the
alternative menu/nav system in just incase there was a browser that I hadn't
checked. But we are off the point - what i really need is a replacement that
goes in the CSS, and stays static at the bottom of the screen - not
necesserily the page.
Regards,

 

[peebs]

Hi Kathleen,
Thanks for the info - guess i had better leave the alternate system in place
BUT I really would like to find a way to put all this in the CSS so that I
can control it from a single file.
Best regards,

 

[Kevin Spencer]

Hi Murray,

I can see how JavaScript for navigation would have this effect. However, I
was only talking about using JavaScript for positioning of a navigational
element. IOW, it would have no effect other than to change the position of
the element in the window. So, I don't believe this is an issue here.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

 

[Murray]

Kathleen:

if done correctly.

This is true - you would need to have alternative navigation within

It's only 'inaccessible' to people who have support for JavaScript turned
off in their browser.

And the population of those people is measurable.

--
Murray
============

JavaScript used for site navigation can be accessible to people with
disabilities (using the keyboard and a screen reader), if done correctly.
It's only 'inaccessible' to people who have support for JavaScript turned
off in their browser.

--

~ Kathleen Anderson
Microsoft MVP - FrontPage
Spider Web Woman Designs
web: http://www.spiderwebwoman.com/resources/
FrontPage Support: http://www.frontpagemvps.com/

 

[Murray]

Yes - that's correct. My mistake....

 

[Murray]

If the navigation requires javascript to function, and you do not have
javascript enabled, or your assistive device doesn't do javascript, then you
will not be able to navigate the site. Neither will search engines either.

 

[peebs]

OK Guys,
From the person who started this thread. How do I get a background image
(easy) AND a logo image which is stationary ( non scrolling) via a CSS?

 

[Kevin Spencer]

Use the method I gave you. As Murray and I discussed, it is not going to
cause any accessibility problems, because all it does is position the logo.
It has no effect whatsoever on whether the links work or not. :-D

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.