943,582 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Leave sidebar and title bar but change main content
Ad:
Permalink
Mar 22nd, 2009
0

Leave sidebar and title bar but change main content

Expand Post »
Currently, my index.html is like this
HTML and CSS Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title>EngineeringNotes.net</title>
  4. <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
  5. </head>
  6. <body>
  7.  
  8.  
  9. <div class="header">
  10. 	<div id="logo">
  11. 		<h1>EngineeringNotes.net</h1>
  12. 	</div>
  13. 	<div class="menu">
  14. 		<ul>
  15. 			<li><a href="mailto:daviddoria@gmail.com">Contact Me</a></li>
  16. 			<li><a href="phpBB3">Forums</a></li>
  17. 			<li><a href="Ideology.html">Ideology</a></li>
  18. 		</ul>
  19. 	</div><!-- end menu -->
  20. </div><!-- end header -->
  21.  
  22.  
  23. <div class="page"><!-- start page -->
  24. 	<div class="sidebar"><!-- start sidebar -->
  25. 		<h2>EE Topics</h2> 
  26. 		<ul>
  27. 			<li><a href="Notes/EE/PatternRecognition.pdf">Pattern Recognition</a> </li>
  28. 			<li><a href="Notes/EE/ImageProcessing.pdf">Image Processing</a> </li>
  29. 			<li><a href="Notes/EE/ComputerVision.pdf">Computer Vision</a> </li>
  30. 			<li><a href="Notes/EE/ComputerGraphics.pdf">Computer Graphics (stub)</a> </li>
  31. 			<li><a href="Notes/EE/SignalsAndSystems.pdf">Signals and Systems</a> </li>
  32. 			<li><a href="Notes/EE/Communications.pdf">Communications</a> </li>
  33. 		</ul>
  34.  
  35.  
  36. 	</div><!-- end sidebar -->
  37.  
  38. 	<div class="content"><!-- start content -->
  39. 		<h2>About this Site</h2>
  40. 		<p>
  41. 		This site is inteded to provide a "crash course" in many subject areas
  42. 		related to electrical engineering. The primers are not at all designed
  43. 		to
  44. 		be a replacement for a formal course in these topics. The target
  45. 		audience is a serious student who feels that it is worth their time
  46. 		outside of class to make sure they are getting the "big picture" and
  47. 		seeing the value of the subject rather than simply learning the mechanics of "doing problems". 
  48.  
  49.  
  50. 	</div><!-- end content -->
  51.  
  52. </div><!-- end page -->
  53.  
  54. </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
Featured Poster
Reputation Points: 437
Solved Threads: 204
Posting Virtuoso
daviddoria is offline Offline
1,968 posts
since Feb 2008
Permalink
Mar 23rd, 2009
0

Re: Leave sidebar and title bar but change main content


Use Server-Side Includes, e.g.:

HTML and CSS Syntax (Toggle Plain Text)
  1. <!--#include file="page.html" -->

Or:

HTML and CSS Syntax (Toggle Plain Text)
  1. <!--#include file="header.html" -->
  2. <body>
  3.  <h1>Title</h1>
  4.  <p>...</p>
  5. </body>
  6. <!--#include file="footer.html" -->
Reputation Points: 25
Solved Threads: 23
Junior Poster
cfajohnson is offline Offline
193 posts
since Dec 2008
Permalink
Mar 24th, 2009
0

Re: Leave sidebar and title bar but change main content

i would suggest to iFrames
Reputation Points: 13
Solved Threads: 18
Junior Poster
MJ Pieterse is offline Offline
144 posts
since Mar 2009
Permalink
Mar 25th, 2009
0

Re: Leave sidebar and title bar but change main content

So should the code look something like this?

HTML and CSS Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title>EngineeringNotes.net</title>
  4. <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
  5. </head>
  6. <body>
  7.  
  8.  
  9. <!--#include file="header.html" -->
  10.  
  11. <div class="page"><!-- start page -->
  12.  
  13. 	<!--#include file="sidebar.html" -->
  14.  
  15.  
  16. 	<div class="content"><!-- start content -->
  17. 		<h2>About this Site</h2>
  18. 		<p>
  19. 		This site is inteded to provide a "crash course" in many subject areas
  20. 		related to electrical engineering. The primers are not at all designed
  21. 		to
  22. 		be a replacement for a formal course in these topics. The target
  23. 		audience is a serious student who feels that it is worth their time
  24. 		outside of class to make sure they are getting the "big picture" and
  25. 		seeing the value of the subject rather than simply learning the mechanics of "doing problems". 
  26.  
  27.  
  28. 	</div><!-- end content -->
  29.  
  30. </div><!-- end page -->
  31.  
  32. </body></html>

With the header.html file as...
HTML and CSS Syntax (Toggle Plain Text)
  1. <div class="header">
  2. 	<div id="logo">
  3. 		<h1>EngineeringNotes.net</h1>
  4. 	</div>
  5. 	<div class="menu">
  6. 		<ul>
  7. 			<li><a href="mailto:daviddoria@gmail.com">Contact Me</a></li>
  8. 			<li><a href="phpBB3">Forums</a></li>
  9. 			<li><a href="Ideology.html">Ideology</a></li>
  10. 		</ul>
  11. 	</div><!-- end menu -->
  12. </div><!-- end header -->

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

HTML and CSS Syntax (Toggle Plain Text)
  1. <div class="sidebar"><!-- start sidebar -->
  2. 		<h2>EE Topics</h2> 
  3. 		<ul>
  4. 			<li><a href="Notes/EE/PatternRecognition.pdf">Pattern Recognition</a> </li>
  5. 			<li><a href="Notes/EE/ImageProcessing.pdf">Image Processing</a> </li>
  6. 			<li><a href="Notes/EE/ComputerVision.pdf">Computer Vision</a> </li>
  7. 			<li><a href="Notes/EE/ComputerGraphics.pdf">Computer Graphics (stub)</a> </li>
  8. 			<li><a href="Notes/EE/SignalsAndSystems.pdf">Signals and Systems</a> </li>
  9. 			<li><a href="Notes/EE/Communications.pdf">Communications</a> </li>
  10. 		</ul>
  11.  
  12.  
  13. 	</div><!-- end sidebar -->
Team Colleague
Reputation Points: 92
Solved Threads: 21
Posting Pro in Training
FC Jamison is offline Offline
436 posts
since Jun 2004
Permalink
Mar 25th, 2009
0

Re: Leave sidebar and title bar but change main content

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.
Team Colleague
Reputation Points: 92
Solved Threads: 21
Posting Pro in Training
FC Jamison is offline Offline
436 posts
since Jun 2004
Permalink
Mar 25th, 2009
0

Re: Leave sidebar and title bar but change main content

Interesting, cool though - thanks all!
Featured Poster
Reputation Points: 437
Solved Threads: 204
Posting Virtuoso
daviddoria is offline Offline
1,968 posts
since Feb 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Refer to button text via CSS
Next Thread in HTML and CSS Forum Timeline: Changing image BG onclick





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC