Solved

Layer a Div over another Div

Posted on 2011-02-14
6
1,145 Views
Last Modified: 2012-05-11
I have an HTML document here with 2 divs, the first div is a jquery slow show (the jquery cycle plg in) and then I have a div below which is where the content will go. I want the content div to layer over the slideshow div so the that the slideshow is running in the background of my page. No matter what I try the content div just shows up below the slideshow div.

here is my code:
<!DOCTYPE html> 
<html> 
<head> 
<title>Title</title> 
<link href="css/global.css" rel="stylesheet" type="text/css">

<style type="text/css"> 
body{background-color: #000;}
.slideshow { height: 771px; width: 1500px;}
.slideshow img {background-color: #000; position: ;}
.container {}
</style> 

<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'turnDown',
		//speed: 1000,
		timeout: 10000,
});
</script> 
</head> 

<body> 
	<div class="slideshow"> 
		<img src="img_home.jpg" /> 
		<img src="img_services.jpg" /> 
		<img src="img_contact.jpg" /> 
		<img src="img_about.jpg" /> 
	</div> 

	      <div class="container">
      
      		<!-- content will go here -->
      		
      <!---end of container-->
      </div>

</body> 
</html>

Open in new window



0
Comment
Question by:RNB
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 34891058
In order for layering like this to work, you'll need both divs to be positioned absolutely and then have a z-index applied.  

So your CSS should be like this:

<style type="text/css"> 
body{background-color: #000;}
.slideshow { height: 771px; width: 1500px;position:absolute; z-index:10;}
.slideshow img {background-color: #000; position:absolute; z-index:1;}
.container {}
</style>

Open in new window

0
 

Author Comment

by:RNB
ID: 34891223
LZ1:

thank you so much for the reply, it seems to be working but the content div is showing up behind the div with the images and I need it to be the other way around, what can I do to reverse whats happening?

thank you!
0
 
LVL 30

Expert Comment

by:LZ1
ID: 34891237
Reverse the Z-indexes.  If that doesn't work, can you show a live URL?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:RNB
ID: 34893042
I reversed the z-index and still the same problem, this is a live example:

http://dev.anathallo.net/trin/index.html


if you refresh, for a split second there you can see my nav bar and header then the image loads and goes over it.
0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 34894520
I think you have problem with class there so now I have changed some of your code which can work here:
<style type="text/css">
.slideshow { height: 771px; width: 1500px;position:absolute; z-index:0; margin: auto;}
.slideshow img {background-color: #000; position:absolute; z-index:0;}
#container {z-index:15;}
</style>

Open in new window

Here I have changed your container class to container div and in your global.css file I have changed same like follwoing:
//container class was changed to div
#container {
	width: 1000px;
	position:absolute;
	margin:0 auto;
	
}

Open in new window


So now here is all of the code for your page:

<!doctype html>
<html>
<head>
<title>Title</title>
<link href="css/global.css" rel="stylesheet" type="text/css">
<style type="text/css">
.slideshow { height: 771px; width: 1500px;position:absolute; z-index:0; margin: auto;}
.slideshow img {background-color: #000; position:absolute; z-index:0;}
#container {z-index:15;}
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    //timeout: 10000,
  });
});
</script>
</head>
<body>

 <div class="slideshow">
    <img src="img_1.jpg" />
    <img src="img_2.jpg" />
    <img src="img_3.jpg" />
    <img src="img_4.jpg" />
  </div>
        <div id="container">
     
          <div class="header">
            
            <div class="logo">
              <img src="img/con_sol.png" />
            <!-- end of .logo -->
            </div>
          
        <div class="contactNumber">
          <p>Phone: (805) 648-3486 | Fax: (805) 648-3735</p>

        </div>
          
        <div class="navbar">
          <table align="center">
            <td><a href="index.html">Home</a></td>
            <td><a href="services.html">Services</a></td>
            <td><a href="about.html">About</a></td>
            <td><a href="contact.html">Contact</a></td>

          </table>
        </div>
      
          <!--end of header -->
          </div>
          
            <div class="content">
              <h1>Header</h1>
            <!--end of content--> 
            </div>
            
          <div class="footer">

            
          <!--end of footer -->
          </div>
          
      <!---end of container-->
      </div>
  
</body> 
</html>

Open in new window


And CSS code of global.css is:
a:link, a:visited {   /*special rules for links in the navbar*/
  padding: 5px 10px 3px 10px;
  margin: 0px 10px 0px 10px; 
  text-decoration: none;
  color: #fff;
}
a:hover{
  padding: 5px 10px 3px 10px;
  margin: 0px 10px 0px 10px;
  background-color: #fff; 
  text-decoration: none;
  color: #000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
body {
 color: #fff;
 margin: 0px;
 font-family: "Myriad Pro", Arial, Helvetica, Tahoma, sans-serif; 
 background-color: #000;
}

#container {
	width: 1000px;
	position:absolute;
	margin:0 auto;
	
}

.header {
	height: 1%;
	overflow: hidden;
	z-index:2;
}

.logo {
	padding: 25px;
	float: left;
	height: 103px;
	width: 400px;
	z-index:1;
}

.navbar {
  float: right;
	width: 375px;
	margin: 0px;
	padding: 10px;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.contactNumber {
  color: #999;
  padding: 0px 10px 0px 10px;
  float: right;
  width: 335px;
  padding-left: 50px;
  border-bottom: thin solid #333;
}
.contactNumber p {
  margin:5px 0px 5px 0px;
}
.content {
  margin-top: 150px;
	padding: 10px 10px 10px 10px;
	height: 700px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
}
.content h1 {
  border-bottom: solid thin #333;
}

.footer {

}

Open in new window


I have you can manage the position of Container as you need.
0
 

Author Comment

by:RNB
ID: 34901689
wow! thank you so much, jagadishdulal. That worked brilliantly!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime is disastrous for companies and can lead to major hits on a brand, reputation, an…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question