Need help with stacking order

@llckllMay 31.2012

Hi All,

I’m redesigning my church’s website. This is what I need it to do:

1) body_container should be a background rotating image
2) top_bar keeps going behind the body_container when I implement various jquery or css background image rotators.

Basically, how can I have the top_bar div tag to always be on top within the body_container and rotating images? I tried z-index but that doesn’t do it.

[CODE]<!DOCTYPE html>

<head> <title>Welcome to Arcola Covenant Community!</title> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script> <style type=”text/css”> body { background-image:url(images/background.png); background-repeat: repeat; } #logo { width: 900px; margin: 25px auto 35px auto; } #body_container { width: 900px; height: 550px; background-color:#FFF; margin: 0px auto 0px auto; -webkit-box-shadow: 0px 0px 35px #000; -moz-box-shadow: 0px 0px 35px #000; -o-box-shadow: 0px 0px 35px #000; box-shadow: 0px 0px 35px #000; background-image:url(images/99466822.jpg); } #top_bar { height: 40px; background-image:url(images/top_bar_bg.png); background-repeat: repeat-x; margin: 0px auto 0px auto; } #title { float: left; width: 385px; padding: 10px 0px 0px 25px; font-family:Arial, Helvetica, sans-serif; font-size: 18px; color: #FFF; } #menu { margin: 0px 0px 0px 0px; padding: 13px 0px 0px 25px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #FFF; z-index: 999; } #menu a:link { color:#FFFFFF; text-decoration: none; } /* unvisited link */ #menu a:visited { color:#FFFFFF; text-decoration: none; } /* visited link */ #menu a:active { color:#FFFFFF; text-decoration: none; } /* selected link */ #menu a:hover { color: #F26532; text-decoration: none; } /* mouse over link */

#footer { width: 900px; margin: 35px auto 50px auto; font-family:Arial, Helvetica, sans-serif; font-size: 10px; color: #666; } </style> </head>

<body> <div id=”logo”><img src=”images/top_left_header_logo.png” /></div>

<div id=”body_container”> <div id=”top_bar”> <div id=”title”> </div> <div id=”menu”> <a href=”#”>About Us</a>   ↓            <a href=”#”>Ministries</a>   ↓            <a href=”#”>Serving</a>   ↓            <a href=”#”> Resources</a>   ↓            <a href=”#”> Events</a>   ↓</div> </div> <div id=”body_content”></div> </div> <div id=”footer”><strong>Arcola Covenant Community</strong><br /> <br /> S-52 Paramus Road | Paramus, NJ 07652<br /> <br /> 201.843.7970 | main<br /> 201.843.5429 | fax<br /> <br /> [email protected] </div> </body> </html>[/CODE]

I have attached all my images files so you can see the full site locally.

to post a comment

CSS

1 Comments(s) _↴

@llckllauthorMay 31.2012 — #Here is my udpated code that I worked on so far after my original post.

[CODE]<!DOCTYPE html>
 
 <head>
 <title>Welcome to Arcola Covenant Community!</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 <style type="text/css">
 body {
 background-image:url(images/background.png);
 background-repeat: repeat;
 }
 #logo {
 width: 900px;
 margin: 25px auto 35px auto;
 }
 #body_container {
 width: 900px;
 height: 550px;
 background-color:#FFF;
 margin: 0px auto 0px auto;
 -webkit-box-shadow: 0px 0px 35px #000;
 -moz-box-shadow: 0px 0px 35px #000;
 -o-box-shadow: 0px 0px 35px #000;
 box-shadow: 0px 0px 35px #000;
 background-image:url(images/homepage_bg.jpg);
 }
 #top_bar {
 height: 40px;
 background-image:url(images/top_bar_bg.png);
 background-repeat: repeat-x;
 margin: 0px auto 0px auto;
 }
 #title {
 float: left;
 width: 425px;
 padding: 10px 0px 0px 25px;
 font-family:Arial, Helvetica, sans-serif;
 font-size: 18px;
 color: #FFF;
 }
 
 #menu ul {
 list-style-type: none;
 list-style-image: none;
 margin: 0px auto 0px auto;
 padding: 8px 0px 0px 0px;
 }
 #menu li {
 display: inline;
 font-family:Arial, Helvetica, sans-serif;
 font-size: 11px;
 padding: 0px 0px 0px 20px;
 color: #FFF;
 }
 
 #menu a:link {
 color:#FFFFFF;
 text-decoration: none;
 }      /* unvisited link */
 #menu a:visited {
 color:#FFFFFF;
 text-decoration: none;
 }  /* visited link */
 #menu a:active {
 color:#FFFFFF;
 text-decoration: none;
 }  /* selected link */
 #menu a:hover {
 color: #F26532;
 text-decoration: none;
 }  /* mouse over link */
 #body_content {
 width: 900px;
 height: 550px;
 position: absolute;
 }
 #footer {
 width: 900px;
 margin: 35px auto 50px auto;
 font-family:Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #666;
 }
 
 #about_us_menu
 {
 cursor: pointer;
 color: #FFFFFF;
 }
 
 #about_us_menu:hover
 {
 cursor: pointer;
 color: #F26532;
 }
 
 #about_us_dropdown {
 width: 150px;
 height: 230px;
 font-family:Arial, Helvetica, sans-serif;
 font-size: 11px;
 position: absolute;
 text-align: left;
 z-index: 9999;
 display: none;
 margin: 12px 0px 0px 460px;
 padding: 10px 0px 0px 10px;
 background-image:url(images/top_bar_bg.png);
 background-repeat: repeat;
 }
 
 
 </style>
 
 <script type="text/javascript">
 
 $(document).ready(function(){
 $("#about_us_menu").click(function(){
 $("#about_us_dropdown").slideDown(350);
 
 });
 $("body").click(function() {
 $("#about_us_dropdown").fadeOut(350);
 });
 
 $("#about_us_menu").click(function(e) {
 e.stopPropagation();
 });
 });
 
 </script>
 
 </head>
 
 <body>
 <div id="logo"><img src="images/top_left_header_logo.png" /></div>
 <div id="body_container">
 <div id="top_bar">
 <div id="title">&nbsp;</div>
 <div id="menu">
 <ul>
 <li><a href="#">About Us</a><span id="about_us_menu">&nbsp;&nbsp;&nbsp;&darr;&nbsp;&nbsp;&nbsp;</span>
 <div id="about_us_dropdown">
 <a href="http://arcolacovenant.org/Redesign_AboutUs/Overview">Overview</a><br>
 <br>
 <a href="http://arcolacovenant.org/Redesign_AboutUs/WeeklyServices">Weekly Services</a><br>
 <br>
 <a href="http://arcolacovenant.org/Redesign_AboutUs/ContactsandDirections">Contact &amp; Directions</a><br>
 <br>
 <a href="http://arcolacovenant.org/Redesign_AboutUs/PastorsandStaff">Pastors &amp; Staff</a><br>
 <br>
 <a href="http://arcolacovenant.org/Redesign_AboutUs/GovernanceCommittee">Governance Committee</a><br>
 <br>
 <a href="http://arcolacovenant.org/Redesign_AboutUs/WhatWeBelieve">What We Believe</a><br>
 <br>
 <a href="http://arcolacovenant.org/Redesign_AboutUs/OurMission">Our Mission</a><br>
 <br>
 <a href="http://arcolacovenant.org/Redesign_AboutUs/OurHistory">Our History</a><br>
 <br>
 </div>
 
  </li>
  <li><a href="#">Ministries</a><span id="ministries_menu">&nbsp;&nbsp;&nbsp;&darr;&nbsp;&nbsp;&nbsp;</span></li>
  <li><a href="#">Serving</a><span id="serving_menu">&nbsp;&nbsp;&nbsp;&darr;&nbsp;&nbsp;&nbsp;</span></li>
  <li><a href="#"> Resources</a><span id="resources_menu">&nbsp;&nbsp;&nbsp;&darr;&nbsp;&nbsp;&nbsp;</span></li>
  <li><a href="#"> Events</a><span id="events_menu">&nbsp;&nbsp;&nbsp;&darr;&nbsp;&nbsp;&nbsp;</span></li>
  </ul>
  </div>
 </div>
 <div id="body_content"> </div>
 </div>
 <div id="footer"><strong>Arcola Covenant Community</strong><br />
 <br />
 S-52 Paramus Road  |   Paramus, NJ 07652<br />
 <br />
 201.843.7970 | main<br />
 201.843.5429 | fax<br />
 <br />
 [email protected] </div>
 </body>
 </html>[/CODE]

Also in #CSS _↴

Problem different displayed text Firefox / Chrome Another Horizontal Navigation Question(s)[RESOLVED] IE blinks on floated divs with PNG backgrounds

Success!

Help @llckll spread the word by sharing this article on Twitter...

Tweet This

Need help with stacking order

1 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Need help with stacking order

1 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

1 Comments(s) _↴

Also in #CSS _↴