HTML and CSS

Leave sidebar and title bar but change main content

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Feb 2008

Posts: 628

Reputation: daviddoria is a jewel in the rough

Solved Threads: 46

daviddoria daviddoria is offline

Offline

Practically a Master Poster

Leave sidebar and title bar but change main content

Mar 22nd, 2009

Currently, my index.html is like this

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
<head>
<title>EngineeringNotes.net</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
 
 
<div class="header">
	<div id="logo">
		<h1>EngineeringNotes.net</h1>
	</div>
	<div class="menu">
		<ul>
			<li><a href="mailto:daviddoria@gmail.com">Contact Me</a></li>
			<li><a href="phpBB3">Forums</a></li>
			<li><a href="Ideology.html">Ideology</a></li>
		</ul>
	</div><!-- end menu -->
</div><!-- end header -->
 
 
<div class="page"><!-- start page -->
	<div class="sidebar"><!-- start sidebar -->
		<h2>EE Topics</h2> 
		<ul>
			<li><a href="Notes/EE/PatternRecognition.pdf">Pattern Recognition</a> </li>
			<li><a href="Notes/EE/ImageProcessing.pdf">Image Processing</a> </li>
			<li><a href="Notes/EE/ComputerVision.pdf">Computer Vision</a> </li>
			<li><a href="Notes/EE/ComputerGraphics.pdf">Computer Graphics (stub)</a> </li>
			<li><a href="Notes/EE/SignalsAndSystems.pdf">Signals and Systems</a> </li>
			<li><a href="Notes/EE/Communications.pdf">Communications</a> </li>
		</ul>
 
 
	</div><!-- end sidebar -->
 
	<div class="content"><!-- start content -->
		<h2>About this Site</h2>
		<p>
		This site is inteded to provide a "crash course" in many subject areas
		related to electrical engineering. The primers are not at all designed
		to
		be a replacement for a formal course in these topics. The target
		audience is a serious student who feels that it is worth their time
		outside of class to make sure they are getting the "big picture" and
		seeing the value of the subject rather than simply learning the mechanics of "doing problems". 
 
 
	</div><!-- end content -->
 
</div><!-- end page -->
 
</body></html>
<html>
<head>
<title>EngineeringNotes.net</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>


<div class="header">
	<div id="logo">
		<h1>EngineeringNotes.net</h1>
	</div>
	<div class="menu">
		<ul>
			<li><a href="mailto:daviddoria@gmail.com">Contact Me</a></li>
			<li><a href="phpBB3">Forums</a></li>
			<li><a href="Ideology.html">Ideology</a></li>
		</ul>
	</div><!-- end menu -->
</div><!-- end header -->


<div class="page"><!-- start page -->
	<div class="sidebar"><!-- start sidebar -->
		<h2>EE Topics</h2> 
		<ul>
			<li><a href="Notes/EE/PatternRecognition.pdf">Pattern Recognition</a> </li>
			<li><a href="Notes/EE/ImageProcessing.pdf">Image Processing</a> </li>
			<li><a href="Notes/EE/ComputerVision.pdf">Computer Vision</a> </li>
			<li><a href="Notes/EE/ComputerGraphics.pdf">Computer Graphics (stub)</a> </li>
			<li><a href="Notes/EE/SignalsAndSystems.pdf">Signals and Systems</a> </li>
			<li><a href="Notes/EE/Communications.pdf">Communications</a> </li>
		</ul>
		

	</div><!-- end sidebar -->
	
	<div class="content"><!-- start content -->
		<h2>About this Site</h2>
		<p>
		This site is inteded to provide a "crash course" in many subject areas
		related to electrical engineering. The primers are not at all designed
		to
		be a replacement for a formal course in these topics. The target
		audience is a serious student who feels that it is worth their time
		outside of class to make sure they are getting the "big picture" and
		seeing the value of the subject rather than simply learning the mechanics of "doing problems". 


	</div><!-- end content -->
	
</div><!-- end page -->

</body></html>

If I want to change the content in the "page" section, but leave the title header and sidebar there, how would I do this? I can't imagine I have to have the header and sidebar on every page, or when I have to make a change to either of those, I have to change it on every page!

Any suggestions?

Thanks,
Dave

•

Join Date: Dec 2008

Posts: 63

Reputation: cfajohnson is an unknown quantity at this point

Solved Threads: 13

cfajohnson cfajohnson is offline

Offline

Junior Poster in Training

Re: Leave sidebar and title bar but change main content

Mar 23rd, 2009

Use Server-Side Includes, e.g.:
Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)


Or:
Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

<body>
 <h1>Title</h1>
 <p>...</p>
</body>

 <body> <h1>Title</h1> <p>...</p> </body>

Chris F.A. Johnson
http://cfajohnson.com

•

Join Date: Mar 2009

Posts: 77

Reputation: mj080 is an unknown quantity at this point

Solved Threads: 5

mj080

Offline

Junior Poster in Training

Re: Leave sidebar and title bar but change main content

Mar 24th, 2009

i would suggest to iFrames

•

Join Date: Jun 2004

Posts: 434

Reputation: FC Jamison is on a distinguished road

Solved Threads: 20

FC Jamison FC Jamison is offline

Offline

Posting Pro in Training

Re: Leave sidebar and title bar but change main content

Mar 25th, 2009

So should the code look something like this?

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
<head>
<title>EngineeringNotes.net</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
 
 
<!--#include file="header.html" -->
 
<div class="page"><!-- start page -->
 
	<!--#include file="sidebar.html" -->
 
 
	<div class="content"><!-- start content -->
		<h2>About this Site</h2>
		<p>
		This site is inteded to provide a "crash course" in many subject areas
		related to electrical engineering. The primers are not at all designed
		to
		be a replacement for a formal course in these topics. The target
		audience is a serious student who feels that it is worth their time
		outside of class to make sure they are getting the "big picture" and
		seeing the value of the subject rather than simply learning the mechanics of "doing problems". 
 
 
	</div><!-- end content -->
 
</div><!-- end page -->
 
</body></html>
<html>
<head>
<title>EngineeringNotes.net</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>


<!--#include file="header.html" -->

<div class="page"><!-- start page -->

	<!--#include file="sidebar.html" -->

	
	<div class="content"><!-- start content -->
		<h2>About this Site</h2>
		<p>
		This site is inteded to provide a "crash course" in many subject areas
		related to electrical engineering. The primers are not at all designed
		to
		be a replacement for a formal course in these topics. The target
		audience is a serious student who feels that it is worth their time
		outside of class to make sure they are getting the "big picture" and
		seeing the value of the subject rather than simply learning the mechanics of "doing problems". 


	</div><!-- end content -->
	
</div><!-- end page -->

</body></html>

With the header.html file as...

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div class="header">
	<div id="logo">
		<h1>EngineeringNotes.net</h1>
	</div>
	<div class="menu">
		<ul>
			<li><a href="mailto:daviddoria@gmail.com">Contact Me</a></li>
			<li><a href="phpBB3">Forums</a></li>
			<li><a href="Ideology.html">Ideology</a></li>
		</ul>
	</div><!-- end menu -->
</div><!-- end header -->
<div class="header">
	<div id="logo">
		<h1>EngineeringNotes.net</h1>
	</div>
	<div class="menu">
		<ul>
			<li><a href="mailto:daviddoria@gmail.com">Contact Me</a></li>
			<li><a href="phpBB3">Forums</a></li>
			<li><a href="Ideology.html">Ideology</a></li>
		</ul>
	</div><!-- end menu -->
</div><!-- end header -->

...and the sidebar.html file being...

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div class="sidebar"><!-- start sidebar -->
		<h2>EE Topics</h2> 
		<ul>
			<li><a href="Notes/EE/PatternRecognition.pdf">Pattern Recognition</a> </li>
			<li><a href="Notes/EE/ImageProcessing.pdf">Image Processing</a> </li>
			<li><a href="Notes/EE/ComputerVision.pdf">Computer Vision</a> </li>
			<li><a href="Notes/EE/ComputerGraphics.pdf">Computer Graphics (stub)</a> </li>
			<li><a href="Notes/EE/SignalsAndSystems.pdf">Signals and Systems</a> </li>
			<li><a href="Notes/EE/Communications.pdf">Communications</a> </li>
		</ul>
 
 
	</div><!-- end sidebar -->
<div class="sidebar"><!-- start sidebar -->
		<h2>EE Topics</h2> 
		<ul>
			<li><a href="Notes/EE/PatternRecognition.pdf">Pattern Recognition</a> </li>
			<li><a href="Notes/EE/ImageProcessing.pdf">Image Processing</a> </li>
			<li><a href="Notes/EE/ComputerVision.pdf">Computer Vision</a> </li>
			<li><a href="Notes/EE/ComputerGraphics.pdf">Computer Graphics (stub)</a> </li>
			<li><a href="Notes/EE/SignalsAndSystems.pdf">Signals and Systems</a> </li>
			<li><a href="Notes/EE/Communications.pdf">Communications</a> </li>
		</ul>
		

	</div><!-- end sidebar -->

•

Join Date: Jun 2004

Posts: 434

Reputation: FC Jamison is on a distinguished road

Solved Threads: 20

FC Jamison FC Jamison is offline

Offline

Posting Pro in Training

Re: Leave sidebar and title bar but change main content

Mar 25th, 2009

OK...that worked on my server when I named the original document index.shtml. The shtml extention was required so that I could add the SSI (server side include) directives to the existing page.