5 replies to this topic

[shackrock]

Ok so, I have the "twitter-style" drop down alert bar. I like it both position:realtive (meaning, the page moves down to make room for this at the top of the page), as well as the position: fixed (meaning, the bar stays at the top of the page as you scroll, no matter what.

HOWEVER, I'm having issues because my CSS background MAKES the page.

With "relative", the entire page moves down EXCEPT the background. This means that everything is no longer lined up, it's killing me.

With "fixed", the top bar covers the top portion of the screen, where a lot of controls are. So my only idea here is to put a DIV the same size as the top-drop-down-bar when it appears (so that the controls move down). I tried that too, but AGAIN, the background doesn't move (duh!). So, I'm stuck with the same problem as before.

I'm certain somebody's done this before...yeah? Any ideas?

[Smilex]

Can't you just avoid using the background property, and making the background just another image with the lowest z value?

EDIT:

I'm expecting that someone with more knowledge of CSS will have a better answer, so you could wait for that

[shackrock]

Smilex said:

Can't you just avoid using the background property, and making the background just another image with the lowest z value?

EDIT:

I'm expecting that someone with more knowledge of CSS will have a better answer, so you could wait for that

This won't work, to my knowledge, because I can't repeat an img tag with repeat-x..like you can with a Background tag... so yeah...square one I guess?

Anyone else?

[shackrock]

Anyone can help here?

[BlaineSch]

Post some code up, I'm sure lots of people will be happy to look at it.
You don't need to double post.

[shackrock]

BlaineSch said:

Post some code up, I'm sure lots of people will be happy to look at it.
You don't need to double post.

Below is the CSS for the background:

body{padding:0px; margin:0px; background:url(images/mainbg.jpg) 0 0  repeat-x #fff; color:#707070; font:14px/18px "Trebuchet MS", Arial,  Helvetica, sans-serif;}
div, p, ul, h2, h3, img{padding:0px; margin:0px;}
ul{list-style-type:none;}

Below is the JS and CSS for the info bar:

<script type="text/javascript">

                $(document).ready(function() {
                var $alertdiv = $('<div id = "alertmsg"/>');
                /*$alertdiv.text("");*/
                $alertdiv.bind('click', function() {
                    $(this).slideUp(200);
                });
                $(document.body).append($alertdiv);
                $("#alertmsg").slideDown("slow"); 
                setTimeout(function() { $alertdiv.slideUp(200) }, 10000);
                                });
            </script>
            <style type="text/css">
                 #alertmsg
                    {
                      width:100%;
                      position:fixed;
                      height:85px;
                      top:0;
                      left:0;
                      z-index:32768;
                      background-color:#efefef;
                      font-size:12px;
                      color:#000;
                      text-align:center;
                      padding:0px 0px;
                      border-bottom:1px solid #bbb;
                      /*cursor: pointer;*/
                      overflow: hidden;
                      opacity: .9;
                      display:none;
                      margin-left:auto; 
                      margin-right:auto;
                    }

            </style>

Then, anything in the <div id="alertmsg"/> </div> tags gets put into the drop down bar...