rickfink
12-07-2009, 06:36 PM
Trying to implement Server Side Includes into my site, I have a sidebar on every page and want to just edit one and every one will update. I think Example 2 on here (http://www.w3schools.com/PHP/php_includes.asp) is what I want to use, but how do I keep the same formatting so it looks the same?
Site: www.baysidesuperior.org
Sidebar Code:
<div id="search-news2">
<h2 class="downcast">Sermons</h2>
<div id="sermons">
<p><a href="javascript:november2909()">November 29, 2009</a></p>
<p><a href="javascript:november2209()">November 22, 2009</a></p>
<p><a href="javascript:november1509()">November 15, 2009</a></p>
<p class="more"><a href="media">more</a></p>
</div>
<h2 class="downcast">Upcoming Events</h2>
<div id="news">
<p>Dec 04</p>
<h3><a href="events#E1">Senior Adults' Banquet</a></h3>
<p>Dec 05</p>
<h3><a href="events#E2">Chancellors Concert</a></h3>
<p>Dec 06</p>
<h3><a href="events#E3">Christmas Program</a></h3>
<p>Dec 12</p>
<h3><a href="events#E4">White Elephant Party</a></h3>
<p>Dec 24</p>
<h3><a href="events#E5">Christmas Eve Service</a></h3>
</div>
</div>
sidebar CSS:
#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(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: 50px;
}
#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(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;
}
Site: www.baysidesuperior.org
Sidebar Code:
<div id="search-news2">
<h2 class="downcast">Sermons</h2>
<div id="sermons">
<p><a href="javascript:november2909()">November 29, 2009</a></p>
<p><a href="javascript:november2209()">November 22, 2009</a></p>
<p><a href="javascript:november1509()">November 15, 2009</a></p>
<p class="more"><a href="media">more</a></p>
</div>
<h2 class="downcast">Upcoming Events</h2>
<div id="news">
<p>Dec 04</p>
<h3><a href="events#E1">Senior Adults' Banquet</a></h3>
<p>Dec 05</p>
<h3><a href="events#E2">Chancellors Concert</a></h3>
<p>Dec 06</p>
<h3><a href="events#E3">Christmas Program</a></h3>
<p>Dec 12</p>
<h3><a href="events#E4">White Elephant Party</a></h3>
<p>Dec 24</p>
<h3><a href="events#E5">Christmas Eve Service</a></h3>
</div>
</div>
sidebar CSS:
#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(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: 50px;
}
#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(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;
}