banner overlay help

by panchroma

HTML

<link rel="stylesheet" href="http://68.50.243.1/wunhopkuendo/css/bootstrap.css">
<link rel="stylesheet" href="http://68.50.243.1/wunhopkuendo/css/bootstrap-responsive.css">
<script src="http://68.50.243.1/wunhopkuendo/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <div class="navbar navbar-inverse">
            <div class="navbar-inner">

                <a class="brand" href="#"><img src="http://68.50.243.1/wunhopkuendo/img/logo.png"></a>
                <ul class="nav">
                    <li class="active"><a href="#">About</a></li>
                    <li><a href="#">Classes</a></li>
                    <li><a href="#">History</a></li>
                    <li><a href="#">Prices</a></li>
                    <li><a href="#">Directions</a></li>
                </ul>
            </div>
        </div>


<div id="content">


    <div id="carousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item"><img src="http://68.50.243.1/wunhopkuendo/assets/photos/zack_block.jpg" alt="" /></div>
            <div class="item"> <img src="http://68.50.243.1/wunhopkuendo/assets/photos/zack_kick.jpg" alt="" /></div>
            <div class="item"> <img src="http://68.50.243.1/wunhopkuendo/assets/photos/zack_students.jpg" alt="" /></div>

        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
    </div>



</div>

CSS

.brand img{
     z-index: 99;
    position:relative;
}
.navbar {
    height: 50px;



}

.navbar-inner {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;

}

#logo{
    background-image: url('../img/logo.png');
    width: 100px;
    height: 180px;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar .brand {
    max-height: 40px;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
    z-index: 15019240912098124;


}

#content{

    width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

#carousel{
    width: 960px;
    height: 640px;
    margin-left: auto;
    margin-right: auto;

}
#carousel a{


}