A Noob at Website Dev needs your help

R

rsnellma

Gawd
Joined
Jul 17, 2002
Messages
639
I am nearing the completion of a long process of developing my church's website. My problem is I want to insert our contact info at the top on both sides of our logo, but when I try to use a table it throws the contact info and logo off center with the rest of the page. Can someone help me figure out how to have the table (or how to recode it) to adjust with the rest of the page, whether the visitor is using 800x600, 1024x768, etc.? Thank you in advance.

Here is the link
Faith Community Church of Hillsboro, OH


Also, here is the code.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Faith Community Church of Hillsboro, Ohio</title>
<link rel="stylesheet" href="3col_leftNav.css" type="text/css">
<style type="text/css">
<!--
.style2 {
font-size: 14px;
font-weight: bold;
font-style: italic;
color: #006699;
}
-->
</style></head>
<body>
<div id="masthead">
<table width="1000" border="0">
<tr>
<td width="245"><div align="center"><span class="style2">Phone: (937)393-0631<br>
Fax: (937)393-0637<br>
Email: PastorChuck@fccoh.com
</span></div></td>
<td width="296"><div align="center"><img src="images/fcclogo.gif" width="254" height="100"></div></td>
<td width="245"><div align="center"><span class="style2">8343 State Route<br>
P.O. Box 1729<br>
Hillsboro, OH 45133</span></div></td>
</tr>
</table>
<h1 align="center" id="siteName">&nbsp;</h1>
<div id="globalNav">
<div align="center"><a href="index1d.htm">Home</a>| <a href="worship.html">Worship Times</a> | <a href="direction.html">Directions</a> | <a href="calendar.html">Calendar</a> |
<a href="ourcommunity.html">Our Community</a>| <a href="contactus.html">Contact Us</a></div>
</div>
<h2 id="pageName">Welcome to Faith Community</h2>
<div id="breadCrumb">
<a href="tws.html">This Week's Sermon</a> / <a href="twa.html">This Week's Annoucements</a> / <a href="twppm.html">This Week's Praise &amp; Prayer Moments</a></div>
</div>
<div id="navBar">
<div id="sectionLinks">
<h3>Ministries</h3>
<ul>
<li><a href="menministry.html">Men</a></li>
<li><a href="womenministry.html">Women</a></li>
<li><a href="youthministry.html">Youth</a></li>
<li><a href="childministry.html">Children</a></li>
<li><a href="outreach.html">Community</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Missionary Moments</h3>
<ul>
<li><a href="mmrussia.html">From Russia</a></li>
<li><a href="mmukraine.html">From Ukraine</a></li>
<li><a href="mmhungary.html">From Hungary</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Helpful Links</h3>
<ul>
<li><a href="http://www.biblegateway.com"> Bible / Concordance</a> </li>
<li><a href="http://www.m-w.com"> Dictionary</a></li>
<li><a href="http://www.biblegateway.com/resources/commentaries"> Commentaries</a></li>
<li><a href="http://www.rbc.org/odb/odb.shtml">Our Daily Bread </a></li>
<li><a href="http://www.family.org">Focus on the Family</a></li>
<li><a href="http://www.homeword.com">HomeWord</a></li>
<li><a href="http://www.promisekeepers.org">Promise Keepers</a></li>
<li><a href="http://www.youthspecialties.com">Youth Specialities</a></li>
</ul>
</div>
</div>
<!--end navBar div -->
<div id="headlines">
<h3><a href="specialevents.html">Special Events</a></h3>
<p>
Women's Retreat <a href="specialevents.html">details...</a>
</p>
<p>
Hillsboro High School Graduation <a href="specialevents.html">details...</a>
</p>
<p>
Fairfield High School Graduation <a href="specialevents.html">details...</a>
</p>
<p>
FCC Bowling Trip <a href="specialevents.html">details...</a>
</p>
<p>
Festival of the Bells <a href="specialevents.html">details...</a>
</p>
<div id="advert">
<h3>Streaming Radio Stations</h3>
<p><a href="http://www.thepath.fm"><img src="images/cdrradio.gif" width="107" height="40" border="0"></a>A Family Oriented Christian Radio Station with Biblical Truth Focused on Building Strong, Healthy Families. </p>
<p><a href="http://www.klove.com"><img src="images/klove.gif" width="107" height="54" border="0"></a> A Positive &amp; Encouraging, Family Friendly Christian Radio Station. </p>
<p><a href="http://www.air1.com"><img src="images/air1.gif" width="107" height="49" border="0"></a> A Positive Alternative Christian Radio Station for Youth. </p>
</div>
</div>
<!--end headlines -->
<div id="content">
<div class="feature">
<img src="images/fccsign.jpg" width="250" height="188"></div>
<div class="story">
<p align="center"><strong><em>&quot;A Place for You&quot; </em></strong></p>
<p>Those words are the greeting everyone who turns into our parking lot sees. But not only that, everyone who drives by on the highway sees them as well. You may think those words are the words of an empty slogan, but those words are the simple expression of our demonstration of Christ's love for the world we live in. You may be asking, &quot;What kind of place is 'A Place for You'?&quot; Someone once said that the Christian life is not so much the art of &quot;being&quot; as it is the act of &quot;becoming.&quot; In other words, Christ sees us not so much as who and where we are as He looks at us through future-oriented eyes, seeing who and where we are &quot;becoming!&quot; As a church, we are in the process of &quot;becoming&quot; just what our sign proclaims we are - &quot;A Place for You&quot;. </p>
<p><strong>We are becoming &quot;A Place for You&quot; - <em>To Worship God. </em></strong> One of the chief reasons we exist as a church is to worship the Lord. In our celebrations together we desire to lift up the name of the Lord, to exalt Him in all His glory, and to seek His face in praise and adoration. </p>
<p><strong>We are becoming &quot;A Place for You&quot; - <em>To Serve the Lord. </em></strong> Whether its teaching a Sunday Bible class, leading a Nursing Home ministry, or cooking a meal for a shut-in, the beauty of the ministry is in reaching to one another in love, serving one another and trusting Christ for the results. One of our purposes is to become a place where each and every member of the body is ministering in his/her God-given way! </p>
<p><strong>We are becoming &quot;A Place for You&quot; - <em>To Nurture One Another </em></strong>The church of Jesus Christ is to be a place where we identify with one another, share with one another our joys, our hurts and pains, and share in others' joys and concerns. As members of one another, we enjoy the fellowship that we share in common with each other and with Christ. </p>
<p><strong>We are becoming &quot;A Place for You&quot; - <em>To Know Christ </em></strong><em>. </em>One of our goals as a church is to be actively involved, to be intentionally involved, in sharing the Good News of Christ with those we live with, work with, and meet on a regular basis. If Christ is the answer to the problems the world faces, then we need to be eagerly asking people the questions... </p>
<p><strong>We are becoming &quot;A Place for You&quot; - <em>To Grow in Christ. </em></strong>Our ministry at E Free will never be complete unless and until each of us as believers is actively and intentionally involved in some sort of &quot;growth group&quot; or small group Bible study, where we are encouraged and encouraging others to grow in Christ, and allow Christ to grow in us. </p>
<p>My vision for our church includes these five statements of vision, and of our purpose...<strong>&quot;A Place for You&quot;.</strong></p>
<p>Pastor, Chuck Tabor .
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/pastorsign.gif" width="158" height="59"></p>

<h3>&nbsp;</h3>
</div>
<div class="story"></div>
</div>
<!--end content -->
<div id="siteInfo">
<div align="center"><a href="http://www.efca.org"><img src="images/efcamember.gif" width="44" height="43" border="0"></a> | <a href="sitemap.html">Site
Map</a> | <a href="contactus.html">Contact Us</a> | &copy;2005
Faith Community Church</div>
</div>
<div align="center"><br>
</div>
</body>
</html>
 
Thank you for your quick response. I am using a CCS template found in DreamWeaver MX 2004. So, I guess I am using CCS layouts. Maybe not, just not sure...still a noob. Would you like to see the style sheet code? Maybe that could help? Thanks again.

Bob2001



CCS Code

/***********************************************/
/* 3col_leftNav.css */
/* Use with template 3col_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

a{
color: #006699;
text-decoration: none;
}

a:link{
color: #006699;
text-decoration: none;
}

a:visited{
color: #006699;
text-decoration: none;
}

a:hover{
color: #006699;
text-decoration: underline;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font-family: Arial,sans-serif;
font-size: 114%;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font-family: Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}


/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

#navBar{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

#headlines{
float:right;
width: 20%;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 10px;
}

#content{
float: left;
width: 55%;
}

/***********************************************/
/* Components */
/***********************************************/

#siteName{
margin: 0;
padding: 0 0 0 10px;
}


/************* #globalNav styles **************/

#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #CCC;
color: #cccccc;
}

#globalNav img{
display: block;
}

#globalNav a {
font-size: 90%;
padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

#pageName{
margin: 0px;
padding: 0px 0px 0px 10px;
}

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}


/************** .feature styles ***************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}


/************** .story styles *****************/

.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story p{
padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
}

#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}


/************* #search styles ***************/

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
background-color: #dddddd;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

/************** #advert styles **************/

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
}


/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}

#headlines p{
padding: 5px 0px 5px 0px;
}
 
Hello rsnellma,
I made a header using CSS for you if you want to use it. You can just cut/paste the relevant CSS and Code into the right places I hope - I think you sound experienced enought to do that and I'll help you if you like.

Rather than post all that code in a quote, just goto http://nopeople.com/test/Untitled-1.html and do a file/save as to get the code. If you want to move the text around a little just re-set the margin numbers in .htextleft and .htextright


Use the right DocType
Validate your HTML markup
Validate your CSS
Why you want to validate
Don't use tables for layout
 
Thank you so very much. I will try it out when I get back tonight and will let you know how it works. Thanks again.

Bob
 
Ok, I think I have figured out where to paste the code. Could you tell me if this is correct?

Faith Community Church of Hillsboro, Ohio

I pasted the # headers into the CSS page in Layout Divs. I have been playing with the width of # header_left to try and get the logo centered on the top nav menu bar which is just below it. Also, playing with the margins as you suggested. Thank you again.

Bob
 
Hello again rsnellma,
That looks great. If you wanted to make it a little more fluid you could try placing it with some % instead of px but it works good just the way it is. It works all the way down to 800x600 so it's probably just fine the way it is.
 
You could place all your code into an external style sheet and reference it like this with screen.css being your stylesheet.

<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
 
You must log in or register to reply here.
Back
Top