Solved

Layer a Div over another Div

Posted on 2011-02-14
6
1,142 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to dynamically set the form action using jQuery.
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 …

777 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