Need help with stacking order
Hi All,
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 />
info@arcolacovenant.org </div>
</body>
</html>
I have attached all my images files so you can see the full site locally.
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"> </div>
<div id="menu">
<ul>
<li><a href="#">About Us</a><span id="about_us_menu"> ↓ </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 & Directions</a><br>
<br>
<a href="http://arcolacovenant.org/Redesign_AboutUs/PastorsandStaff">Pastors & 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"> ↓ </span></li>
<li><a href="#">Serving</a><span id="serving_menu"> ↓ </span></li>
<li><a href="#"> Resources</a><span id="resources_menu"> ↓ </span></li>
<li><a href="#"> Events</a><span id="events_menu"> ↓ </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 />
info@arcolacovenant.org </div>
</body>
</html>
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Bookmarks