Wow slider seems to be affecting my navigation bar

sarb · December 15, 2012, 3:38am

Hi,

I just added a WOW slider to my web page. The slider works great. The problem is that my navigation on the left side is now broken on the page the slider appears. Can anyone tell me what might be causing this??? I will be glad to supply any code you need.

Also, I am using the free version of Wow Slider. Is there any way to remove the “wowslider.com” image in the lower right corner?

http://www.oaknoll.com/springstreet_photogallery.asp

Thanks,
Sarb

ralphm · December 15, 2012, 4:35am

Hi sarb. A common mistake is made when adding jQeury items to a page. Each jQuery plugin requires the jQuery library, and often, each time someone places the required code on the page, they add in a link to the jQuery library. This can mean that you have multiple links to the jQuery library on the page—which usually messes up jQeury on the page.

Your page has a link to the jQuery library near the top (presumably added for the Cycle plugin) so there’s no need for another link to the library here:

<!-- Start WOWSlider.com HEAD section -->
	<link rel="stylesheet" type="text/css" href="engine1/style.css" media="screen" />
	[COLOR="#FF0000"]<script type="text/javascript" src="engine1/jquery.js"></script>[/COLOR]
<!-- End WOWSlider.com HEAD section -->

There is another big problem on your page, though: at line 110, you have the doctype and head code all over again, which is sure to screw up your page big time in some browsers, if not all:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

So some serious tidying up is needed there.

sarb · December 15, 2012, 2:37pm

Thanks ralph.m for your help. I don’t work with jquery often, so didn’t realize multiple library’s would affect the code. Removing it worked like a charm.

What is strange though is the part about the doc type. I have pasted my code from my page on dreamweaver below. My code does not include two doc types, but when I look at the page source on the internet, I see exactly what you pointed out.

I do have an include that points to where the navigation menu is:

<!–#include virtual=“includes/header_asp.asp”–>

That seems to be the spot in my code where the 2nd doc type appears on the internet source code. Any idea why that might be happening?




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Oaknoll - An Adult Retirement Community</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords"
 content="oaknoll, iowa city, retirement, elderly, iowa, LifeCare, retirement community, nursing home, apartment, independent living, resident, geriatric, aging, community, retire, retired, elder,  health care, assisted living, nursing care">
<meta name="Description"
 content="Oaknoll is an adult retirement community in Iowa City, Iowa.">
<meta name="robots" content="index,follow">

<!-- include Cycle plugin -->

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	    	
			});



$('#s3').cycle({
    fx:    'fade',
	
    speed:  8500,
	
	cleartype: 1,
cleartypeNoBg: false,
height: 'auto',
containerResize: 0,

timeout: 2000,

sync: 0,

fadeOut:'slow',



nowrap: 0,
randomizeEffects: 0,
pause: 2
	


});
	
	
	


});
</script>


 <!--Vertical Slider Navigation javascript - code on external page-->

<script type="text/javascript" src="js/external_navigation_menu_javascript.js"></script>

 <!--endofVerticalSliderNavigationjavascript-->


		

<!--tocorrecttheunsightlyFlashofUnstyledContenthttp://www.bluerobot.com/web/css/fouc.asp-->
	<script type="text/javascript"> </script>
	

	

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->






<!-- Start WOWSlider.com HEAD section -->
	<link rel="stylesheet" type="text/css" href="engine1/style.css" media="screen" />
	
<!-- End WOWSlider.com HEAD section -->







<link rel="stylesheet" href="css/oaknoll_newsite.css" type="text/css" />
<link rel="stylesheet" href="css/nav_css.css" type="text/css" />

</head>

<body>

<div id="container">

<!--#include virtual="includes/header_asp.asp"-->
		



		<div id="main">


        <div id="box1">
       <div class="slideshow">		
	     <img src="images/sls/ss_sls/rendering_with_text.jpg" width="400" height="299" alt="Spring Street Rendering" class="first" />
       </div> <!--end-of-slideshow-->
        </div><!--end-box-1-->

       <div id="box2">
   	  <div class="buttonbox"><img src="images/4_special_buttons.jpg" alt="internet buttons" width="181" height="300" border="0" usemap="#Map" />
        <map name="Map" id="Map">
          <area shape="rect" coords="14,8,178,70" href="http://www.touchtown.tv/tv/tv/webshow/tv1.jsp?tag=OAKNOLL_WEB" target="_blank" alt="Link to Oaknoll Announcements" border="none" />
          <area shape="rect" coords="14,86,177,145" href="http://www.facebook.com/Oaknoll?ref=sgm" target="_blank" alt="Link to Oaknoll's Facebook Page" border="none"/>
          <area shape="rect" coords="15,161,171,213" href="http://oaknoll.blogspot.com/" target="_blank" alt="Link to the Oaknoll Blog" />
          <area shape="rect" coords="17,232,174,296" href="hawkeye.asp" alt="Link to Golden Hawks Birthday Club" />
        </map>
   	  </div><!--BUTTONBOX-->
        </div><!--end-box-2-->


   <h1 style="clear:left;">Spring Street Addition Archive Gallery...</h1>
   <p>&nbsp;</p>



<!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
	<div id="wowslider-container1">
	<div class="ws_images"><ul>
<li><img src="data1/images/715georgestreethousemove2.jpg" alt="" title="" id="wows1_0"/>715 George Street House Move</li>
<li><img src="data1/images/715_george_street.jpg" alt="" title="" id="wows1_1"/>715 George Street House</li>
<li><img src="data1/images/715_george_street_house_move_1.jpg" alt="" title="" id="wows1_2"/>715 George Street House Move</li>
<li><img src="data1/images/715_george_street_house_move_3.jpg" alt="" title="" id="wows1_3"/>715 George Street House</li>
<li><img src="data1/images/715_george_street_house_move_7.jpg" alt="" title="" id="wows1_4"/>715 George Street house Move</li>
<li><img src="data1/images/719_george_street.jpg" alt="" title="" id="wows1_5"/>719 George Street</li>
<li><img src="data1/images/img_0139.jpg" alt="" title="" id="wows1_6"/>715 George Street house</li>
<li><img src="data1/images/img_0141.jpg" alt="" title="" id="wows1_7"/>715 George Street house move</li>
<li><img src="data1/images/img_0142.jpg" alt="" title="" id="wows1_8"/>715 George Street house move</li>
<li><img src="data1/images/img_0150.jpg" alt="" title="" id="wows1_9"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_1.jpg" alt="" title="" id="wows1_10"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_10.jpg" alt="" title="" id="wows1_11"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_2.jpg" alt="" title="" id="wows1_12"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_3.jpg" alt="" title="" id="wows1_13"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_4.jpg" alt="" title="" id="wows1_14"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_5.jpg" alt="" title="" id="wows1_15"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_6.jpg" alt="" title="" id="wows1_16"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_7.jpg" alt="" title="" id="wows1_17"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_8.jpg" alt="" title="" id="wows1_18"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_9.jpg" alt="" title="" id="wows1_19"/>715 George Street house move</li>
<li><img src="data1/images/photo_16_september_2012.jpg" alt="" title="" id="wows1_20"/>Spring Street house</li>
<li><img src="data1/images/photo_22_spetember_2012.jpg" alt="" title="" id="wows1_21"/></li>
<li><img src="data1/images/photo_23_september_2012.jpg" alt="" title="" id="wows1_22"/>Spring Street House</li>
<li><img src="data1/images/photo_24_september_2012.jpg" alt="" title="" id="wows1_23"/></li>
<li><img src="data1/images/photo_25_september_2012.jpg" alt="" title="" id="wows1_24"/></li>
<li><img src="data1/images/photo_2_september_2012.jpg" alt="" title="" id="wows1_25"/>Geo Thermal Drilling</li>
<li><img src="data1/images/photo_3_september_2012.jpg" alt="" title="" id="wows1_26"/>Geo Thermal Drilling</li>
</ul></div>
<div class="ws_thumbs">
<div>
<a href="#" title=""><img src="data1/tooltips/715georgestreethousemove2.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/715_george_street.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/715_george_street_house_move_1.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/715_george_street_house_move_3.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/715_george_street_house_move_7.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/719_george_street.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/img_0139.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/img_0141.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/img_0142.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/img_0150.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_1.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_10.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_2.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_3.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_4.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_5.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_6.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_7.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_8.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_9.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_16_september_2012.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_22_spetember_2012.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_23_september_2012.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_24_september_2012.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_25_september_2012.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_2_september_2012.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_3_september_2012.jpg" alt="" /></a>
</div>
</div>
<a class="wsl" href="http://wowslider.com">jQuery Slider Scrollbar by WOWSlider.com v2.7.1</a>
	<a href="#" class="ws_frame"></a>
	<div class="ws_shadow"></div>
	</div>
	<script type="text/javascript" src="engine1/wowslider.js"></script>
	<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->




<p></p>



</div>

    <!--#include virtual="includes/menu_asp.asp"-->



	 <!--#include virtual="includes/footer_asp.asp"-->




  </div><!--end-of-main-->
</div><!--end-of-container-->
</body>
</html>

ralphm · December 15, 2012, 11:04pm

As you noted, you have this in your code:

<div id="container">

[COLOR="#FF0000"]<!--#include virtual="includes/header_asp.asp"-->[/COLOR]
		
      
       
        
		<div id="main">

That include is pulling in your header (doctype info etc.), rather than your menu. That include should be at the top of your page rather than here. It seems the header info is hard coded at the top of your pemplate, when really, you want to delete all that and just include the line in red.

sarb · December 15, 2012, 11:25pm

ralph_m:

As you noted, you have this in your code:
<div id="container">

[COLOR="#FF0000"][/COLOR]
		
      
       
        
		<div id="main">
That include is pulling in your header (doctype info etc.), rather than your menu. That include should be at the top of your page rather than here. It seems the header info is hard coded at the top of your pemplate, when really, you want to delete all that and just include the line in red.

What part are you referring to when you say that I should “delete all that”. I don’t want to delete the wrong info.

And am I assuming correctly that when you say that the “include code” should be at the top of the page, you mean right under the <body> tag?

Thanks, appreciate your patience…

Sarah

ralphm · December 15, 2012, 11:54pm

Having this line in your teplate:

<!--#include virtual="includes/header_asp.asp"-->

inserts all this into your page, right where that line appears in the template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oaknoll - An Adult Retirement Community</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords"
 content="oaknoll, iowa city, retirement, elderly, iowa, LifeCare, retirement community, nursing home, apartment, independent living, resident, geriatric, aging, community, retire, retired, elder,  health care, assisted living, nursing care">
<meta name="Description"
 content="Oaknoll is an adult retirement community in Iowa City, Iowa.">
<meta name="robots" content="index,follow">

</head>

<body>

[COLOR="#FF0000"]<div id="header">
          
    <h1> </h1>
    </div> <!--end-of-page-header-->

</body>
</html>[/COLOR]

Now, looking at that code again, I see that it is really inserting a whole page template. So what I recommend is this:

Go to the header_asp.asp file and trim it down a bit, so that it looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oaknoll - An Adult Retirement Community</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="oaknoll, iowa city, retirement, elderly, iowa, LifeCare, retirement community, nursing home, apartment, independent living, resident, geriatric, aging, community, retire, retired, elder,  health care, assisted living, nursing care">
<meta name="Description" content="Oaknoll is an adult retirement community in Iowa City, Iowa.">
<meta name="robots" content="index,follow">

Cut the include link from your template here:

<div id="container">

[COLOR="#FF0000"]<!--#include virtual="includes/header_asp.asp"-->[/COLOR]
		
      
       
        
		<div id="main">

You sure don’t want that header code inside your “container” div!

At the top of your template, remove this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Oaknoll - An Adult Retirement Community</title>
<meta name="Keywords"
 content="oaknoll, iowa city, retirement, elderly, iowa, LifeCare, retirement community, nursing home, apartment, independent living, resident, geriatric, aging, community, retire, retired, elder,  health care, assisted living, nursing care">
<meta name="Description"
 content="Oaknoll is an adult retirement community in Iowa City, Iowa.">
<meta name="robots" content="index,follow">

and replace it all with this line:

<!--#include virtual="includes/header_asp.asp"-->

Hopefully that makes things clearer.

The downside of having all that code in your header_asp.asp file is that you really want some of it to change from page to page, so personally, I would remove things like this from that file and customize them on each page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
[COLOR="#FF0000"]<title>Oaknoll - An Adult Retirement Community</title>
<meta name="Keywords"
 content="oaknoll, iowa city, retirement, elderly, iowa, LifeCare, retirement community, nursing home, apartment, independent living, resident, geriatric, aging, community, retire, retired, elder,  health care, assisted living, nursing care">
<meta name="Description"
 content="Oaknoll is an adult retirement community in Iowa City, Iowa.">[/COLOR]
<meta name="robots" content="index,follow">

sarb · December 16, 2012, 1:07am

Ok, I’ve made the changes and things are looking much better. I have created one problem and I’m not sure how to fix. I moved the “include” to the top of the photo gallery page and deleted the doctype info that was there previously. My only concern now is that there is a closing </head> tag on the photo gallery page, but there is not an opening <head> tag. Should I put an opening head tag in there somewhere? When I tried putting it above the include, it through the wow slider off, so I removed it.

Also, my header has shifted to the left. I went to my css and put “text-align: center;” thinking that would correct the problem but it didn’t. The header is still shifted to the left.

http://www.oaknoll.com/springstreet_photogallery.asp

Here is my css for the header:


#header {
	margin-top: 15px;
	margin-bottom: 5px;
	border-bottom: 5px solid #ffffff;
	width: 840px;
	height: 70px;
	background-image: url(../images/header_3.jpg);
	background-repeat: no-repeat;
	
	
}

sarb · December 16, 2012, 1:10am

ok, a bit of a correction, when I look at the photo gallery page in dreamweaver, I see the include and then further down is the </head>. When I view the page source on the internet, I see that the header include has inserted the doctype info like you said it would, which contains both the opening and closing head tags, so I guess it is ok. Still trying to figure out why the header has shifted to the left though.

Thanks,

ralphm · December 16, 2012, 2:22am

You just need to center it, as shown below in red:

#header {
	[s]margin-top: 15px;[/s]
	[s]margin-bottom: 5px;[/s]
	border-bottom: 5px solid #ffffff;
	width: 840px;
	height: 70px;
	background-image: url(../images/header_3.jpg);
	background-repeat: no-repeat;
	[COLOR="#FF0000"]margin: 15px [COLOR="#FF0000"]auto[/COLOR] 5px;[/COLOR]
}

You still need to work on the include code, though. You have a start and end of page at the top:

</head>

<body>

<div id="header">
          
    <h1> </h1>
    </div> <!--end-of-page-header-->

</body>
</html>

Perhaps try to remove all of that from the include file, and actually include this in the body of your page:


<div id="header">
          
    <h1> </h1>
</div> <!--end-of-page-header-->

At the moment, your “header” code is in the <head> of your document, which is going to get you in a lot of trouble. It’s just the over kindness of browsers that your page is rendering at the moment.

sarb · December 16, 2012, 4:12pm

You are right, when I created the site, I thought the header and footer might be changing, so I added it as an include. I didn’t realize what a complicated mess I was creating. I went ahead and removed those two includes and just put the code into the photo gallery page code. Looks much cleaner and seems to be running better. Thank you!

My last concern…

So my navigation menu is in an include format, because those do change periodically and it makes it much easier to change the one page this way. BUT, now that you have opened my eyes at the bottom of the page where the menu include is, it also brings the whole include page (doc type and all) into the photo gallery page code.

I have tried moving that to the top of the page, and to the bottom, but it just breaks up the hole layout when I move it. Any suggestions on how I can fix this last problem?

http://www.oaknoll.com/springstreet_photogallery.asp

navigation css:



#nav {padding:0; margin:0 0 0 13px; background:#d4dedc;}
#nav a:hover {text-decoration:underline;}
#nav dt b {display:block;
color:#fff;
height:25px;
line-height:35px;
padding-left:10px;
cursor:pointer;
width:173px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 10px 10px 10px 10px;
background: #333399 url(../images/mini_leaf.jpg) no-repeat center right;
border-left: 5px solid #7c7ca5;
border-bottom: 1px solid #fff;
}

#nav dt a {color:#fff; text-decoration:none;}
#nav dd { width: 200px; padding: 5px 0 15px 0; margin:0; background-color:#d6e1de; }
#nav dd ul {padding:0; margin:0; list-style:none;}
#nav dd ul li {padding-left:20px;}
#nav dd ul li a {font: 10px Verdana, Arial, Helvetica, sans-serif;
color:#333399; text-decoration:none; line-height: 1.5;}

#navcap img {
  vertical-align: bottom;
}

Thanks,
Sarah

sarb · December 16, 2012, 4:14pm

Here is what my current dreamweaver code looks like. It looks different in the source code on the internet.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Oaknoll - An Adult Retirement Community</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords"
 content="oaknoll, iowa city, retirement, elderly, iowa, LifeCare, retirement community, nursing home, apartment, independent living, resident, geriatric, aging, community, retire, retired, elder,  health care, assisted living, nursing care">
<meta name="Description"
 content="Oaknoll is an adult retirement community in Iowa City, Iowa.">
<meta name="robots" content="index,follow">




<!-- include Cycle plugin -->

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	    	
			});



$('#s3').cycle({
    fx:    'fade',
	
    speed:  8500,
	
	cleartype: 1,
cleartypeNoBg: false,
height: 'auto',
containerResize: 0,

timeout: 2000,

sync: 0,

fadeOut:'slow',



nowrap: 0,
randomizeEffects: 0,
pause: 2
	


});
	
	
	


});
</script>


 <!--Vertical Slider Navigation javascript - code on external page-->

<script type="text/javascript" src="js/external_navigation_menu_javascript.js"></script>

 <!--endofVerticalSliderNavigationjavascript-->


		

<!--tocorrecttheunsightlyFlashofUnstyledContenthttp://www.bluerobot.com/web/css/fouc.asp-->
	<script type="text/javascript"> </script>
	

	

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->






<!-- Start WOWSlider.com HEAD section -->
	<link rel="stylesheet" type="text/css" href="engine1/style.css" media="screen" />
	
<!-- End WOWSlider.com HEAD section -->







<link rel="stylesheet" href="css/oaknoll_newsite.css" type="text/css" />
<link rel="stylesheet" href="css/nav_css.css" type="text/css" />

</head>

<body>



<div id="container">

<div id="header">

    <h1> </h1>
</div> <!--end-of-page-header-->


		<div id="main">


        <div id="box1">
       <div class="slideshow">		
	     <img src="images/sls/ss_sls/rendering_with_text.jpg" width="400" height="299" alt="Spring Street Rendering" class="first" />
       </div> <!--end-of-slideshow-->
        </div><!--end-box-1-->

       <div id="box2">
   	  <div class="buttonbox"><img src="images/4_special_buttons.jpg" alt="internet buttons" width="181" height="300" border="0" usemap="#Map" />
        <map name="Map" id="Map">
          <area shape="rect" coords="14,8,178,70" href="http://www.touchtown.tv/tv/tv/webshow/tv1.jsp?tag=OAKNOLL_WEB" target="_blank" alt="Link to Oaknoll Announcements" border="none" />
          <area shape="rect" coords="14,86,177,145" href="http://www.facebook.com/Oaknoll?ref=sgm" target="_blank" alt="Link to Oaknoll's Facebook Page" border="none"/>
          <area shape="rect" coords="15,161,171,213" href="http://oaknoll.blogspot.com/" target="_blank" alt="Link to the Oaknoll Blog" />
          <area shape="rect" coords="17,232,174,296" href="hawkeye.asp" alt="Link to Golden Hawks Birthday Club" />
        </map>
   	  </div><!--BUTTONBOX-->
        </div><!--end-box-2-->


   <h1 style="clear:left;">Spring Street Addition Archive Gallery...</h1>
   <p>&nbsp;</p>



<!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
	<div id="wowslider-container1">
	<div class="ws_images"><ul>
<li><img src="data1/images/715georgestreethousemove2.jpg" alt="" title="" id="wows1_0"/>715 George Street House Move</li>
<li><img src="data1/images/715_george_street.jpg" alt="" title="" id="wows1_1"/>715 George Street House</li>
<li><img src="data1/images/715_george_street_house_move_1.jpg" alt="" title="" id="wows1_2"/>715 George Street House Move</li>
<li><img src="data1/images/715_george_street_house_move_3.jpg" alt="" title="" id="wows1_3"/>715 George Street House</li>
<li><img src="data1/images/715_george_street_house_move_7.jpg" alt="" title="" id="wows1_4"/>715 George Street house Move</li>
<li><img src="data1/images/719_george_street.jpg" alt="" title="" id="wows1_5"/>719 George Street</li>
<li><img src="data1/images/img_0139.jpg" alt="" title="" id="wows1_6"/>715 George Street house</li>
<li><img src="data1/images/img_0141.jpg" alt="" title="" id="wows1_7"/>715 George Street house move</li>
<li><img src="data1/images/img_0142.jpg" alt="" title="" id="wows1_8"/>715 George Street house move</li>
<li><img src="data1/images/img_0150.jpg" alt="" title="" id="wows1_9"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_1.jpg" alt="" title="" id="wows1_10"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_10.jpg" alt="" title="" id="wows1_11"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_2.jpg" alt="" title="" id="wows1_12"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_3.jpg" alt="" title="" id="wows1_13"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_4.jpg" alt="" title="" id="wows1_14"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_5.jpg" alt="" title="" id="wows1_15"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_6.jpg" alt="" title="" id="wows1_16"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_7.jpg" alt="" title="" id="wows1_17"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_8.jpg" alt="" title="" id="wows1_18"/>715 George Street house move</li>
<li><img src="data1/images/moving_house_9.jpg" alt="" title="" id="wows1_19"/>715 George Street house move</li>
<li><img src="data1/images/photo_16_september_2012.jpg" alt="" title="" id="wows1_20"/>Spring Street house</li>
<li><img src="data1/images/photo_22_spetember_2012.jpg" alt="" title="" id="wows1_21"/></li>
<li><img src="data1/images/photo_23_september_2012.jpg" alt="" title="" id="wows1_22"/>Spring Street House</li>
<li><img src="data1/images/photo_24_september_2012.jpg" alt="" title="" id="wows1_23"/></li>
<li><img src="data1/images/photo_25_september_2012.jpg" alt="" title="" id="wows1_24"/></li>
<li><img src="data1/images/photo_2_september_2012.jpg" alt="" title="" id="wows1_25"/>Geo Thermal Drilling</li>
<li><img src="data1/images/photo_3_september_2012.jpg" alt="" title="" id="wows1_26"/>Geo Thermal Drilling</li>
</ul></div>
<div class="ws_thumbs">
<div>
<a href="#" title=""><img src="data1/tooltips/715georgestreethousemove2.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/715_george_street.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/715_george_street_house_move_1.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/715_george_street_house_move_3.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/715_george_street_house_move_7.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/719_george_street.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/img_0139.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/img_0141.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/img_0142.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/img_0150.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_1.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_10.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_2.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_3.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_4.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_5.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_6.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_7.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_8.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/moving_house_9.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_16_september_2012.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_22_spetember_2012.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_23_september_2012.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_24_september_2012.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_25_september_2012.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_2_september_2012.jpg" alt="" /></a>
<a href="#" title=""><img src="data1/tooltips/photo_3_september_2012.jpg" alt="" /></a>
</div>
</div>
<a class="wsl" href="http://wowslider.com">jQuery Slider Scrollbar by WOWSlider.com v2.7.1</a>
	<a href="#" class="ws_frame"></a>
	<div class="ws_shadow"></div>
	</div>
	<script type="text/javascript" src="engine1/wowslider.js"></script>
	<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->




<p></p>



</div>


 <!--#include virtual="includes/menu_asp.asp"-->


  <div id="footer">
<div id="footer_links">
Copyright © 2012 Oaknoll Retirement Residence. All rights reserved.<br />
www.oaknoll.com <br/>
  1 Oaknoll Court ~
  Iowa City, Iowa 52246 ~

  OFFICE: <strong>(319) 351-1720</strong> ~ FAX: (319) 351-6772<br />
  <a href="mailto:oaknoll@oaknoll.com">Email: oaknoll@oaknoll.com</a>
</div><!--end footer_links-->
</div><!--end footer-->

 </div><!--end-of-main-->


</div><!--end-of-container-->
</body>
</html>

ralphm · December 16, 2012, 10:04pm

Includes are great, and I highly recommend them, for anything that appears on more than one page. It should be really simple to fix this. Can’t you just go to the include file (like menu_asp.asp) and remove the stuff that shouldn’t be there, like

</body>
</html>

etc? It seems like those files are all acting like full web pages, but an include file doesn’t need all that page code—but rather just the snippet of code that needs to be included on another page.

sarb · December 16, 2012, 11:24pm

Thanks ralph.m for all your help. I think I’ve pretty much got it now. Couldn’t have done it without your help. I will have to explore that “include” part a little further. Still don’t quite understand why all that code appears in the html code on the internet, but I am ready to give this a break for a bit.

Thanks again!!!

Sarb

ralphm · December 16, 2012, 11:34pm

I’d be interested to know what code is in those include files. With a PHP include, at least, you would just put some code in there, like your menu code, and wherever you place the include link on your page, the code in the include file will appear in place of the link in your HTML. It couldn’t be simpler. I suspect it’s the same with your include files. They will just be sitting there in Dreamweaver. I’m sure if you open them, you’ll find that they contain extra code that’s not needed. It should take a second or two just to remove the bits that shouldn’t be in there.

sarb · December 16, 2012, 11:43pm

Here is the code from the menu include




         <div id="navcap">
          <img src="http://www.oaknoll.com/images/navigation-cap.gif" width="200" height="18" alt="navigation cap" />
         </div><!--end-navcap-->

 <div id="nav">

	<dt> <a href="http://www.oaknoll.com/index.asp"><b>Home</b></a> </dt>

	


    <dt><b>LifeCare</b></dt>

	<dd>
		<ul>
			<li><a href="http://www.oaknoll.com/independent_living.asp">Independent Living</a></li>
			<li><a href="http://www.oaknoll.com/assisted.asp">Assisted Living</a></li>
			<li><a href="http://www.oaknoll.com/health_center.asp">Health Center</a></li>
			
			

		</ul>
	</dd>
	<dt><b>Health Services</b></dt>
	<dd>
		<ul>
			<li><a href="http://www.oaknoll.com/social_services.asp">Social Services</a></li>
	        <li><a href="http://www.oaknoll.com/health_services.asp">Health Services</a></li>
			<li><a href="http://www.oaknoll.com/physical_therapy.asp">Physical Therapy</a></li>
            <li><a href="http://www.oaknoll.com/dietician.asp">Dietician</a></li>
          <li><a href="http://www.oaknoll.com/companions.asp">Companions</a></li>
		</ul>
	</dd>
	
    <dt><b>Amenities</b></dt>
	<dd>
		<ul>
			<li><a href="http://www.oaknoll.com/dining.asp">Dining Services</a></li>
			<li><a href="http://www.oaknoll.com/transportation.asp">Transportation</a></li>
			<li><a href="http://www.oaknoll.com/theater.asp">Movie Theater</a></li>
			<li><a href="http://www.oaknoll.com/internet_cafe.asp">Internet Cafe/Coffee Shop</a></li>
			<li><a href="http://www.oaknoll.com/game_rooms.asp">Game Rooms</a></li>
            <li><a href="http://www.oaknoll.com/libraries.asp">Library</a></li>
            <li><a href="http://www.oaknoll.com/sewing.asp">Sewing Room</a></li>

	  </ul>

	</dd>
	<dt><b>Recreation/Wellness</b></dt>
	<dd>
		<ul>
			<li><a href="http://www.oaknoll.com/wellness.asp">Wellness</a></li>
            <li><a href="http://www.oaknoll.com/programs.asp">Programs</a></li>
			<li><a href="http://www.oaknoll.com/pool.asp">Pool/Spa</a></li>
			<li><a href="http://www.oaknoll.com/salon.asp">Salon</a></li>
      </ul>
	</dd>
	
    <dt><b>About Oaknoll</b></dt>
	<dd>
		<ul>
			<li><a href="http://www.oaknoll.com/history.asp">History</a></li>
            <li><a href="http://www.oaknoll.com/resident_council.asp">Oaknoll Resident Council</a></li>
            <li><a href="http://www.oaknoll.com/board_of_directors.asp">Board of Directors</a></li>
            <li><a href="http://www.oaknoll.com/foundation_board.asp">Foundation Board</a></li>
            <li><a href="http://www.oaknoll.com/mission_statement.asp">Mission Statement</a></li>
            <li><a href="http://www.oaknoll.com/spring_street_addition.asp">Spring Street Addition</a></li>
	  </ul>
	</dd>




<dt><b>Services</b></dt>
	<dd>
		<ul>
			<li><a href="http://www.oaknoll.com/maintenance.asp">Maintenance</a></li>
			<li><a href="http://www.oaknoll.com/housekeeping.asp">Housekeeping</a></li>
			<li><a href="http://www.oaknoll.com/laundry.asp">Laundry</a></li>
			<li><a href="http://www.oaknoll.com/technology.asp">Technology</a></li>
            <li><a href="http://www.oaknoll.com/banking.asp">Banking</a></li>
		</ul>
   </dd>




    <dt><b>Employment</b></dt>

	<dd>
		<ul>
        <li><a href="http://www.oaknoll.com/employment.asp">Employment</a></li>
			<li><a href="http://www.oaknoll.com/oaknoll/jobopenings.asp">Current Openings</a></li>
			<li><a href="http://www.oaknoll.com/pdf/Application_2012_for_website.pdf" target="blank">Application</a></li>
		</ul>
	</dd>


<dt><a href="http://www.oaknoll.com/contact.asp"><b>Contact Us</b></a></dt>



 </div>

  <div id="donate_button">
	  <a href="foundation_board.asp"><img src="../images/home_page_donate_button.jpg" width="194" height="67" alt="Make a donation" border="none" /> </a>
</div>
  <!--donate button-end-->



  <div id="ldirector">
	  <a href="http://www.oaknoll.com/executive_director.asp"><p>Patricia Heiden ~ <br />
            A Director With a Dream. <br/><br/>
            Click here to learn more...</p></a>
</div> <!--director-end-->


<div id="ladministrator">
<a href="http://www.oaknoll.com/administrator.asp"><p>Meet <br/>
Steve Roe, <br />
			    our Administrator</p></a>
</div> <!--administrator-end-->

sarah

ralphm · December 17, 2012, 12:08am

OK, that’s what it should look like. Looking at your online HTML, all seems to be fine now. Just that code, and nothing else, is replacing the include link. Looks like it’s sorted to me.

sarb · December 17, 2012, 12:44am

Thanks for all the time you put into this :-). So much appreciated!

Sarah