PDA

View Full Version : 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



<!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>




/* 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%

}




/*=================================*/
/* 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