Welcome to the MacNN Forums.

iMOTOR · Sep 28, 2005, 06:19 PM

Forgive me for being a CSS n00b, but I have looked far and wide on Google and I'm having trouble finding a definitive answer, so here goes:

First-
I want to place an image at the top right, so that regardless of screen size, the image always stays
in the top left of the browser window (easily done with tables

)

Second-
I also want a layer at the bottom of the browser window that stays at the bottom regardless of screen size and stretches to fill the width of the window.

Can someone let me know the easiest way of doing this?

Thanks

registered_user · Sep 28, 2005, 07:07 PM

first is easy.

Ensure the element is a child of the body (or at least not the child of another positioned element), and set its position to absolute. position: absolute; top: 0; right: 0; You can use a div element and place the image as the background of that div if you wish.

Second is also easy -- if you don't mind that it doesn't work in Internet Explorer and other out dated browsers. Set its position to fixed. position: fixed; bottom: 0; left: 0; If you want it to work in IE, you'll probably need to employ a hack of some sort. I've read that javascript can do it, but I've not tried it.

All block level images are full-width (mind the margins and padding even on the body).

skalie · Oct 1, 2005, 01:58 AM

Originally Posted by registered_user

Internet Explorer and other out dated browsers.

stats

You call a browser used by 70% of the internerd "out dated" ?

Chris O'Brien · Oct 1, 2005, 06:18 AM

Originally Posted by skalie

stats

You call a browser used by 70% of the internerd "out dated" ?

Outdated for us web developers, not necessarily users who don't know better.

registered_user · Oct 1, 2005, 08:27 AM

Popularity doesn't make software current.

IE6 was released 4 years ago. How much software is on your machine that's over 4 years old that's 'current'?

Photoshop 5? Netscape 4? SoundJam?

I can accept that it's popular and widely used. But like those wacky football tiger stripe pants that fans still wear, it's out dated.

DeathMan · Oct 2, 2005, 12:03 PM

Bottom attached footers, as well as other fluid layout techniques can be tricky to get them working in all browsers, but here's a howto that pretty well covers all the issues at least wrt footers. Its a little tough going if your new, but stick with it though, it goes over a lot of CSS issues. This is one of the few things in CSS layout that is harder and less elegant than with tables. Fortunately for me (from a CSS layout perspective), I'm not a big fan of liquid layouts. I know in certain cases they're better, but for me, I just don't usually find them needed.

http://www.alistapart.com/articles/footers

DeathMan · Oct 2, 2005, 12:31 PM

Actually, it looks like this is about all you'll need:

http://www.alistapart.com/d/footers/footer_css3.html

This should work in current versions of Safari, IE 5+ on PC, IE6, Firefox, and I think Opera. If you want to support IE Mac, you can go to the Javascript, but I thin this is it.

skalie · Oct 3, 2005, 10:04 AM

Originally Posted by Black Book

Outdated for us web developers, not necessarily users who don't know better.

er, who do you develop for?

Chris O'Brien · Oct 3, 2005, 10:12 AM

I didn't mean I don't write stuff for IE (although, I don't for personal projects through choice) - but it's still outdated. I even have to write in VB6 for some jobs - and I don't think you'll find many people who'll say VB6 isn't outdated.

Just because it has to be used, doesn't mean it's not outdated. It's sorely lacking in many many ways, but it's large market share means we need to take it into account.

DeathMan · Oct 4, 2005, 02:54 AM

IE 6 is pretty decent when running in standards mode, which it should always be doing, right?

My only real qualm is png support, but I've learned to live with it. Its too bad, but its just one of those things.

skalie · Oct 4, 2005, 03:16 AM

Originally Posted by DeathMan

IE 6 is pretty decent

.........er no.

It just happens to be what is pre-packaged with your "house and garden" type computer sold around the corner.

70% of the public are quite happy with it, I assume that Firefox is making some headway into those statistics due to it's pop-up blocking nature.

I make websites for a living, my boss order a website and will want it live before the url has "propagated" or whatever urls do when getting born.

He doesn't give a poo about browser compatibility, if it works on IE, it works for his customer base.

Do I make a totally CSS based layout in Firefox then spend another half day tweaking it for IE? (Firefox can be pretty agressive cache wise when using css files, btw)

No, I use a tables based layout. It works, and works pretty much everywhere.

Oh the fun I had with IE 5 for Mac, tweak tweak tweak, but if the boss doesn't give a flying one...............

iMOTOR · Oct 4, 2005, 04:16 AM

Originally Posted by skalie

and will want it live before the url has "propagated" or whatever urls do when getting born.

Originally Posted by DeathMan

Fortunately for me (from a CSS layout perspective), I'm not a big fan of liquid layouts.

That begs the question then, what screen resolution are you designing for? 800X600?

Originally Posted by registered_user

Second is also easy -- if you don't mind that it doesn't work in Internet Explorer and other out dated browsers. Set its position to fixed. position: fixed; bottom: 0; left: 0; If you want it to work in IE, you'll probably need to employ a hack of some sort. I've read that javascript can do it, but I've not tried it.

Thanks. The following code actually seems to work in all the Mac browsers I've tried:

Code: <div id="Layer2" style="position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; z-index: 2; background: #333333"></div>