...

View Full Version : Nav-Bar style drop down



rickfink
11-04-2010, 09:21 PM
Trying to make a drop down menu that resembles the suckerfish nav bar style drop down menu (http://users.tpg.com.au/j_birch/plugins/superfish/#sample4 examples - #4)

Here's our site with a page that has what it would look like:

http://baysidesuperior.org/believe

So at the top you can see the second level nav, I would like to have it on every page when you hover over the main nav (Home, Ministries, Events, etc..) that the second nav would pop up, like this site:

http://graceinracine.com/

If you hover over one of the links, it pops up a second level nav.

I've tried doing it for the past couple hours, but can't figure it out. Don't usually ask for help but any would be great.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<link rel="shortcut icon" type="image/x-icon" href="http://baysidesuperior.org/images/bible.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Bayside Baptist Church - What We Believe</title>
<meta name="robots" content="index, follow" />

<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />

<style type="text/css">
<!--
.style1 {font-weight: bold}
.style7 {font-size: 12px}

.style10 {
font-size: 15px;
color: #8DA35C;
}
.style11 {font-size: 14px}


-->

</style>

<script type="text/javascript" src="Scripts/swfobject.js"></script>
<script type="text/javascript" src="Scripts/script.js"></script>
<script type="text/javascript" src="Scripts/actions.js"></script>


</head>
<body>

<div id="wrapper"><div id="padding">
<div id="header">
<div id="logo">

<h1><a href="http://baysidesuperior.org"><img src="http://baysidesuperior.org/images/logo.png" alt="Grace" border="0" width="220" height="29"></a></h1>
</div>
<div id="logo2">
<h1><a href="http://baysidesuperior.org/sunday">Services</a> | <a href="http://baysidesuperior.org/giving">Online Giving</a></h1>
</div>
<div id="nav">
<ul id="sddm">
<li><a href="http://baysidesuperior.org">Home</a> </li>
<li><a href="http://baysidesuperior.org/ministries">Ministries</a></li>
<li><a href="http://baysidesuperior.org/events">Events</a></li>
<li><a href="http://baysidesuperior.org/connect">Connect</a></li>
<li><a href="http://baysidesuperior.org/believe">About Us</a></li>
<li><a href="http://baysidesuperior.org/media">Media</a></li>
<li><a href="http://baysidesuperior.org/contact">Contact Us</a></li>
</ul>
<div style="clear:both"></div>
<div style="clear:both"></div>
</div>
<div id="sep">
<ul>
<li><a href="http://baysidesuperior.org/believe">What We Believe</a></li>
<li><a href="http://baysidesuperior.org/story">Our Story</a></li>
<li><a href="http://baysidesuperior.org/sunday">Services</a></li>
<li><a href="http://baysidesuperior.org/staff">Meet the Team</a></li>
<li><a href="http://baysidesuperior.org/faq">FAQ's</a></li>
<li><a href="http://baysidesuperior.org/documents/Constitution.pdf">Our Constitution</a></li>
<li><a href="http://baysidesuperior.org/journey">Journey of Faith</a></li>
</ul>
</div>
</div>



<div id="headline">

<div id="sidebar">
<div class="sermon">
<h1>Latest Sermon</h1>
<h2>A Mission-Minded Man</h2>
<h3>October 31 | Pastor Mark Pavola</h3>

<p id="listen"><a href="javascript:oct3110()">Listen</a></p>
<p id="download"><a href="http://www.baysidesuperior.org/Sermons/2010/force-download.php?file=10.31.10-Who_Is_This_Jesus-A_Mission-Minded_Man.mp3">Download</a></p>

</div>

<h1 class="events">Events</h1>
<p id="event"><a id="calendar" href="http://www.baysidesuperior.org/events">Calendar</a></p>

<div class="eventbox">
<h5><a href="events#E1">Lake Effects Concert</a></h5>
<h2>Date:<span class="listing"> Nov 07</span></h2>
<h2>Time: <span class="listing">6:00pm</span></h2>
<h2>Location: <span class="listing">Sanctuary</span></h2>
</div>

<div class="eventbox">
<h5><a href="events#E2">Men's Breakfast</a></h5>
<h2>Date:<span class="listing"> Nov 12</span></h2>
<h2>Time: <span class="listing">7:30am</span></h2>
<h2>Location: <span class="listing">Fellowship Hall</span></h2>
</div>

<div class="eventbox">
<h5><a href="events#E3">Bayside's Bountiful Boutique</a></h5>
<h2>Date:<span class="listing"> Nov 20</span></h2>
<h2>Time: <span class="listing">9:00am</span></h2>
<h2>Location: <span class="listing">Fellowship Hall</span></h2>
</div>
</div>

<div id="content">
<img src="images/banners/believe.gif" alt="" width="442" height="75" />
<h2>The Word of God</h2>

<p>We believe that the Bible is the Word of God, fully inspired and without error in the original manuscripts, written under the inspiration of the Holy Spirit, and that it has supreme authority in all matters of faith and conduct. (2 Timothy 3:16-17; 2 Peter 1:20-21; 1 Corinthians 2:12-13)</p>

<h2>The Trinity</h2>

<p>We believe that there is one living and true God, eternally existing in three persons, that these are equal in every divine perfection, and that they execute distinct but harmonious offices in the work of creation, providence, and redemption. (John 14:16-17; 1 Corinthians 12:4-6)</p>

<h2>God the Father</h2>

<p>We believe in God the Father; an infinite, personal spirit; perfect in holiness, wisdom, power, and love. We believe that He concerns Himself mercifully in the affairs of each person, that He hears and answers prayer, and that He saves from sin and death all who come to Him through Jesus Christ. (John 1:1-4; Hebrews 1:3; 1 Corinthians 8:6)</p>

<h2>Jesus Christ</h2>

<p>We believe in Jesus Christ, God’s only begotten Son, conceived by the Holy Spirit. We believe in His virgin birth, sinless life, miracles, and teachings. We believe in His substitutionary atoning death, bodily resurrection, ascension into heaven, perpetual intercession for His people, and personal visible return to earth. (Matthew 1:23; 1 Peter 2:24; John 3:16-18)</p>

<h2>The Holy Spirit</h2>

<p>We believe in the Holy Spirit who came forth from the Father and Son to convict the world of sin, righteousness, and judgment, and to regenerate, sanctify, and empower all who believe Jesus Christ. We believe that the Holy Spirit indwells every believer in Christ and that He is an abiding helper, teacher, and guide. (Romans 8:9, 14, 16, 27; Ephesians 1:13-14; John 16:7-14)</p>

<h2>Regeneration</h2>

<p>We believe that all people are sinners by nature and by choice and are, therefore, under condemnation. We believe that those who repent of their sins and trust in Jesus Christ as Savior are regenerated by the Holy Spirit. (John 3:18, 36; Romans 10:8-13; Ephesians 2:4-6; Romans 6:23) </p>

<h2>The Church</h2>

<p>We believe in the universal church, a living spiritual body of which Christ is the head and all regenerated persons are members. We believe in the local church, consisting of a company of believers in Jesus Christ, baptized on a credible profession of faith, and associated for worship, work, and fellowship. We believe that God has laid upon the members of the local church the primary task of giving the Gospel of Jesus Christ to a lost world. (1 Corinthians 12:12, 20; Colossians 1:18; Ephesians 1:22-23.)</p>

<h2>Christian Conduct</h2>

<p>We believe that Christians should live for the glory of God and the well-being of others; that their conduct should be blameless before the world; that they should be faithful stewards of their possessions; and that they should seek to realize for themselves and others the full stature of maturity in Christ. (1 Corinthians 6:19-20; Philippians 2:15; Ephesians 4:13-15)</p>

<h2>The Ordinances</h2>

<p>We believe that the Lord Jesus Christ has committed two ordinances to the local church; baptism and the Lord’s Supper. We believe that Christian baptism is the immersion of a believer in water into the name of the triune God. We believe that the Lord’s Supper was instituted by Christ for commemoration of His death. We believe that these two ordinances should be observed and administered until the return of the Lord Jesus Christ. (Matthew 28:19-20; Luke 22:15-20; 1 Corinthians 11:23-33) </p>

<h2>Religious Liberty</h2>

<p>We believe that every human being has direct relations with God, and is responsible to God alone in all matters of faith; that each church is independent and must be free from interference by an ecclesiastical or political authority; that therefore, Church and State must be kept separate as having different functions, each fulfilling its duties free from dictation or patronage of the other. (Romans 13:1-7; 1 Peter 2:13-17) </p>

<h2>Church Cooperation</h2>

<p>We believe that local churches can best promote the cause of Jesus Christ by cooperating with one another in a denominational organization. Such an organization, whether a regional or district conference, exists and functions by the will of the churches. Cooperation in a conference is voluntary and may be terminated at any time. Churches may likewise cooperate with interdenominational fellowships on a voluntary independent basis. (2 Corinthians 8:1-9, 18-24)</p>

<h2>Last Things</h2>

<p>We believe in the personal and visible return of the Lord Jesus Christ to earth and the establishment of His kingdom. We believe in the resurrection of the body, the final judgment, the eternal joy of the righteous, and the endless suffering of the wicked. (Luke 17:26-30; 12:35-40; 1 Thessalonians 4:14-18; 2 Thessalonians 2:1-12) </p>

</div>





<div class="clear"></div>

</div>



<div id="body">

<div class="clear">



<p>&nbsp;</p>

</div>

</div>

</div>

</div>

<div id="footer">
<div id="wrapper2">

<div class="footer-content">

<p><a class="style1" href="http://baysidesuperior.org">Home</a></p>

<p><a class="style1" href="http://baysidesuperior.org/story">About Us</a></p>

<ul>

<li><a href="http://baysidesuperior.org/story">Our Story</a></li>

<li><a href="http://baysidesuperior.org/sunday">Services</a></li>

<li><a href="http://baysidesuperior.org/faq">FAQ's</a></li>

<li><a href="http://baysidesuperior.org/staff">Meet the Team</a></li>

</ul>

<p><a class="style1" href="http://baysidesuperior.org/media">Media</a></p>

<ul>
<li><a href="javascript:pictures()">Pictures</a></li>
<li><a href="http://baysidesuperior.org/media">Weekly Sermons</a></li>
<li><a href="http://baysidesuperior.org/podcast">Podcasts</a></li>

</ul>

</div>

If you need any css code or anything just ask.

Thanks

Chris Hick
11-05-2010, 11:51 PM
This can’t get any simpler. Just make a valid nested unordered list with a root id of “navmenu-h” (for horizontal) or “navmenu-v” (for vertical) and you are all set. The CSS and JavaScript rely on the names “navmenu-h” or “navmenu-v”. Here’s an example of a valid nested unordered list:



<ul id="navmenu-h">
<li><a href="#">Root nav item</a>
<ul>
<li><a href="#">Sub nav item</a></li>
</ul>
</li>
</ul>



here is a css example code:



ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative; }

ul#navmenu-h ul {
width: 160px; /* Sub Menu Width */
margin: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
}

ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }

ul#navmenu-h li { float: left; display: inline; position: relative; }
ul#navmenu-h ul li { width: 100%; display: block; }

/* Root Menu */
ul#navmenu-h a {
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 6px;
float: left;
display: block;
background: #DDD;
color: #666;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 1%;
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
background: #BBB;
color: #FFF;
}

/* 2nd Menu */
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a {
float: none;
background: #BBB;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a {
background: #999;
}

/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a {
background: #999;
}

/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a {
background: #666;
}

/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a {
background: #666;
}

/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
background: #333;
}

/* Hover Function - Do Not Move */
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; }
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }



Here is the javascript for IE



$(document).ready(function(){
$("#navmenu-h li,#navmenu-v li").hover(
function() { $(this).addClass("iehover"); },
function() { $(this).removeClass("iehover"); }
);
});



Call it like this:



<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<!--[if gte IE 5.5]>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
$("#navmenu-h li,#navmenu-v li").hover(
function() { $(this).addClass("iehover"); },
function() { $(this).removeClass("iehover"); }
);});
</script>
<![endif]-->


Edit this to yours.

rickfink
11-06-2010, 10:52 PM
Thanks, I've gotten this far:

http://www.baysidesuperior.org/test2

But how do I get the second level to go horizontal? Tried a lot of float: left stuff and adjusting widths, but still cant get it.

Also, how do make the drop down stay visible for a few seconds after the mouse gets off it?






ul#navmenu-h {
list-style: none;
position: relative;
width: 790px;
top: 14px;
}

ul#navmenu-h ul {
width: auto; /* Sub Menu Width */
margin: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
float: left;
}

ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }
ul#navmenu-h li { float: left; display: inline; position: relative; }
ul#navmenu-h ul li { width: 100%; display: block;}

/* Root Menu */
ul#navmenu-h a {
float: left;
display: block;
background: #797066;
color: #EEEDDD;
font: bold 11px Arial, sans-serif;
text-decoration: none;
width: 88px;
vertical-align: middle;
text-align: center;
margin-right: 1px;
padding-top: 7px;
padding-right: 11px;
padding-bottom: 8px;
padding-left: 11px;
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
background: #9c9084;
}

/* 2nd Menu */
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a {
float: left;
background: none;
color: #525252;
font-size: 11px;
font-weight: normal;

padding-top: 3px;
padding-right: 11px;
padding-left: 11px;
background-image: url(images/menusep.png);
background-position: right bottom;
background-repeat: no-repeat;
height: 22px;
width: auto;

}

/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a {
color: #924a2e;
}

/* Hover Function - Do Not Move */
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; }
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }

Chris Hick
11-07-2010, 01:53 AM
How about giving me your list, Mr. Fink?

Btw, take out the background: none; in your second nav.. so that your second nav can be seen.

Edit:

Nevermind, I got your list.

Chris Hick
11-07-2010, 02:52 AM
Ok, here you go, Mr. Fink. I changed things up a bit. You can edit however you like.

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="menu.css" />

</head>

<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});

});
</script>


<ul id="topnav">
<li><a href="http://baysidesuperior.org">Home</a>
<span>
<a href="http://baysidesuperior.org/men">Men </a>
<a href="http://baysidesuperior.org/women">Women </a>
<a href="http://baysidesuperior.org/children">Children </a>

<a href="http://baysidesuperior.org/students">Students </a>
<a href="http://baysidesuperior.org/youngadults">Young Adults </a>
<a href="http://baysidesuperior.org/senioradults">Senior Adults</a>
<a href="http://baysidesuperior.org/lifegroups">Life Groups </a>
<a href="http://baysidesuperior.org/divorcecare">Divorce Care </a>
<a href="http://baysidesuperior.org/missions">Missions </a>
</span>
</li>

<li><a href="http://baysidesuperior.org">Ministries</a>
<span>
<a href="http://baysidesuperior.org/men">Men</a>
<a href="http://baysidesuperior.org/women">Women</a>
<a href="http://baysidesuperior.org/children">Children</a>

<a href="http://baysidesuperior.org/students">Students</a>
<a href="http://baysidesuperior.org/youngadults">Young Adults</a>
<a href="http://baysidesuperior.org/senioradults">Senior Adults</a>
<a href="http://baysidesuperior.org/lifegroups">Life Groups</a>
<a href="http://baysidesuperior.org/divorcecare">Divorce Care</a>
<a href="http://baysidesuperior.org/missions">Missions</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">Events</a>
<span>
<a href="http://baysidesuperior.org/men">Men</a>
<a href="http://baysidesuperior.org/women">Women</a>
<a href="http://baysidesuperior.org/children">Children</a>

<a href="http://baysidesuperior.org/students">Students</a>
<a href="http://baysidesuperior.org/youngadults">Young Adults</a>
<a href="http://baysidesuperior.org/senioradults">Senior Adults</a>
<a href="http://baysidesuperior.org/lifegroups">Life Groups</a>
<a href="http://baysidesuperior.org/divorcecare">Divorce Care</a>
<a href="http://baysidesuperior.org/missions">Missions</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">Connect</a>
<span>
<a href="http://baysidesuperior.org/men">Men</a>
<a href="http://baysidesuperior.org/women">Women</a>
<a href="http://baysidesuperior.org/children">Children</a>
<a href="http://baysidesuperior.org/students">Students</a>

<a href="http://baysidesuperior.org/youngadults">Young Adults</a>
<a href="http://baysidesuperior.org/senioradults">Senior Adults</a>
<a href="http://baysidesuperior.org/lifegroups">Life Groups</a>
<a href="http://baysidesuperior.org/divorcecare">Divorce Care</a>
<a href="http://baysidesuperior.org/missions">Missions</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">About Us</a>
<span>
<a href="http://baysidesuperior.org/men">Men</a>
<a href="http://baysidesuperior.org/women">Women</a>
<a href="http://baysidesuperior.org/children">Children</a>
<a href="http://baysidesuperior.org/students">Students</a>

<a href="http://baysidesuperior.org/youngadults">Young Adults</a>
<a href="http://baysidesuperior.org/senioradults">Senior Adults</a>
<a href="http://baysidesuperior.org/lifegroups">Life Groups</a>
<a href="http://baysidesuperior.org/divorcecare">Divorce Care</a>
<a href="http://baysidesuperior.org/missions">Missions</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">Media</a>
<span>
<a href="http://baysidesuperior.org/men">Men</a>
<a href="http://baysidesuperior.org/women">Women</a>
<a href="http://baysidesuperior.org/children">Children</a>
<a href="http://baysidesuperior.org/students">Students</a>

<a href="http://baysidesuperior.org/youngadults">Young Adults</a>
<a href="http://baysidesuperior.org/senioradults">Senior Adults</a>
<a href="http://baysidesuperior.org/lifegroups">Life Groups</a>
<a href="http://baysidesuperior.org/divorcecare">Divorce Care</a>
<a href="http://baysidesuperior.org/missions">Missions</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">Contact Us</a>
<span>
<a href="http://baysidesuperior.org/men">Men</a>
<a href="http://baysidesuperior.org/women">Women</a>
<a href="http://baysidesuperior.org/children">Children</a>
<a href="http://baysidesuperior.org/students">Students</a>

<a href="http://baysidesuperior.org/youngadults">Young Adults</a>
<a href="http://baysidesuperior.org/senioradults">Senior Adults</a>
<a href="http://baysidesuperior.org/lifegroups">Life Groups</a>
<a href="http://baysidesuperior.org/divorcecare">Divorce Care</a>
<a href="http://baysidesuperior.org/missions">Missions</a>
</span>

</li>
</ul>
</body>

</html>



CSS:


/* CSS Document */
ul#topnav {
margin : 0;
padding : 0;
float : left;
width : 1000px;
list-style : none;
position : relative;
font-size : 1.2em;
background : #797066;
color : #eeeddd;
}
ul#topnav li {
float : left;
margin : 0;
padding : 0;
border-right : 1px solid #555;
}
ul#topnav li a {
padding : 10px 15px;
display : block;
color : #f0f0f0;
text-decoration : none;
}
ul#topnav li:hover {
background : #9c9084;
}
ul#topnav li span {
float : left;
padding : 15px 0;
position : absolute;
left : 0;
top : 35px;
display : none;
width : 1000px;
background : #924a2e;
color : #525252;
}
ul#topnav li:hover span {
display : block;
}
ul#topnav li span a {
display : inline;
}
ul#topnav li span a:hover {
text-decoration : underline;
}

rickfink
11-09-2010, 06:30 AM
Ok, I've got it formatted the way I like, but how would I set it up so that when I move my mouse out of the links, it doesn't go away?

Also, I've tried using this code you gave me:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});

});
</script>

And site doesn't do anything different with it in or out.

http://www.baysidesuperior.org/test2

Thanks for the help btw.

Chris Hick
11-09-2010, 06:45 AM
You're welcome, Mr. Fink..

So you are wanting to the second nav stay even after you stop hovering?

The script allows it to be compatible in all major browsers.

rickfink
11-09-2010, 09:11 PM
Yeah, I would like it to stay on the tab that the mouse was last on after it is not hovering.

johnbarett
11-10-2010, 05:02 PM
Thanks that was helpful

rickfink
11-11-2010, 09:42 PM
Still can't come up with anything, any thoughts? :/

slappyjaw
11-12-2010, 09:34 PM
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
$(this).find("span").show(); //Show the subnav
});

});
</script>
Try this instead. The other function that was below it was causing it to hide when you left the link, as long as that function was the on hover out function. If it doesn't work please report back. :)

rickfink
11-12-2010, 09:49 PM
Unfortunately it didn't work, am I missing something? lol.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Bayside Baptist Church - Superior, WI</title>

<!-- Meta Tags -->
<meta name="description" content="Bayside is here to help people of all ages experience the fullness of life that God has made available through a personal relationship with Jesus Christ. We gather in faith, serve in love, and proclaim hope as we love God and love people."/>
<meta name="robots" content="index, follow" />
<meta name="keywords" content="bayside, superior baptist, superior, superior wi, baptist, bayside baptist church, bayside church, superior churches, superior church, mark pavola, thomas bush, superior wi church, faith, bible, prayer, worship, christianity, jesus, christ, bayside baptist, superior church, superior churches" />
<meta name="author" content="Shane McCotter" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="verify-v1" content="93+a2mh1+2TNtHyrUOCK1xz+BD3t543RbvNigVttbNo=" />

<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="http://baysidesuperior.org/images/bible.ico"/>

<!-- CSS -->
<link rel="stylesheet" href="style2.css" type="text/css" charset="utf-8" />
<style type="text/css">

<!--

.style2 {
color: #924a2e;
font-size: 17px;
font-weight: normal;
}

.style6 {
font-size: 11px
}

.style7 {
font-size: 12px;
}

.style9 {color: #D88624; }

.style10 {
font-size: 17px;
color: #D88624;
}

-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
$(this).find("span").show(); //Show the subnav
});

});
</script>

<script type="text/javascript" src="Scripts/swfobject.js"></script>
<script type="text/javascript" src="Scripts/script.js"></script>
<script type="text/javascript" src="Scripts/actions.js"></script>
<script type="text/javascript" src="Scripts/AC_RunActiveContent.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.js"></script>
<script type="text/javascript" src="Scripts/jquery.js"></script>

<script type="text/javascript">

$(function() {


$('#slideshow1').cycle({
prev: '#prev',
next: '#next',
});

function onBefore() {

$('#title').html(this.alt);

}

});

</script>
</head>
<body>




<div id="wrapper"><div id="padding">
<div id="header">
<div id="logo">
<h1><a href="http://baysidesuperior.org"><img src="http://baysidesuperior.org/images/logo.png" alt="Bayside Baptist Church" border="0" width="220" height="29"></a></h1>
</div>
<div id="logo2">
<h1><a href="http://baysidesuperior.org/sunday">Services</a> | <a href="http://baysidesuperior.org/giving">Online Giving</a></h1>
</div>
<div id="nav">

<ul id="topnav">
<li><a href="http://baysidesuperior.org">Home</a></li>

<li><a href="http://baysidesuperior.org">Ministries</a>
<span>
<a href="http://baysidesuperior.org/men">Men</a>
<a href="http://baysidesuperior.org/women">Women</a>
<a href="http://baysidesuperior.org/children">Children</a>
<a href="http://baysidesuperior.org/students">Students</a>
<a href="http://baysidesuperior.org/youngadults">Young Adults</a>
<a href="http://baysidesuperior.org/senioradults">Senior Adults</a>
<a href="http://baysidesuperior.org/lifegroups">Life Groups</a>
<a href="http://baysidesuperior.org/divorcecare">Divorce Care</a>
<a href="http://baysidesuperior.org/missions">Missions</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">Events</a>
<span>
<a href="http://baysidesuperior.org/documents/calendar/calendar.pdf">November Calendar</a>
<a href="http://baysidesuperior.org/documents/calendar/currentworkers.pdf">November Workers' Schedule</a>
<a href="http://baysidesuperior.org/documents/calendar/e-letter.pdf">E-Letter</a>
<a href="documents/eventform.pdf">Event Planning Form</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">Connect</a>
<span>
<a href="http://baysidesuperior.org/connect#prayer">Prayer</a>
<a href="http://baysidesuperior.org/connect#worship">Worship Team</a>
<a href="http://baysidesuperior.org/connect#greeting">Greeting</a>
<a href="http://baysidesuperior.org/connect#martha">Martha Ministry</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">About Us</a>
<span>
<a href="http://baysidesuperior.org/believe">What We Believe</a>
<a href="http://baysidesuperior.org/story">Our Story</a>
<a href="http://baysidesuperior.org/sunday">Services</a>
<a href="http://baysidesuperior.org/staff">Meet the Team</a>
<a href="http://baysidesuperior.org/faq">FAQ's</a>
<a href="http://baysidesuperior.org/documents/Constitution.pdf">Our Constitution</a>
<a href="http://baysidesuperior.org/journey">Journey of Faith</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">Media</a>
<span>
<a href="http://baysidesuperior.org/media">Sunday Sermons</a>
<a href="javascript:pictures()">Pictures</a>
<a href="http://baysidesuperior.org/podcast">Podcasts</a>
<a href="http://baysidesuperior.org/video">Video Library</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">Contact Us</a>
<span>
<a href="http://baysidesuperior.org/contact">The Office</a>
<a href="http://baysidesuperior.org/staff">The Team</a>
<a href="http://www.mapquest.com/maps?city=Superior&amp;state=WI&amp;address=3915+N+16th+St&amp;zipcode=54880">Directions</a>
<a href="http://www.facebook.com/group.php?gid=76929182727">Facebook</a>
<a href="http://baysidesuperior.org/contact#contact">Prayer Requests</a>
<a href="documents/eventform.pdf">Event Planning Form</a>
<a href="javascript:popup()">Invite a Friend</a>
<a href="http://baysidesuperior.org/giving">Online Giving</a>
</span>

</li>
</ul>

<div style="clear:both"></div>
<div style="clear:both"></div>
</div>
</div>


CSS:


ul#topnav {
float : left;
width : 777px;
list-style : none;
position : relative;
color : #EEEDDD;
background-color: #797066;
margin-top: 13px;
}
ul#topnav li {
float : left;
margin : 0;
padding : 0;
border-right : 1px solid #555;
}
ul#topnav li a {
display : block;
color : #EEEDDD;
text-decoration : none;
font-size : 11px;
font-weight: bold;
font-family: Arial;
width: 90px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 8px;
padding-left: 10px;
text-align: center;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #847c73;

}
ul#topnav li:hover {
background : #9c9084;
}
ul#topnav li span {
float : left;
padding : 15px 0;
position : absolute;
left : 0;
top : 26px;
display : none;
width : auto;
background : none;
color : #525252;
}
ul#topnav li:hover span {
display : block;
}
ul#topnav li span a {
display : inline;
color: #525252;
border-top-style: none;
background-image: url(images/menusep.png);
background-position: right bottom;
background-repeat: no-repeat;
font-size: 11px;
font-weight: normal;
}
ul#topnav li span a:hover {
color: #924a2e;
}

Chris Hick
11-12-2010, 11:16 PM
Mr. Fink , I tried what Mr. Slappy showed two days ago with no success.. I've been working with some jquery to figure out a solution that will get it to stay. I'm at work and the only thing I haven't tried yet is this.




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
$(document).ready(function() {

$("ul#topnav li").hover({ //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
$(this).find("span").show(); //Show the subnav
});

});
</script>



I'm working on it as much as possible. I will come up with a solution, don't worry about that ^_^.

slappyjaw
11-13-2010, 04:00 AM
Ive got it working now there where a few errors. here is the css and the html for you, The problem was your css:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Bayside Baptist Church - Superior, WI</title>
<!-- Meta Tags -->
<meta name="description" content="Bayside is here to help people of all ages experience the fullness of life that God has made available through a personal relationship with Jesus Christ. We gather in faith, serve in love, and proclaim hope as we love God and love people."/>
<meta name="robots" content="index, follow" />
<meta name="keywords" content="bayside, superior baptist, superior, superior wi, baptist, bayside baptist church, bayside church, superior churches, superior church, mark pavola, thomas bush, superior wi church, faith, bible, prayer, worship, christianity, jesus, christ, bayside baptist, superior church, superior churches" />
<meta name="author" content="Shane McCotter" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="verify-v1" content="93+a2mh1+2TNtHyrUOCK1xz+BD3t543RbvNigVttbNo=" />

<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="http://baysidesuperior.org/images/bible.ico"/>

<!-- CSS -->
<link rel="stylesheet" href="http://baysidesuperior.org/style2.css" type="text/css" charset="utf-8" />

<style type="text/css">

<!--

.style2 {
color: #924a2e;
font-size: 17px;
font-weight: normal;
}

.style6 {
font-size: 11px
}

.style7 {
font-size: 12px;
}

.style9 {color: #D88624; }

.style10 {
font-size: 17px;
color: #D88624;
}


-->
</style>


<script type="text/javascript" src="http://baysidesuperior.org/Scripts/swfobject.js"></script>
<script type="text/javascript" src="http://baysidesuperior.org/Scripts/script.js"></script>
<script type="text/javascript" src="http://baysidesuperior.org/Scripts/actions.js"></script>
<script type="text/javascript" src="http://baysidesuperior.org/Scripts/AC_RunActiveContent.js"></script>
<script type="text/javascript" src="http://baysidesuperior.org/Scripts/jquery-1.js"></script>
<script type="text/javascript" src="http://baysidesuperior.org/Scripts/jquery.js"></script>

<script type="text/javascript">
//This is the new nav script.
$(document).ready(function() {
$("ul#topnav li").hover(function(){ //Hover over event on list item
$("ul#topnav li").each(function(){
$(this).css({'background' : '#797066 url(http://baysidesuperior.org/images/topnav_active.gif) repeat-x'});
if($(this).find("span").show()){
$(this).find("span").hide();
}
});
$(this).css({'background' : '#9C9084 url(http://baysidesuperior.org/images/topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
$(this).find("span").show(); //Show the subnav
});
});
</script>
<script type="text/javascript">

$(function() {


$('#slideshow1').cycle({
prev: '#prev',
next: '#next',
});

function onBefore() {

$('#title').html(this.alt);

}

});

</script>
</head>
<body>




<div id="wrapper"><div id="padding">
<div id="header">
<div id="logo">
<h1><a href="http://baysidesuperior.org"><img src="http://baysidesuperior.org/images/logo.png" alt="Bayside Baptist Church" border="0" width="220" height="29"></a></h1>
</div>
<div id="logo2">
<h1><a href="http://baysidesuperior.org/sunday">Services</a> | <a href="http://baysidesuperior.org/giving">Online Giving</a></h1>
</div>
<div id="nav">

<ul id="topnav">
<li><a href="http://baysidesuperior.org">Home</a></li>

<li><a href="http://baysidesuperior.org">Ministries</a>
<span>
<a href="http://baysidesuperior.org/men">Men</a>
<a href="http://baysidesuperior.org/women">Women</a>
<a href="http://baysidesuperior.org/children">Children</a>
<a href="http://baysidesuperior.org/students">Students</a>
<a href="http://baysidesuperior.org/youngadults">Young Adults</a>
<a href="http://baysidesuperior.org/senioradults">Senior Adults</a>
<a href="http://baysidesuperior.org/lifegroups">Life Groups</a>
<a href="http://baysidesuperior.org/divorcecare">Divorce Care</a>
<a href="http://baysidesuperior.org/missions">Missions</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">Events</a>
<span>
<a href="http://baysidesuperior.org/documents/calendar/calendar.pdf">November Calendar</a>
<a href="http://baysidesuperior.org/documents/calendar/currentworkers.pdf">November Workers' Schedule</a>
<a href="http://baysidesuperior.org/documents/calendar/e-letter.pdf">E-Letter</a>
<a href="documents/eventform.pdf">Event Planning Form</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">Connect</a>
<span>
<a href="http://baysidesuperior.org/connect#prayer">Prayer</a>
<a href="http://baysidesuperior.org/connect#worship">Worship Team</a>
<a href="http://baysidesuperior.org/connect#greeting">Greeting</a>
<a href="http://baysidesuperior.org/connect#martha">Martha Ministry</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">About Us</a>
<span>
<a href="http://baysidesuperior.org/believe">What We Believe</a>
<a href="http://baysidesuperior.org/story">Our Story</a>
<a href="http://baysidesuperior.org/sunday">Services</a>
<a href="http://baysidesuperior.org/staff">Meet the Team</a>
<a href="http://baysidesuperior.org/faq">FAQ's</a>
<a href="http://baysidesuperior.org/documents/Constitution.pdf">Our Constitution</a>
<a href="http://baysidesuperior.org/journey">Journey of Faith</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">Media</a>
<span>
<a href="http://baysidesuperior.org/media">Sunday Sermons</a>
<a href="javascript:pictures()">Pictures</a>
<a href="http://baysidesuperior.org/podcast">Podcasts</a>
<a href="http://baysidesuperior.org/video">Video Library</a>
</span>

</li>
<li><a href="http://baysidesuperior.org">Contact Us</a>
<span>
<a href="http://baysidesuperior.org/contact">The Office</a>
<a href="http://baysidesuperior.org/staff">The Team</a>
<a href="http://www.mapquest.com/maps?city=Superior&amp;state=WI&amp;address=3915+N+16th+St&amp;zipcode=54880">Directions</a>
<a href="http://www.facebook.com/group.php?gid=76929182727">Facebook</a>
<a href="http://baysidesuperior.org/contact#contact">Prayer Requests</a>
<a href="documents/eventform.pdf">Event Planning Form</a>
<a href="javascript:popup()">Invite a Friend</a>
<a href="http://baysidesuperior.org/giving">Online Giving</a>
</span>

</li>
</ul>

<div style="clear:both"></div>
<div style="clear:both"></div>
</div>
</div>

<div id="headline">
<div class="photo-nav">
<a id="prev" href="#">PREV</a> | <a id="next" href="#">NEXT</a>
</div>

<div id="slideshow1" class="photo">
<a href="javascript:challenge()"><img style="z-index: 6;" src="images/slideshow/60day.jpg" width="550" height="226" alt=""/></a>
<a href="http://baysidesuperior.org/Sermons/series/jesus"><img style="z-index: 5;" src="images/slideshow/whoisthisjesus.jpg" width="550" height="226" alt=""/></a>
<a href="http://baysidesuperior.org/events#E1"><img style="z-index: 4;" src="images/slideshow/lakeeffects.jpg" width="550" height="226" alt=""/></a>
<a href="http://www.facebook.com/group.php?gid=76929182727"><img style="z-index: 3;" src="images/slideshow/facebook.jpg" width="550" height="226" alt=""/></a>
<a href="contact#contact"><img style="z-index: 2;" src="images/slideshow/prayer.jpg" width="550" height="226" alt=""/></a>
<a href="giving"><img style="z-index: 1;" src="images/slideshow/give.jpg" width="550" height="226" alt=""/></a>



</div>



<div id="search-news">

<h2 class="downcast">Weekly Sermons</h2>

<div id="sermons">
<p><a href="javascript:oct3110()">Oct 31 | A Mission-Minded Man</a></p>
<p><a href="javascript:oct2410()">Oct 24 | Our Ultimate Purpose in Life</a></p>
<p><a href="javascript:oct1710()">Oct 17 | Water Into Wine</a></p>

<p class="more"><a href="media">more</a></p>

</div>

<h2 class="downcast">Upcoming Events</h2>

<div id="news">
<ul>
<li>Nov 07 <a href="events#E1">Lake Effects Concert</a></li>
<li>Nov 12 <a href="events#E2">Men's Breakfast</a></li>
<li>Nov 20 <a href="events#E3">Bayside's Bountiful Boutique</a></li>
</ul>

</div>
</div>

<div class="clear"></div>

</div>

<div id="body">
<div id="body-left">
<a href="http://www.baysidesuperior.org/Sermons/2010/force-download.php?file=10.31.10-Who_Is_This_Jesus-A_Mission-Minded_Man.mp3"><img src="images/download.gif" alt="" class="right" /></a><a href="javascript:oct3110()"><img src="images/listen.gif" alt="" class="right" /></a>
<h2 class="style2">Latest Sermon</h2>
<h1 class="style12">Who Is this Jesus: A Mission-Minded Man</h1>
<p class="style7">October 31, 2010 | Pastor Mark Pavola</p>
</div>

<div id="body-right">
<h2 class="style2">Bayside Podcasts</h2>
<p>Receive our audio message automatically!</p>
<p><a href="itpc://www.baysidesuperior.org/podcasts/sundaysermon.xml">Suscribe</a> | <a href="podcast">Learn More</a></p>
</div>


<div class="clear"></div>
<img src="images/sep.gif" alt="" class="right" />


<div id="body-leftbottom">
<h2 class="style2">Sunday Worship</h2>
<p class="style7">Our <a href="sunday">worship service</a> combines contemporary worship music and traditional hymns with a relevant message from Scripture that has real life-changing application to provide a complete worship experience. We would enjoy having you join us on a regular basis as we seek to encourage one another to live out the truths of the Bible in our daily lives. Come as you are, you are always welcome! </p>

</div>
<div id="body-rightbottom"><a href="contact#contact"><img src="images/banners/prayer.gif" alt="" class="pic" /></a><a href="lifegroups"><img src="images/banners/life.gif" alt="" class="pic" /></a></div>

<div class="clear">
<p>&nbsp;</p>
</div>

</div>
</div>
</div>

<div id="footer">
<div id="wrapper2">

<div class="footer-content">

<p><a class="style1" href="http://baysidesuperior.org">Home</a></p>

<p><a class="style1" href="http://baysidesuperior.org/story">About Us</a></p>

<ul>

<li><a href="http://baysidesuperior.org/story">Our Story</a></li>

<li><a href="http://baysidesuperior.org/sunday">Services</a></li>

<li><a href="http://baysidesuperior.org/faq">FAQ's</a></li>

<li><a href="http://baysidesuperior.org/staff">Meet the Team</a></li>

</ul>

<p><a class="style1" href="http://baysidesuperior.org/media">Media</a></p>

<ul>
<li><a href="javascript:pictures()">Pictures</a></li>
<li><a href="http://baysidesuperior.org/media">Weekly Sermons</a></li>
<li><a href="http://baysidesuperior.org/podcast">Podcasts</a></li>

</ul>

</div>



<div class="footer-content">
<p><a class="style1" href="http://baysidesuperior.org/ministries">Ministries</a></p>
<ul>
<li><a href="http://baysidesuperior.org/men">Men</a></li>
<li><a href="http://baysidesuperior.org/women">Women</a></li>
<li><a href="http://baysidesuperior.org/children">Children</a></li>
<li><a href="http://baysidesuperior.org/youngadults">Young Adults</a></li>
<li><a href="http://baysidesuperior.org/senioradults">Senior Adults</a></li>
</ul>

<p><a class="style1" href="http://baysidesuperior.org/events">Events</a></p>
<ul>
<li><a href="http://baysidesuperior.org/events">Upcoming</a></li>
<li><a href="http://baysidesuperior.org/documents/calendar/calendar.pdf">PDF Calendar</a></li>
<li><a href="http://baysidesuperior.org/documents/calendar/e-letter.pdf">PDF E-Letter</a></li>

</ul>
</div>



<div class="footer-content">


<p><a class="style1" href="http://baysidesuperior.org/connect">Connect</a></p>

<ul>

<li><a href="http://baysidesuperior.org/connect#prayer">Prayer</a></li>

<li><a href="http://baysidesuperior.org/connect#worship">Worship Team</a></li>

<li><a href="http://baysidesuperior.org/connect#greeting">Greeting</a></li>

<li><a href="http://baysidesuperior.org/connect#martha">Martha Ministry</a></li>

</ul>

<p><a class="style1" href="http://baysidesuperior.org/students">Students</a></p>
<ul>
<li><a href="http://www.baysideyouthgroup.blogspot.com/">Youth Blog</a></li>
</ul>
<p><a class="style1" href="http://baysidesuperior.org/contact#contact">Prayer Requests</a></p>
<p><a class="style1" href="http://baysidesuperior.org/giving">Online Giving</a></p>
</div>



<div class="footer-contact">

<h1>Bayside Baptist Church</h1>

<p>3915 N 16th Street<br />

Superior, WI 54880<br />

(715) 394-6002</p>

<p>&nbsp;</p>

<h2><a href="http://baysidesuperior.org/contact">Contact Us</a> | <a href="http://www.mapquest.com/maps?city=Superior&amp;state=WI&amp;address=3915+N+16th+St&amp;zipcode=54880">Directions</a></h2>

</div>
</div>
</div>
</body>
</html>

slappyjaw
11-13-2010, 04:40 AM
And here is the css:

/* html, body, wrapper
==============================================================================*/

html, body, ul, li {
margin: 0;
padding: 0;
list-style: none;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: #f9f8f2;
}

body, h1, h2, h3, form {
margin: 0;
padding: 0;
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
color: #525252;
font-weight: normal;
}

body {
text-align: center;
background-repeat: repeat-x;
background-image: url(http://baysidesuperior.org/images/header_bg.jpg);
}

#body {
padding-top: 2em;
text-align: justify;
}

#body-right {
width: 190px;
float: right;
padding-top: 4px;
padding-right: 7px;
padding-bottom: 4px;
padding-left: 7px;
height: 62px;
background-color: #EAE8D3;
border: 1px solid #cccbb9;

}

#body-right a {
color: #2388ff;
text-decoration: none;
outline: none;
}

#body-left {
width: 515px;
float: left;
background-color: #EAE8D3;
padding-top: 4px;
padding-right: 28px;
padding-bottom: 4px;
padding-left: 12px;
height: 62px;
border: 1px solid #cccbb9;
}


#body-right ul.plussbullets {
margin-top: 20px;
margin-left: 150px;
padding: 0;
font-weight: bold;
}

#body-right ul.plussbullets li {
background: top left url(http://baysidesuperior.org/images/bullet_plus.gif) no-repeat;
margin: 0 0 10px 0;
padding: 0 0 0 25px;
}

#body-leftbottom {
width: 543px;
float: left;
height: auto;
margin-top: 10px;
padding-top: 3px;
padding-right: 7px;
padding-bottom: 3px;
padding-left: 7px;
}

#body-leftbottom a {
color: #2388ff;
text-decoration: none;
outline: none;
}

#body-rightbottom {
width: 202px;
float: right;
height: 110px;
margin-top: 10px;
background-repeat: no-repeat;
border: 1px solid #CFD0CC;
padding-top: 1px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
}

#body-rightbottom img {
float: right;
padding-top: 1px;

}

#body h2, #body p {
margin-right: 0;
margin-bottom: 0.3em;
margin-left: 0;
margin-top: 0em;

}

#body-left p {
margin-right: 2em;
}

#wrapper {
margin: auto;
display: block;
padding-right: 15px;
padding-left: 15px;
min-height: 100%;
height: auto !important;
height: 100%;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #63665F;
width: 774px;
text-align: left;

}

/* img, a, classes
==============================================================================*/
img{border:none}

a {
font-weight: bold;
text-decoration: none;
color: #5C5C5C;
outline: none;
}

.more {
text-align: right;
padding-right: 5px;
padding-left: 5px;
}

.more a {
color: #5C5C5C;
text-decoration: none;
outline: none;
}

.left {
float: left;
margin-right: 10px;
margin-bottom: 5px;
margin-top: 4px;
}

.right {
float: right;
padding-right: 0px;
padding-top: 18px;
}

.clear {
clear: both;
}

.contact {
float: left;
margin-right: 30px;
margin-bottom: 5px;
margin-top: 4px;
}


/* styles
==============================================================================*/
.style10 {font-size: 18px; color: #D88624; }

.alert {
font-size: 18px;
color: #C00;
font-weight: normal;
}

.style2 {
color: #D88624;
font-size: 19px;
}

.style6 {
font-size: 11px
}

.style7 {
font-size: 11px
}

.style9 {color: #D88624; }

.style12 {
font-size:13px;
font-weight: bold;
padding-bottom: 3px;
}


/* headers
==============================================================================*/

#padding { padding: 0 0 220px 0; }

#header {
height: 155px;
width: 785px;
float: left;
position: absolute;
z-index: 51;
}

#header h1 {
margin-top: 44px;
font-family: "Futura Md BT";
font-size:18px;
color: #e1e1c8;
}

#header h1 img {
display: block;
}

#logo {
display: block;
}

#logo h1, #logo h2 {
float: left;
margin: 0;
padding: 0 0 0 10px;
line-height: normal;
}



#logo h1 {
font-family: "Century Gothic";
font-size:19px;
font-style: normal;
color: #FFF;
padding-top: 27px;
padding-left: 10px;
font-weight: normal;
text-transform: capitalize;
font-variant: normal;
}

#logo2 h1, #logo h2 {
float: left;
margin: 0;
padding: 0 0 0 10px;
line-height: normal;
}

#logo2 h1 {
font-family: "Century Gothic";
font-size:11px;
font-style: normal;
color: #fff;
font-weight: 600;
font-variant: normal;
padding-left: 300px;
background-image: url(http://baysidesuperior.org/images/drop.gif);
background-repeat: no-repeat;
background-position: 250px 6px;
height: 45px;
padding-right: 115px;
padding-top: 11px;
}

#logo2 a {
color: #D88624;
}

/* drop down menu
==============================================================================*/

#nav {
margin-top: 63px;
height: 45px;
width: 790px;
background-repeat: no-repeat;
background-position: left top;
}

#nav img {
float: left;
}

#sddm {
width: auto;
float: left;
margin-top: 14px;
}

#sddm li {
margin: 0;
padding: 0;
list-style: none;
float: left;
z-index: 10;
font: bold 11px arial;
}

#sddm li a {
width: 88.5px;
color: #EEEDDD;
text-align: center;
margin-right: 1px;
padding-top: 7px;
padding-right: 11px;
padding-bottom: 8px;
padding-left: 11px;
height: 13px;
background-color: #797066;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #847c73;
display: block;
position: relative;
}

#sddm li a:hover {
background-color: #9c9084;
}

#sddm div {
position: absolute;
visibility: hidden;
z-index: 50;
}

#sddm div a {
position: relative;
width: 9em;
text-align: left;
color: #ffffff;
font: 11px arial;
background-color: #5F5347;
margin-right: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;

}

#sddm div a:hover {
background-color: #797066;
}







/* CSS Document */
ul#topnav {
float : left;
width : 777px;
list-style : none;
position : relative;
color : #EEEDDD;
background-color: #797066;
margin-top: 13px;
}
ul#topnav li {
float : left;
margin : 0;
padding : 0;
border-right : 1px solid #555;
}
ul#topnav li a {
display : block;
color : #EEEDDD;
text-decoration : none;
font-size : 11px;
font-weight: bold;
font-family: Arial;
width: 90px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 8px;
padding-left: 10px;
text-align: center;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #847c73;

}
ul#topnav li span {
float : left;
padding : 15px 0;
position : absolute;
left : 0;
top : 26px;
display : none;
width : auto;
background : none;
color : #525252;
}
ul#topnav li span a {
display : inline;
color: #525252;
border-top-style: none;
background-image: url(http://baysidesuperior.org/images/menusep.png);
background-position: right bottom;
background-repeat: no-repeat;
font-size: 11px;
font-weight: normal;
}
.mininav li {
width: 88.5px;
color: #fff;
text-align: center;
margin-right: 1px;
padding-top: 7px;
padding-right: 11px;
padding-bottom: 8px;
padding-left: 11px;
height: 13px;
background-color: #fff;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #847c73;
display: block;
position: relative;
}

#headline {
padding-top: 155px;
z-index: 9;
}

#sep {

}

#sep li {
float: left;
padding-top: 9px;
padding-right: 11px;
background-image: url(http://baysidesuperior.org/images/menusep.png);
background-position: right bottom;
background-repeat: no-repeat;
height: 22px;
padding-left: 11px;
}

#sep li a {
font-size: 11px;
font-weight: normal;
color: #525252;
}

#sep li a:hover {
color: #924a2e;
}

.photo {
float: left;
width: 554px;
height: 230px;
overflow: hidden;
border: 1px solid #D8D8D8;
position: relative;
z-index: 0;
}

.photo img {
margin: 2px;
}

.photo-nav {
width: 545px;
height: 17px;
z-index: 8000;
position: fixed;
text-align: right;
top: 364px;
margin-left: 3px;
padding-top: 3px;
padding-right: 5px;
color: #949494;
}

.photo-nav a {
font-weight: bold;
text-decoration: none;
color: #949494;
outline: none;

}


/* content
==============================================================================*/

#content {
width: 500px;
float: left;
padding-left: 20px;
padding-right: 14px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
}

#content p {
font-size: 13px;
margin-top: 8px;
}

#content a {
color: #2388ff;
}

#content h2 {
font-size: 15px;
color: #924a2e;
font-weight: bold;
margin-top: 4px;
}

#content h2.style1 {
font-size: 13px;
font-weight: normal;
color: #5C5C5C;
}

#content img {

}

#content ul {
font-size: 12px;
line-height: 20px;
}

/* podcast
==============================================================================*/

#pod {
width: 442px;
float: left;
padding-left: 20px;
padding-right: 14px;
display: block;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
}

#pod p {
font-size: 13px;
}

#pod h1 {
font-size: 15px;
color: #658646;
font-weight: bold;
}

#pod h2 {
font-size: 20px;
color: #924a2e;
margin-top: 4px;
}

#pod a {
color: #2388ff;
font-weight: bold;
}

#column {
width: 220px;
height: auto;
float: left;
}

#column2 {
width: 150px;
height: auto;
float: left;
padding-left: 50px;
}

#calendar {
width: 765px;
float: left;
}

/* sidebars
==============================================================================*/

#search-news {
float: right;
width: 208px;
}

#search-news div {
margin: 0;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 0;
}

#search-news2 {
float: right;
width: 140px;
}

#search-news2 div {
margin: 0;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 0;
}

#search-news2 #q {
width: 140px;
border: 1px solid #859D31;
}

#search-news2 .downcast {
background: #E6E7E7;
border-top: 1px solid #CFD0D0;
padding: 3px 4px 4px 4px;
margin: 2px 0 0 0;
font-weight: bold;
}

#search-news2 h3 {
background: url(http://baysidesuperior.org/images/bullet_letter.gif) no-repeat;
padding-left: 15px;
font-weight: bold;
margin-right: 0;
margin-bottom: .5em;
margin-left: 0;
}

#search-news2 p {
padding-left: 15px;
padding-right: 2px;
margin-top: 0.1em;
margin-right: 0;
margin-bottom: 0.1em;
margin-left: 0;
font-size: 10px;
}

#search-news div ul { float: left; }

#search-news div li {
float: right;
border-bottom: 1px solid #e9e9e9;
width: 192px;
margin-top: 0;
margin-right: 0;
margin-bottom: 7px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 6px;
padding-left: 0px;
}

#search-news div li a {
font-weight: bold;
text-transform: none;
display: block;
margin-top: -12px;
margin-right: 0;
margin-bottom: 0;
margin-left: 44px;
}

#search-news #q {
width: 140px;
border: 1px solid #859D31;
}

#search-news .downcast {
background: #E6E7E7;
border-top: 1px solid #CFD0D0;
padding: 3px 4px 4px 4px;
margin: 2px 0 0 0;
font-weight: bold;
}

#search-news h3 {
background: url(http://baysidesuperior.org/images/bullet_letter.gif) no-repeat;
padding-left: 15px;
font-weight: bold;
margin-right: 0;
margin-bottom: .5em;
margin-left: 0;
}

#search-news p {
padding-left: 15px;
padding-right: 2px;
margin-top: 0.1em;
margin-right: 0;
margin-bottom: 0.1em;
margin-left: 0;
font-size: 10px;
}




#sidebar {
width: 188px;
float: left;
background-color: #EAE8D3;
margin-right: 20px;
border: 1px solid #cccbb9;
position: relative;
padding-top: 12px;
padding-right: 12px;
padding-bottom: 3px;
padding-left: 12px;
}

#sidebar li {
font-weight: bold;
color: #5C5C5C;
display: block;
width: auto;
margin-bottom: 2px;
margin-top: 2px;
padding-top: 3px;
padding-bottom: 3px;
background-repeat: no-repeat;
background-position: left center;
padding-left: 12px;
font-family: tahoma, arial, sans-serif;
font-size: 11px;
}

#sidebar h1 {
color: #924a2e;
font-size: 13px;
padding-bottom: 5px;
}

#sidebar .sermon h2 {
color: #6B6B6B;
font-size: 13px;
padding-bottom: 2px;
font-weight: bold;
}

#sidebar h3 {
color: #7C7C7C;
font-size: 10px;
padding-bottom: 5px;
}

#sidebar h1.events {
color: #525252;
font-size: 14px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D2D1C1;
}

#sidebar h1.media {
color: #924a2e;
font-size: 14px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D2D1C1;
padding-top: 10px;

}

#sidebar h1.media2 {
color: #924a2e;
font-size: 14px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D2D1C1;
}


#sidebar p {
float: left;
display: inline;
text-indent: -9999px;
}

#sidebar p a{
display: block;
height: 30px;
overflow: hidden;
text-decoration: none;
outline: none;
}

#sidebar p#download{
width: 94px;
height: 23px;
}

#sidebar p#listen{
width: 72px;
height: 23px;
}

#sidebar p#listen {
background-image: url(http://baysidesuperior.org/images/listen1.gif);
background-repeat: no-repeat;
background-position: left bottom;
}

#sidebar p#download {
background-image: url(http://baysidesuperior.org/images/download1.gif);
background-repeat: no-repeat;
background-position: left bottom;
}

#sidebar p#listen:hover{
background: url(http://baysidesuperior.org/images/listen2.gif);
background-repeat: no-repeat;
background-position: left bottom;
}

#sidebar p#download:hover{
background-image: url(http://baysidesuperior.org/images/download2.gif);
background-repeat: no-repeat;
background-position: left bottom;
}

.sermon {
height: 115px;
padding-left: 10px;
margin-bottom: 10px;
padding-top: 7px;
background-image: url(http://baysidesuperior.org/images/sermon-background.gif);
background-repeat: no-repeat;
background-position: left top;
}

#sidebar p#event {
background-image: url(http://baysidesuperior.org/images/calendar.png);
position: absolute;
left: 178px;
top: 136px;
height: 14px;
width: 14px;
}

#sidebar p a#calendar{
display: block;
height: 14px;
width: 14px;
overflow: hidden;
text-decoration: none;
outline: none;
}

#sidebar .eventbox {
padding-bottom: 6px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #d9d8ca;
}

#sidebar h5 {
color: #924a2e;
font-size: 11px;
font-weight: bold;
margin: 0;
padding-top: 6px;
padding-bottom: 2px;

}

#sidebar .eventbox a {
color: #924a2e;
}

#sidebar .eventbox h2 {
color: #797d7f;
font-size: 10px;
line-height: 13px;
padding-bottom: 2px;
font-weight: bold;
}

.listing {
color: #525252;
font-size: 10px;
}



/* staff bio
==============================================================================*/

.picture {
margin-bottom: 18px;
padding-bottom: 18px;
background-image: url(http://baysidesuperior.org/images/sep2.gif);
background-position: bottom;
background-repeat: no-repeat;
}


/* media
==============================================================================*/
#mcontent {
width: 442px;
float: left;
display: block;
padding-right: 14px;
padding-left: 20px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
}

#mcontent h1 {
font-size: 18px;
color: #555555;
margin-top: 20px;
margin-bottom: 5px;
}

#mcontent h2 {
font-size: 25px;
color: #924a2e;
margin-bottom: 5px;
}

#mcontent p {
font-size: 11px;
}

#mcontent a {
color: #2388ff;
font-weight: bold;
font-size: 12px;
}

.message {
position: relative;
padding: .25em 0;;
background-image: url(http://baysidesuperior.org/images/action_go.gif);
background-repeat: no-repeat;
background-position: 2px 8px;
border-top: 1px solid #ccc;
line-height: 16px;
color: #777777;
}

.message:hover {
background-color: #E7F4F4;
}

.message p {
margin-top: 4px;
margin-bottom: 4px;
padding-left: 25px;
}

.message ul li {
position: absolute;
margin: 0 !important;
width: 25px;
height: 24px;
text-indent: -5000px;
overflow: hidden;

}

.message ul li a {
display: block;
height: 18px;
position: relative;
width: 19px;
right: -3px;
top: 3px;
}

.message li.listen {
right: 52px;
background: url(http://www.baysidesuperior.org/images/play.gif) no-repeat;
top: 7px;
}

.message li.download {
right: 26px;
background: url(http://www.baysidesuperior.org/images/download_icon_big.gif) no-repeat;
top: 7px;
}

.message li.notes {
right: -1px;
background: url(http://www.baysidesuperior.org/images/pdf.gif) no-repeat;
top: 7px;
}


.video {
position: relative;
;
border-top: 1px solid #ccc;
line-height: 16px;
color: #777777;
height: 115px;
padding-top: 0.25em;
padding-right: 0;
padding-bottom: 0.25em;
padding-left: 0;
}

.video:hover {
background-color: #E7F4F4;
}

.video p {
margin-top: 4px;
margin-bottom: 4px;
padding-left: 2px;
}


/* paypal
==============================================================================*/

.give {
margin-top: 10px;
margin-right: 0;
margin-bottom: 20px;
margin-left: 30px;
}

.give form {
font-size: 13px;
font-weight: normal;
font-family: Tahoma, Geneva, sans-serif;
}

.paypal_submit {
display: inline;
margin: 0;
padding: 0;
margin-bottom: -1px;
}

/* footer
==============================================================================*/
#wrapper2 {
text-align: left;
margin: auto;
width: 774px;
display: block;
padding-right: 15px;
padding-left: 15px;
min-height: 100%;
height: auto !important;
height: 100%;
}

#footer {
height: 220px;
background-repeat: repeat-x;
bottom: 0px;
background-image: url(http://baysidesuperior.org/images/footer_bg2.gif);
margin: -220px 0 0 0;
display: block;
line-height: 17px;
}

#footer p {
margin: 0;
padding: 0;
}

#footer ul {
font-size: 11px;
font-weight: normal;
}

#footer li {
font-size: 11px;
font-weight: bold;
}

.footer-content {
width: 170px;
text-align: left;
color: #FFFFFF;
padding-top: 25px;
float: left;
font-size: 11px;
padding-left: 5px;
list-style-image: none;
}

.footer-content p {
color: #D88624;
}

.footer-content a {
color: #eae7d2;
font-weight: normal;
}

.footer-content a.style1 {
color: #D88624;
font-weight: bold;
}

.footer-contact {
width: 232px;
text-align: left;
color: #FFFFFF;
float: left;
font-size: 11px;
list-style-image: none;
border: 1px solid #FFFFFF;
margin-top: 35px;
font-weight: normal;
padding-top: 10px;
padding-left: 15px;
padding-bottom: 10px;
height: 120px;
background-color: #3e362f;
}

.footer-contact p {
color: #eae7d2;
}

.footer-contact a {
color: #60bffb;
font-weight: bold;
}

.footer-contact h1 {
color: #FFFFFF;
font-size: 12px;
}

.footer-contact h2 {
color: #FFF;
font-size: 10px;
}
Replace both of them here is a test that i did on my server http://www.slappyjaw.com/test.php

Chris Hick
11-13-2010, 04:47 AM
Goodjob, Slappy:thumbsup:

slappyjaw
11-13-2010, 04:47 AM
thanks, glad to help out. BTW i really like the style and layout of the site. looks great.

rickfink
11-13-2010, 06:05 AM
thanks, glad to help out. BTW i really like the style and layout of the site. looks great.

Thanks!

rickfink
11-13-2010, 08:04 AM
Got it all implemented, thanks, good job!

http://baysidesuperior.org

Chris Hick
11-14-2010, 06:14 PM
Don't forget to placed this as resolved, Mr. Fink. :thumbsup:

Steps:
edit opening post>go advanced>set the prefix before the title as resolved

rickfink
11-15-2010, 09:32 PM
Hey, where's the button to edit opening post??

(edit) on this reply, i see the edit button, but not on my other posts.

Chris Hick
11-15-2010, 09:37 PM
You should see the edit button on your very first post, Mr. Fink.

rickfink
11-15-2010, 09:57 PM
Lol it's not there, I see it on my last post, but that's it. I know where it is so I don't think I'm just not seeing it ha.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum