How to make a menu bar like facebook status bar?

[vinnier]

How do I achieve a menu that acts like facebook status bar? I tried this http://ryan.rawswift.com/2009/02/15/fixed-that-bar-at-the-bottom-like-facebook/ and it messes up the website completely.

 

Any help please?

[andrewgauger]

Did you put the .css files in a directory:

images/

[vinnier]

Of course I did.

[Maq]

vinnier, it's almost impossible for us to help you without some sort of code or description of the problem.  You have to narrow down your problem, what exactly does, "it messes up the website completely" mean?  Can you provide a screen shot or link?

[vinnier]

I am looking for a alternative and simpler way to do it, not a solution the the problem I have with the script I tried. (btw. It makes 3/4 of my site disappear with only header staying in it's place. but it's not important as I am asking for a different way to do it)

[webmaster1]

Will a Meebo bar do the trick? It's similar but different:

 

http://bar.meebo.com/

[vinnier]

Thanks for that but it won't do it for me. See I want the bar to be a menu for my site that acts like the facebook statu bar... (scrolls with the website etc)

[webmaster1]

jQuery perhaps? I can't seem to find one though. 

 

 

[vinnier]

same problem here :/

[Maq]

Your best bet is to Google for one.  Those are the only replies you are going to get.

[vinnier]

there is nothing more on google then the one I tried and it doesn't work...

[Maq]

there is nothing more on google then the one I tried and it doesn't work...

 

Not sure what else you expect.  Someone suggested JQuery, but it seems you didn't even make an attempt.  Unless someone has already developed this replica, I'm confident no one is going to do it for you.

 

Here are what seem to be helpful Google results:

 

http://www.phpfreaks.com/forums/index.php?topic=201294.0

http://www.dynamicdrive.com/forums/showthread.php?t=31628

http://www.daniweb.com/forums/thread206476.html#

[haku]

<div id="status_bar">some stuff</div>

 

#status_bar
{
  position:fixed;
  bottom:0;
  width:100%;
}

[vinnier]

Thanks, but it doesn't seem to work either... It just result in a plain text (i've changed the width value to 50% to be sure) there is no bar :/

 

[attachment deleted by admin]

[hcdarkmage]

The code haku gave you works. All you have to do is style it the way you want.

[vinnier]

how come it doesn't work for me? No matter what browser I use I only get a plain text in the corner, like on the pic. There is no bar...

[hcdarkmage]

There is no bar because you need to style the div to look like the bar. You have the code, but the style you are going to have to work with.

[andrewgauger]

Remember the css I was talking about?  Here is the contents of the bar you originally quoted:

                height:30px; /* fix bar's height */

width:900px; /* fixed width */

 

/* center this div */

margin-left:auto;

margin-right:auto;

 

/* add effect */

background-color:#EEEEEE;

border:#666666 solid 1px;

[oni-kun]

There is no bar because you need to style the div to look like the bar. You have the code, but the style you are going to have to work with.

 

I'd recommend you get an extension such as Firebug to view the current styles over an element, It is a useful tool to debug problems with styles. You simply aren't applying the rules to them.

[haku]

I gave you the glass. You need to pour the beer into it now.

[webmaster1]

I gave you the glass. You need to pour the beer into it now.