|
|
Fluid CSS positioning
|
|
|
|
Mac Elite
Join Date: Jan 2003
Location: San Diego
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
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).
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
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" ?
|
|
|
|
|
|
|
|
|
Grizzled Veteran
Join Date: Nov 2003
Location: Hebburn, UK
Status:
Offline
|
|
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.
|
Just who are Britain? What do they? Who is them? And why?
Formerly Black Book
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Aug 2001
Location: Capitol City
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Aug 2001
Location: Capitol City
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
Originally Posted by Black Book
Outdated for us web developers, not necessarily users who don't know better.
er, who do you develop for?
|
|
|
|
|
|
|
|
|
Grizzled Veteran
Join Date: Nov 2003
Location: Hebburn, UK
Status:
Offline
|
|
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.
|
Just who are Britain? What do they? Who is them? And why?
Formerly Black Book
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Aug 2001
Location: Capitol City
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
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...............
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Jan 2003
Location: San Diego
Status:
Offline
|
|
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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|