Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Layer a Div over another Div

Posted on 2011-02-14
6
Medium Priority
?
1,162 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
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.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

916 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