CODEWITHSUNDEEP
javascriptjqueryoverlaynivo-slider
adamhuxtable
adamhuxtable

Reputation: 479

Nivo Slider add logo over the top

Hey guys I have setup Nivo slider to my specification, but what I want to be able to do is overlay my logo over the top of it. I have tried playing around with the z-index but to no avail.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

    <div id="header"><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider">
                <img src="images/dog.jpg" alt="" />
                <img src="images/cat.jpg" alt="" />
          </div></div></div><script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
</html>

This is the css I've added

#header{
width: 100%;
background-color: #000000;}

#content{
    width:900px;
    background:#0C6;
    color:#cccccc;
    margin-top:-120px;
    float:left;
    z-index:1000;
    margin:0 auto;
}

Thanks in advance Adam

Upvotes: 1

Views: 5029

Answers (1)

Modika
Modika

Reputation: 6282

loaded it up on js fiddler and it seems to work:

http://jsfiddle.net/zdvPv/1/

As @Reporter said, its hard to know what your doing without any source. I just had a play with firbug and i was able to get something to sit over the nivoslider.

<div style="position: absolute; top: 300; left:500; height: 100px; width: 100px; background: red; z-index: 100;">hello</div>

this was placed outside of the slider div. The code is terrible but its just a start for you to see if it would work, you could replace the div with an image or maybe have the image as a background of the div.

Edit: i messed around with firebug on this page: http://nivo.dev7studios.com/ cant show you an image mind

Edit 2: My solution is HTML & CSS not really javascript, so not sure how you want this implemented. You could dynamically inject the "overlay" using jquery

Upvotes: 1

Related Questions