getting slider behind menu

**blsbball** · 14 Apr 2011, 03:20 PM

Hey hope all is well with everyone. I'm designing a site for a team I will be coaching over the summer. I want the menu to be top center and then a large jquery slider behind it. However, I cannot figure out how to get the jquery slider behind the menu without covering it or pushing it up past the top of the page. Any help would be greatly appreciated. Thanks

HTML Code:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="nivo-slider/demo/style.css" type="text/css" media="screen" />
  
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title>Untitled Document</title>
  </head>
  
  <body>
  <div id = "header">
  <div id = "logo"><a href="/"><img src="images/logo.jpg" width="115" height="50" alt="Logo" /></a></div>
  <ul>
  <li><a href="#">Roster</a></li>
  <li><a href="#">Coaches</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Video</a></li>
  </ul>
  </div>
  
  <div id = "slider_space">
  <div id="slider-wrapper">
              <div id="slider" class="nivoSlider">
                  <img src="images/toystory.jpg" alt="" />
                  <img src="images/walle.jpg" alt="" />
                  <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
              </div>
              <div id="htmlcaption" class="nivo-html-caption">
                  <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
              </div>
          </div>
      </div>
      <script type="text/javascript" src="nivo-slider/demo/scripts/jquery-1.4.3.min.js"></script>
      <script type="text/javascript" src="nivo-slider/jquery.nivo.slider.pack.js"></script>
      <script type="text/javascript">
      $(window).load(function() {
          $('#slider').nivoSlider();
      });
      </script>
	  </div>
  </body>
  </html>

Code:

/* CSS Document */
body{
		
}
ul{
list-style-type: none;
background-image: url(navi_bg.png);
height: 0px;
width: 750px;
margin: auto;
}
a {
background-image: url(images/navi_bg_divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 50px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 17px;
color: #371C1C;
}
li{
float: left;
}
.resize {
width: 400px;
height : auto;
}
.resize {
width: auto;
height : 600px;
}
.center{
margin-left:auto;
margin-right:auto;
text-align:center;	
	
}
#logo{
float: left;	
}
#header { 
margin-top: -50px;;
position: absolute; 
width: auto; 
background-color: #fff; 
left: 50%; 
margin-left: -465px; 
z-index: 2
}
#slider_space{
height: 30%;
width: 100%
	
}

Code:

/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/

/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}

table {
	border-collapse:separate;
	border-spacing:0;
}
caption, th, td {
	text-align:left;
	font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:"";
}
blockquote, q {
	quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

/*===================*/
/*=== Main Styles ===*/
/*===================*/
body {
	font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	color:#2d3536;
	background:#e8e0c0 url(images/background.png) repeat;
    text-shadow:0 1px 0 #fff;
}

a, a:visited {
	color:#2d3536;
	text-decoration:none;
	border-bottom:1px dotted #826a4d;
}
a:hover, a:active {
	color:#9e805c;
	text-decoration:none;
}


/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider-wrapper {
    /*background:url(images/slider.png) no-repeat;*/
    width:998px;
    height:392px;
    margin:0 auto;
    padding-top:74px;
    margin-top:50px;
}

#slider {
	position:relative;
    width:618px;
    height:246px;
    margin-left:0px;
	background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a {
	border:0;
	display:block;
}

.nivo-controlNav {
	position:absolute;
	left:260px;
	bottom:-42px;
}
.nivo-controlNav a {
	display:block;
	width:22px;
	height:22px;
	background:url(images/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.nivo-controlNav a.active {
	background-position:0 -22px;
}

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(images/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
	clear:both;
}

**cadenuo** · 14 Apr 2011, 04:39 PM

z-index is your solution

Thread: getting slider behind menu

Thread Tools

getting slider behind menu

Similar Threads

JavaScript Slider Issue

Slider (like drop down menu) - How to change direction of slide?

Help with Slider

Slider recommendations

Slider

Posting Permissions