Solved

Layer a Div over another Div

Posted on 2011-02-14
6
1,154 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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 

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

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
This video teaches users how to migrate an existing Wordpress website to a new domain.
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…

626 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