How to keep small image in lower left corner?

MDLarson

MDLarson

Registered
I want to put a small 52x18 web badge in the absolute lower-left (or lower-right) corners of the browser window. It's a little "Website By Matt" advertisement, so I want it to be as much out-of-the-way as possible.

I'm looking for ways to accomplish this. I know frames can do that (have a 18 pixel high frame on the bottom and left or right justify it) but I don't like using frames anymore.

I thought maybe the answer was in using a layer, but the coordinates seem to come from the upper-left corner of the page.

I've seen navigation bars "follow" the page before... the buttons know where the top of the page is, and if you scroll down, it'll jump down to match the top of your current view. This would mean my image would jump around to the lower-left corner, but I'd also be happy if it stayed in the absolute lower-left corner (you'd have to scroll all the way to the bottom to see it).
 
css can do that easily. However IE won't support it, unless you do it as a background image. does it have to be clickable?
 
Jeffo said:
i am not sure how he did it but would somthing like this be what you are looking for?

kaomso
Click to expand...
At first I thought that was just a background image, but the <body> tag didn't list a graphic. Then I sized the browser window and the image followed the bottom corner. I searched the source code for the secret, but couldn't find anything.

That would work, except I'd need to attach a link to the graphic.
 
I was trying some things with tables, and seemed to get it to work. The image doesn't follow the corner, but it's always at the absolute bottom. Basically my first table is set to 100% width and 100% height. The bottom row's vertical alignment is "Bottom", which seems to work fine. I had to specify a row height for several other rows because the table got stretched out and white space happened.
http://www.shortystowing.com/test.html

Long page in practice:
http://www.shortystowing.com/index2.html

Short page in practice:
http://www.shortystowing.com/contact/index.html

So, I think this will work. Any comments? Better ways?
 
twister said:
do you care if it works in IE?
Click to expand...
Why, does it not work in IE? I've only tested it in IE 5.1.7 on Mac OS 9 so far. Yes, I need it to work in "most common browsers". And if it doesn't work exactly right, it still has to work mostly right. I'm gonna go test it on some PCs right now.
 
Because FIXED positioning would do exactly what you want, however IE browsers are not up to standards. So my ideas are out. ;)
 
It would be better dealt with with CSS, but it can also be dealt with using JS. http://www.dynamicdrive.com/dynamicindex4/logo.htm


If you're alright with it showing up as it is right now in IE-Win...then just use CSS. In the behaved browsers it'll show up as intended, at the bottom left corner of the browser window no matter how much they scroll. In IE-Win, it'll show up at the very bottom left corner but you'll have to scroll down to see it (just like you have it now on your example).

Very simple to accomplish. First though, you need to make sure you have a proper doctype in there just to be safe. For HTML4, it should be:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"

Then, just place a div at the very bottom of the page right before the ending body tag ( </body> ).

Code: 
<div id="webbadge"><a href="http://www.hazmatt.net/design/" target="_blank"><img src="http://www.shortystowing.com/images/website_by_matt.gif" alt="Website Design by Matt Larson" width="53" height="19" border="0"></a></div>

Finally, add a bit of CSS to control it in either the head section or an external file. Placing it in the head section would probably be easiest.

Code: 
<style>
	#webbadge {
	position: fixed;
	bottom: 0;
	left: 0;
	}
</style>


Here's a quick look at the end result. I changed the doctype to XHTML 1 Trans on this (and cleaned the code with the convertor), as I don't use anything other than XHTML anymore. HTML4 (properly declared) should work just fine though. Tested in Safari, Firebird, Mozilla, Opera, Lynx, IE 6 WIN. Should degrade properly with most browsers. NN4 and IE 4 may be the only ones where problems may occur...but their share is so low it's probably not worth concern.

http://homepage.mac.com/mdnky/MDLarson/test.html
 
mdnky, that's exactly what I had in mind. (You went way beyond what you had to do, but I appreciate it) Twister, is this what you were thinking? Because mdnky says it works in IE 6. I'd like to test it out on a PC myself.

I've been giving it some thought, and I think I'm going to stick with the "anchored" version because it's less annoying.

I will definately store this tidbit, thanks.
 
Add IE 4 and IE 5 to the mix on the Win side. After looking, they have the same behavior as in IE 6.
 
Wow that's better than I could do!! And it works in IE on a Mac. Thanks mdnky! Mabye my issues are all in the doc type?
 
A lot of issues with CSS problems can be caused by doctypes. If they're not correct, the browser has no way of know what it's dealing with...and goes into quirks mode. IE is especially nasty with this. My stress level has gone way down since I started using correct ones...<G>

DW users: You can change the provided doctypes...if anyone's interested in how I'll dig up the link to the instructions. I would assume GoLive could also be fixed. BBEdit has correct ones from v.7.x on.
 
Just verify the ones you use against the W3C ones (not in their source) listed under the specs. ALA (A List Apart) also has a nice article on them here: http://www.alistapart.com/articles/doctype/.

Code: 
HTML 4.01 Strict, Transitional, Frameset
---------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
        
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">


XHTML 1.0 Strict, Transitional, Frameset
---------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


XHTML 1.1 DTD
-----------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
You must log in or register to reply here.
Back
Top