creating a taskbar with css

ebuoe · 05-08-2009, 02:26 PM

hw do you design an immovable box(like what facebook have at the foot of their page that contains chat and notification)such that it behaves like a taskbar and doesn't move when you scroll up and down using css.

Wildhoney · 05-08-2009, 03:37 PM

They tend to set the position to absolute and position it at the bottom of the window. Such as like with the following CSS code:

css Code:

position: absolute;
left: 0;
bottom: 0;

9three · 08-13-2009, 07:37 PM

Hi

I'm trying to figure out how to get it to work. If the content of the page is my resolution height then it works fine. But if its more than that and I scroll down, the bar will not move. Basically I need it to "stick" to the bottom of the page. Not sure if I would need to us javascript to determine whether the user is at the initial starting point of the page or scrolling.

tool bar code:

Code:

/* Toolbar */
#toolbar {
  position: absolute;
  width: 100%;
  height: 20px;
  margin: 0px;
  padding: 5px 0px 0px 0px;
  left: 0px;
  bottom: 0px;
  border-top: 2px solid #b5b5b5;
  background: #e5e5e5;
}

I've set the tool bar under and outside my wrapper

Code:

#wrapper 
{
  position: relative;
  margin: 0 auto;
  padding: 0px;
  width: 1000px;
}

Here is the html:

Code:

<div id="wrapper">
  <div id="header">
    header
  </div>
  <div id="content">
    content
  </div>
  <div id="footer">
    <div class="copyright">
      copyright
    </div>
  </div>
</div>

<div id="toolbar">
  <div class="content">Tool bar</div>
</div>

Rhinos · 08-19-2009, 05:57 PM

Ok this is right out of the facebook CSS (I used firebug to inspect the bottom bar):

Code:

body #presence {
  bottom: 0;
  color: #111111;
  font-size: 11px;
  height: 25px;
  padding: 0;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 99;
}

What you see here is that instead of using absolute positioning, they use fixed positioning. This will keep it in place regardless of scrolling.

The z-index is used so that it stays above the other content on the page (and any embedded flash that may be on the page).

On facebook they also have another div inside the div that uses the above code that is 100% width and uses a margin to make the gaps on the left and right of the bar.

hjalmar · 08-20-2009, 01:10 PM

Quote:

Originally Posted by Rhinos

Ok this is right out of the facebook CSS (I used firebug to inspect the bottom bar):

Code:

body #presence {
  bottom: 0;
  color: #111111;
  font-size: 11px;
  height: 25px;
  padding: 0;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 99;
}

What you see here is that instead of using absolute positioning, they use fixed positioning. This will keep it in place regardless of scrolling.

The z-index is used so that it stays above the other content on the page (and any embedded flash that may be on the page).

On facebook they also have another div inside the div that uses the above code that is 100% width and uses a margin to make the gaps on the left and right of the bar.

They prob have a conditional comment or css hack directly in the css as fixed positioning isn't supported in internet explorer. And about the z-index overlapping flash is depending on how the flash itself is displayed.

To the thread starter, just put position: relative; on your body

Rhinos · 08-20-2009, 06:08 PM

Yes in the internet explorer 6 you must use javascript or at least a CSS hack.
Facebook no longer supports ie6 so it doesn't use any javascript or CSS hacks to position it's 'presence' bar as they call it.

It will work in IE7 if you use a Strict doctype. Also another point is that if you use the Strict doctype then the :hover css will work on table rows and other elements. It doesn't work on Transitional doctypes (you'll have to use javascript again to simulate the hover events).