Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Nav-Bar style drop down

    Trying to make a drop down menu that resembles the suckerfish nav bar style drop down menu (http://users.tpg.com.au/j_birch/plug...rfish/#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.

    Code:
    <!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
    Last edited by rickfink; 11-04-2010 at 09:24 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    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:

    Code:
    <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:

    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

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

    Call it like this:

    Code:
    <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.

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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?





    Code:
    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; }

  • #4
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    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.
    Last edited by Chris Hick; 11-07-2010 at 02:46 AM.

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Ok, here you go, Mr. Fink. I changed things up a bit. You can edit however you like.

    HTML:
    Code:
    <!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:
    Code:
    /* 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;
    }
    Last edited by Chris Hick; 11-07-2010 at 02:55 AM.

  • #6
    New Coder
    Join Date
    Jan 2009
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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.

  • #7
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    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.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #8
    New Coder
    Join Date
    Jan 2009
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Yeah, I would like it to stay on the tab that the mouse was last on after it is not hovering.

  • #9
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks that was helpful

  • #10
    New Coder
    Join Date
    Jan 2009
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Still can't come up with anything, any thoughts? :/

  • #11
    Regular Coder slappyjaw's Avatar
    Join Date
    Mar 2009
    Location
    Wonderland!
    Posts
    146
    Thanks
    14
    Thanked 3 Times in 3 Posts
    Code:
    <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.

  • #12
    New Coder
    Join Date
    Jan 2009
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Unfortunately it didn't work, am I missing something? lol.

    HTML:
    Code:
    <!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:

    Code:
    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;
    }

  • #13
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    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.

    Code:
     
    <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 ^_^.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #14
    Regular Coder slappyjaw's Avatar
    Join Date
    Mar 2009
    Location
    Wonderland!
    Posts
    146
    Thanks
    14
    Thanked 3 Times in 3 Posts
    Ive got it working now there where a few errors. here is the css and the html for you, The problem was your css:
    Code:
    <!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>
    Last edited by slappyjaw; 11-13-2010 at 04:39 AM.

  • #15
    Regular Coder slappyjaw's Avatar
    Join Date
    Mar 2009
    Location
    Wonderland!
    Posts
    146
    Thanks
    14
    Thanked 3 Times in 3 Posts
    And here is the css:
    Code:
    /* 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

  • Users who have thanked slappyjaw for this post:

    rickfink (11-15-2010)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •