hovering navigation div

jwalker80 · #1 Feb 22nd, 2007, 14:07

Hi,

Does anyone know way to "hover" a div along the bottom of a page above all other content so that when you scroll down the page it stays static on the bottom of the page, while everything else scrolls.

Im not sure if you can do this in CSS, maybe you need JS??

karinne · #2 Feb 22nd, 2007, 14:15

By using position: fixed it works in all the good browsers. To compensate for IE6's lack of ... well ... everything, you need javascript yes...

Ryan Fait · #3 Feb 22nd, 2007, 22:48

No you don't need JavaScript.

Use position: fixed;

You can do it with JS, but it looks MUCH better using CSS.

karinne · #4 Feb 23rd, 2007, 11:45

Quote:

Originally Posted by Ryan Fait

No you don't need JavaScript.

Use position: fixed;

Ryan ... position: fixed; doesn't work in IE6

Ryan Fait · #5 Feb 23rd, 2007, 13:00

http://tagsoup.com/cookbook/css/fixed/

karinne · #6 Feb 23rd, 2007, 13:04

Let me re-phrase that

Ryan ... position: fixed; doesn't work in IE6 unless you hack it to death

Bah ... what's one more hack eh?

Ryan Fait · #7 Feb 23rd, 2007, 13:10

Gotta do what you have to do as long as it's a graceful degradation.

karinne · #8 Feb 23rd, 2007, 17:37

Ok ... here ... it's not pretty but this works

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    #leftit {
        float: right;
        width: 350px;
    }
    
    .fixedbox {
        position: absolute;
        width: 120px;
        height: 75px;
        border: 1px solid #900;
        background-color: #ccc;
        color: #000
    }
    @media screen {
        div.fixedbox {
            position: fixed;
        }
        
        * html {
            overflow-y: hidden;
        }
        * html body {
            height: 100%;
            overflow: auto;
        }
        * html div.fixedbox {
            position: absolute;  
        }
    }
    </style>
    
</head>

<body>
<div id="leftit"><div class="fixedbox">This stays in place as you scroll!</div></div>
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />
bbaa lba lba<br />

</body>
</html>

jwalker80 · #9 Feb 23rd, 2007, 20:56

wow thats really useful, thanks! works with IE6 too, even better!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Navigation	inkz	Web Page Design	2	Apr 22nd, 2008 15:33
CSS Navigation Help	penguin	Starting Out	3	Mar 15th, 2008 13:43
Navigation help	elephantinc	Flash & Multimedia Forum	9	Feb 13th, 2008 22:46
Color for hovering links	skitson	Web Page Design	2	Feb 3rd, 2008 06:29
CSS navigation	AdRock	Web Page Design	1	Jul 15th, 2006 10:56

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
hovering navigation div