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.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I hope this is the right place for a Server Side Include question...

    I'm having an issue with my SSI while working on LunarPages. I've created a large site (90 some pages) for a non-profit group that is some 2000+ miles away from me. They have frequent changes, often resulting in menu updates that were driving me crazy. So I thought I'd use a <!--#includ virtual=""--> code.

    I've gotten the header.shtml to work okay. But there's a spatial issue with the menu.shtml include. Somehow or other it seems to be inserting paragraphs where none are intended, shoving the content on the page downward.

    I can see it on the Page Source, but when I open the HTML editor (cPanel through Lunarpages) I see no paragraphs. I've checked the menu.shtml codes and the practice2.html codes, but I can't find the paragraph breaks in the coding.

    Please see: http://www.sierrachamberopera.org/practice2.shtml to see what I'm talking about.

    I really need to figure out this code, so I can implement it throughout the site. Can someone please see what I'm not seeing, or tell me where to go to find a solution? I'm desperate.

    ~ Genta

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Wow your code is terribly broken! I suppose this is more of an HTML question than a real server side issue but don’t worry, we’ll get your thread moved.
    Now look at 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>
    </head>
    <body bgcolor="#ffffff" background="../../HTMLPages/images/backgrounds/bggenericlong1.jpg" alink="white" vlink="white">
    <table style="border-collapse: collapse" width="100%" border="0" bordercolor="#000000" cellpadding="3" cellspacing="0">
    <tbody>
    <tr>
    <td valign="top" width="20%" height="140">
    <div><!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>
    </head>
    <body bgcolor="#ffffff" vlink="white"><a href="../../index.html" title="Home">
    <table style="border-collapse: collapse" summary="" width="244" border="0" bordercolor="#000000" cellpadding="3" cellspacing="0" height="125">
    <tbody>
    <tr valign="top">
    
    <td width="100%"><br />
    </td></tr></tbody></table></a>
    </body>
    </html></div><br />
    </td>
    <td valign="top" width="80%" align="center">
    There can only be one doctype and one document header and body in a document. It looks like that new HTML “document” inside the current one has just been inserted to have a home link, is that right? Man, how complicated can one do it?
    Also you can’t have CSS a stylesheet inside the body, it must at least be in the header of the document (same goes for stylesheet links).

    OK, I just felt like doing it since this ain’t a too advanced layout:
    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></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta name="description" content="" />
    		<meta name="keywords" content="" />
    		<style type="text/css">
    			body {
    				background: white url(http://www.sierrachamberopera.org/HTMLPages/images/backgrounds/bggenericlong1.jpg) no-repeat;
    				color: black;
    				margin: 0;
    				padding: 1px 0 0;
    				font-family: Arial, Helvetica, Sans-serif;
    			}
    			hr {display: none;}
    			#content hr {display: block;}
    			#container {
    				border-right: 8px solid #068A7A;
    				padding: 10px 0 10px 10px;
    				overflow: auto;
    				min-width: 750px;
    			}
    			#header {
    				height: 105px;
    				padding: 15px 0 15px 15px;
    				position: relative;
    			}
    			#header h1, #header h2 {
    				margin: 0;
    				text-align: center;
    				font: normal normal 2.5em Arial, Helvetica, Sans-serif;
    				color: #028C7C;
    			}
    			#header h1 a {
    				display: block;
    				position: absolute;
    				left: 0;
    				top: 10px;
    				height: 120px;
    				width: 160px;
    				text-indent: -999em;
    			}
    			#main {
    				float: right;
    				width: 78%;
    			}
    			#sub {
    				float: left;
    				width: 20%;
    				padding-top: 1em;
    			}
    			#sub ul {
    				margin: 0 auto;
    				padding: 0;
    				list-style: none;
    			}
    			#nav {width: 130px;}
    			#sub #nav a {
    				background: #028C7C;
    				color: white;
    				text-decoration: none;
    				font: normal bold 1em "Times New Roman", Times, serif;
    				display: block;
    				border: 2px solid black;
    				text-transform: uppercase;
    				text-align: center;
    			}
    			#sub #nav .jsenabled:hover {
    				background: white;
    				color:  #028C7C;
    				border-color: #028C7C;
    				cursor: pointer;
    			}
    			#sub #nav li {margin-bottom: 2px;}
    			#sub #nav ul {padding-top: 3px;}
    			#sub #nav ul li {
    				text-align: center;
    				margin: 0;
    				line-height: .8em;
    			}
    			#sub #nav li li a {
    				background: white;
    				color: #028C7C;
    				border: none;
    				text-transform: none;
    				font-size: .6em;
    				font-weight: normal;
    				display: inline;
    			}
    			#sub #nav li li a:hover {color: red !important;}
    			#footer {
    				clear: both;
    				padding-top: 1em;
    			}
    		</style>
    		<script type="text/javascript">
    		// <![CDATA[
    			window.onload = function() {
    				if(document.getElementById('nav')) {
    					var navItem = document.getElementById('nav').getElementsByTagName('a');
    					var subList = document.getElementById('nav').getElementsByTagName('ul');
    					for(j=0;j<subList.length;j++) {
    						subList[j].style.display = 'none';
    					}
    					for(i=0;i<navItem.length;i++) {
    						navItem[i].className = 'jsenabled';
    						navItem[i].onclick = function() {
    							for(j=0;j<subList.length;j++) {
    								subList[j].style.display = 'none';
    							}
    							var currentListItem = this.parentNode;
    							var currentSubList = currentListItem.getElementsByTagName('ul')[0];
    							if(currentSubList) {
    								if(currentSubList.style.display == 'none' ) {
    									currentSubList.style.display = 'block';
    								}
    								else {
    									currentSubList.style.display = 'none';
    								}
    								return false;
    							}
    						}
    					}
    				}
    			}
    		// ]]>
    		</script>
    	</head>
    	<body>
    		<div id="container">
    			<div id="header">
    				<h1><a href="index.shtml">Sierra Chamber Opera</a></h1>
    				<h2>About Us</h2>
    			</div>
    			<hr />
    			<div id="content">
    				<div id="main">
    					<p>Since 1978, Sierra Chamber Opera has exposed over 1.3 million elementary school children in the Fresno, California area to the excitement and enlightenment of opera.</p> 
    					<p>The company is supported entirely by grants and contributions, and produces a new show for each school year, putting music from the standard operatic repertoire into new storylines which are appropriate for our audiences.</p> 
    					<p>Our company, which makes extensive use of volunteers, puts on more than 200 performances a year, each one of which reaches 300 children.</p> 
    					<p>Sierra Chamber Opera is a 501(c) (3) corporation and your contributions are fully tax deductible.</p>
    				</div>
    				<div id="sub">
    					<ul id="nav">
    						<li>
    							<a>Sierra Chamber Opera</a>
    							<ul>
    								<li><a href="">Home</a></li>
    								<li><a href="">Our Mission</a></li>
    								<li><a href="">About Us</a></li>
    								<li><a href="">History and Goals</a></li>
    								<li><a href="">Board Members</a></li>
    								<li><a href="">Current Newsletter</a></li>
    								<li><a href="">Newsletter Archive</a></li>
    							</ul>
    						</li>
    						<li><a>Operas</a>
    							<ul>
    								<li><a href="http://google.com">2009/10 Season: Chefs Go ’Round The World</a></li>
    								<li><a href="">Cast Of Characters</a></li>
    								<li><a href="">Seasons Past</a></li>
    								<li><a href="">Photos</a></li>
    								<li><a href="">SCO Report Card from Educators</a></li>
    								<li><a href="">Student Art and Letters</a></li>
    							</ul>
    						</li>
    						<li><a>Current Calendar</a>
    							<ul>
    								<li><a href="">This Month’s Calendar</a></li>
    								<li><a href="">Booking for Your School</a></li>
    							</ul>
    						</li>
    						<li><a href="">Audio &amp; Video Clips</a>
    							<ul>
    								<li><a href="">Video from Our Current Show</a></li>
    								<li><a href="">Video from Past Shows</a></li>
    								<li><a href="">Audio from Our Current Show</a></li>
    								<li><a href="">Audio from Past Shows</a></li>
    							</ul>						
    						</li>
    						<li><a href="">Cast &amp; Credits</a></li>
    						<li><a href="">Fun Stuff for Kids</a></li>
    						<li><a href="">Teachers’ Resources</a></li>
    						<li><a href="">Specials</a></li>
    						<li><a href="">Offers</a></li>
    						<li><a href="">Sponsors &amp; Bequests</a></li>
    						<li><a href="">FAQ</a></li>
    					</ul>
    				</div>
    			</div>
    			<hr />
    			<div id="footer">footer stuff (like copyright etc.) can come here</div>
    		</div>
    	</body>
    </html>
    This is mostly the same page as your example except that it’s using semantic code and CSS rather than tables for layout (minor differences may occur but can be tweaked in the CSS). In this example CSS and JS are all in the document but ideally you’d put them in separate files and reference them in the header. The JavaScript isn’t perfect yet but basically does what it’s supposed to (and the navigation isn’t complete, you’ll have to do the rest accodingly).

    If you are using server side includes you’d just put the nav into a separate file (which can have any extension, so you can name it nav.html, or nav.txt, or nav.inc, or whatever) and an include into the section where the navigation used to be:
    Code:
    <ul id="nav">
    	<li>
    		<a>Sierra Chamber Opera</a>
    		<ul>
    			<li><a href="">Home</a></li>
    			<li><a href="">Our Mission</a></li>
    			<li><a href="">About Us</a></li>
    …
    …
    …
    	<li><a href="">FAQ</a></li>
    </ul>
    Code:
    <div id="content">
    	<div id="main">
    		<p>Since 1978, Sierra Chamber Opera has exposed over 1.3 million elementary school children in the Fresno, California area to the excitement and enlightenment of opera.</p> 
    		…
    		…
    	</div>
    	<div id="sub">
    	<!--#include virtual="nav.html" -->
    	</div>
    </div>
    This also makes it easy to see if there is any code appearing that shouldn’t be. I can only imagine that it’s happening through some WYSIWYG editor which is auto-completing code, and thus messing it up.


  •  

    Tags for this Thread

    Posting Permissions

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