Question

How do get a bar drop to down from the top of the browser window after a period of time that the user has been viewing the page? Say 5 seconds. This bar would then push all content on the page down until the bar finishes appearing. The bar would be used to show a single line of text informing the user of something. And maybe a small little X on the right side of the bar to close it.

Currently this is the CSS:

#infobar {
    border-bottom: 5px solid;
    height: 25px;
    position: fixed;
    width: 100%;
    border-bottom-color: #F00;
    background-color: #9C9;
    margin-top:-16px;
}
#infobar .text {
    color: #FFFFFF;
    float: left;
    font-family: arial;
    font-size: 12px;
    padding: 5px 0;
    position: relative;
    text-align: center;
    width: 100%;
}
#infobar .text a {
    color: #FAFAFA;
}
#infobar .text a:hover {
    color: #FFE2A0;
}

</style>

And HTML:

<div id="infobar">
<div class="text">
....this is the bar text....
</div>
</div>

Answer 1

Using only HTML/CSS isn’t possible, as it needs animation and time control, you’ll need an additional technology, such Javascript/JQuery or Flash.

EDIT 1

I think the below code will do what you want.

CSS

<style type="text/css">

#infobar {
    display:none;
    border-bottom: 5px solid;
    height: 25px;
    position: fixed;
    width: 100%;
    border-bottom-color: #F00;
    background: #9C9;
    margin-top:-16px;
}
#infobar .text {
    color: #FFFFFF;
    float: left;
    font:12px arial;
    padding: 5px 0;
    position: relative;
    text-align: center;
    width: 100%;
}
#infobar .text a {
    color: #FAFAFA;
}
#infobar .text a:hover {
    color: #FFE2A0;
}

#close {
    color: red;
    float:right;
}

</style>

Javascript / JQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(window).load( function() {

         setTimeout( function() {

             $("#infobar").slideToggle("fast");

         }, 5000);


        $("#close").click( function() {

            $("#infobar").slideToggle("fast");
            return false;

        });


    });

</script>

HTML

<div id="infobar">
    <div class="text">
        ....this is the bar text....
        <a href="#" id="close">close</a>
    </div>
</div>