Solved

Layer a Div over another Div

Posted on 2011-02-14
6
1,130 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
  • 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

706 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now