Current time: 04-18-2014, 08:40 AM Hello There, Guest! (LoginRegister)

Post Reply 
Layout and tutorials
12-22-2009, 03:50 PM
Post: #1
Layout and tutorials
I have very little experience with hmtl and none with css styles. I have created the following site but have some pretty major issues with my result.
1. images (logo at top and the verticle left bar and the top and bottom image bars, and background) are fixed so if each links page contains more than what fits in the area it shoves the credits at the bottom past the background and shows it repeat instead of readjusting.
2. these images also repeat horizontally.

not sure if im explaining it exactly. but i created it with web expression 2 and it looked great on a 14-15" screen but on 17" or higher it repeats. I would also like to have a frame inside that lets me use the same top,side and bottom instead of editing every page when i add a link which is how i have it now. I know this has nothing to do with dreamhost or its services but thought there might be an easy way to figure it. please see my sig below if any of you have extra time and want to help us out! once i get this i will move on to lookin for help with the search bar.
God Bless
Shawn

If you do not want to take the time to give your insight or opinion feel free to pass along urls to good tutorials on what im looking for. God Bless

all help, suggestions, and code to improve our site is appreciated. altizerbaptist.org

all help, suggestions, and code to improve our site is appreciated. altizerbaptist.org
Visit this user's website Find all posts by this user
Quote this message in a reply
01-15-2010, 11:20 PM
Post: #2
Layout and tutorials
Shawn,

Please post your code or a link to your site so people can see your code. I'm not quite understanding what your issue is, but it might be clear if I can see the site. Smile

Generally speaking - if you are using a program to do the coding for you - expect a LOT of issues. It's better to take the time to take some tutorials online, or buy a book and learn how to code yourself. You'll generally be better off.
Find all posts by this user
Quote this message in a reply
01-16-2010, 10:13 AM
Post: #3
Layout and tutorials
website is altizerbaptist.org

code for the home page after entering through the index page.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<link href="default.css" rel="stylesheet" type="text/css">
<style type="text/css">
.style1 {
text-align: center;
}
.style2 {
text-align: left;
}
a {
color: #FFFFFF;
}
.style3 {
font-size: medium;
}
.style4 {
margin-left: 64px;
}
.style5 {
font-size: x-large;
text-align: center;
}
.style6 {
color: #FA1832;
font-size: 13pt;
}
.style7 {
font-size: 13pt;
}
.style8 {
text-align: right;
}
.style9 {
margin-top: 7px;
}
.style10 {
font-size: medium;
text-align: left;
}
</style>
</head>
<body style="color: #FFFFFF; background-image: url('images/bluebg1280beam.png'); ">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="bg1">
<tr>
<td class="bg7"><table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">

<td width="396"> <center>          </td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0"></center>
<tr>
<td valign="top" class="bg2" style="width: 584px; height: 113px;">
<table border="0" align="right" cellpadding="0" cellspacing="0" style="width: 95%; height: 96px">
<tr>
<td style="width: 14%; height: 67px;">
<strong>

<a class="link1" href="http://altizerbaptist.org/home.html" style="background: no-repeat left top; padding-left: 25px;">Home</a></strong></td>
<td style="width: 15%; height: 67px;" class="style1">
<strong>
<a 25px;"="" class="link1" href="http://altizerbaptist.org/news.html" left="" padding-left:="" style="no-repeat" top;="">News</a></strong></td>
<td style="width: 14%; height: 67px;" class="style1">
<strong>
<a 25px;"="" class="link1" href="http://altizerbaptist.org/about.html" left="" padding-left:="" style="no-repeat" top;="">About</a></strong></td>

<td style="width: 81px; height: 67px;">
<strong>
<a class="link1" href="http://altizerbaptist.org/mediasermontest.html" style="no-repeat left top; padding-left: 25px;">Media</a></strong></td>
<td class="style10" style="height: 67px">     
<strong>
<a 25px;"="" class="link1" href="http://altizerbaptist.org/contact.html" style="padding-left:">Contacts</a></strong></td>

</tr>
<tr>

<td colspan="5">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="style9" style="height: 17px">
<tr valign="top">
<td width="74%" align="right" style="padding-top: 10px;"><input type="text" id="inputtext1" name="inputtext1" value=""></td>
<td width="2%"> </td>
<td width="9%" style="padding-top: 11px;"><input type="submit" id="inputsubmit1" name="inputsubmit1" value="Search"></td>
</tr>
</table>
</td>

</tr>
</table>
<a href="#" class="link1"></a></td>
</tr>
</table></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="style4" style="float: left; width: 757px;" align="left">
<tr>

<td style="width: 282px"><img src="images/spacer.gif" alt="" width="240" height="28"> </td>
<td colspan="2">
<h3 class="style5">
Welcome to
Altizer Baptist
Church</td>
</tr>
<tr>
<td style="width: 282px">
<h2 style="height: 25px; margin: 0px; padding: 10px 0px 0px 30px;" class="style2">

<span class="style7">
Altizer</span><span class="style6">Baptist</span><span class="style7">Church</span></span></h2></td>
<td class="bg14" rowspan="2" style="width: 225px">
<img src="images/church04.jpg" alt=""></td>
<td class="bg14" rowspan="2">
<p class="style2">
Thank
You for
stopping
by. We
are
excited
to be on
the
world
wide
web! We
hope you
enjoy
our
website
and find
it
useful
in
assisting
you with
keeping
up with
what is
going on
in and
around
our
church
and
community.
This Web
Site is
an
effort...</p>

<p><img src="images/subpage03.gif" alt="" width="9" height="11">   <a class="link4" href="welcome.html">Read
full
article</a></p></td>
</tr>
<tr>
<td style="width: 282px"><ul class="list1">
<li class="">
<a href="http://altizerbaptist.org/events.html">Upcoming
Events</a></li>
<li class="">
<a href="http://altizerbaptist.org/involve.html">Get Involved</a></li>

<li class="">
<a href="http://altizerbaptist.org/outreach.html">Outreach
Projects</a></li>
<li class="">
<a href="youth.html">
Youth</a></li>
<li class="">
<a href="http://altizerbaptist.org/athletics.html">Athletics</a></li>

<li class="">
<a href="http://altizerbaptist.org/tithe.html">Tithe/Support</a></li>
<li class="">
<a href="http://altizerbaptist.org/links.html">LINKS</a></li>
<li class="">
<a href="http://altizerbaptist.org/prayer.html">Request
Prayer</a></li>
</ul></td>

</tr>
<tr>
<td style="width: 282px">
</td>
<td style="width: 225px">
</td>
<td> </td>
</tr>
</table><table width="980" border="0" align="center" cellpadding="0" cellspacing="0" class="bg4">

<tr>
<td width="980" class="bg5"><table width="980" border="0" cellpadding="0" cellspacing="0" class="bg6">
<tr>
<td>

<table width="980" border="0" align="center" cellpadding="0" cellspacing="0" class="bg5" style="height: 382px">
<tr valign="top">
<td style="height: 453px; width: 336px;" class="style1">
<img src="images/ucon.jpg"></td>
<td class="style2" style="height: 481px; width: 469px;">

<div class="style1">

<object height="270" style="width: 410px; float: left" class="style3">
<div class="style1">

<param name="movie" value="http://www.profileplaylist.net/mc/mp3player_new.swf"></param> <param name="allowscriptaccess" value="never"></param> <param name="wmode" value="transparent"></param> <param name="flashvars" value="config=http://www.indimusic.us/ext/pc/config_regular_shuffle.xml&mywidth=435&myheight=270&playlist_url=http://www.indimusic.us/loadplaylist.php?playlist=69858412&t=1252780386&wid=os"></param> <embed style="width:435px; visibility:visible; height:270px;" allowScriptAccess="never" src="http://www.profileplaylist.net/mc/mp3player_new.swf" flashvars="config=http://www.indimusic.us/ext/pc/config_regular_shuffle.xml&mywidth=435&myheight=270&playlist_url=http://www.indimusic.us/loadplaylist.php?playlist=69858412&t=1252780386&wid=os" width="435" height="270" name="mp3player" wmode="transparent" type="application/x-shockwave-flash" border="0"/> </div>
</object>
</div>
</td>

<td style="height: 481px"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>

</table>
<table style="width: 100%; height: 244px">
<tr>
<td style="height: 40px"></td>
<td style="width: 647px; height: 40px"></td>
</tr>
<tr>
<td style="height: 41px"></td>
<td style="width: 647px; height: 41px"></td>
</tr>

<tr>
<td style="height: 33px"></td>
<td class="style1" style="width: 647px; height: 33px"></td>
</tr>
<tr>
<td style="height: 55px"></td>
<td class="style1" style="width: 647px; height: 55px">Copyright © 2007
Altizer Baptist Church. All Rights Reserved.</td>
</tr>

<tr>
<td> </td>
<td class="style8" style="width: 647px">
<p class="style1" style=" padding-right: 50px; width: 573px;"><a href="#">Privacy Policy</a>   |   <a href="#">Terms of Use</a></p>
</td>
</tr>

</table>
</body>
</html>

all help, suggestions, and code to improve our site is appreciated. altizerbaptist.org
Visit this user's website Find all posts by this user
Quote this message in a reply
01-16-2010, 11:29 AM
Post: #4
Layout and tutorials
Your site looks fine in IE, but not on the other broswers.

Right off the bat - you're using tables. Icky. And you're also putting all yoru CSS code in the tables, rather than with the CSS (which you can do, but kinda defeats the purpose).

For example:

.style2 {
text-align: left;
}

<h2 style="height: 25px; margin: 0px; padding: 10px 0px 0px 30px;" class="style2">

You can do this:

.style2 {
text-align: left;
height: 25px;
margin: 0px;
padding: 10px 0px 0px 30px;
}

<h2 class="style2"></h2>

What this does is allows you to make any changes you want in the future to ALL "style2" by making ONE change to your CSS sheet.

Instead of using tables, use DIVs. This gives you better control and clear instructions to the browser when you're telling it not to repeat an image.

So let's say you've got the strip at the top:

.headerline {
background-image: url("IMAGENAME.jpg");
background-repeat: no-repeat;
}

And then the HTML is just:

<div class="headerline"></div>

All the commands will be in the CSS, which you then stick in a style sheet and link to.

(BTW, to do that, put all the CSS code onto a notepad and save as "mycode.css". Then you link to it with:

<link rel="stylesheet" href="mycode.css"> before the <body> tag.

I would suggest some tutorials and then rebuilding your code in order to get the look you're going far. You did a really great job for being new to this!

When I was just starting, here's some tutorial pages I used:

http://www.w3.org/Style/Examples/011/firstcss
http://www.w3.org/Style/LieBos2e/enter/
http://www.html.net/tutorials/css/

These are really great for learning some of the basics to get your started (which should cover your site nicely).
Find all posts by this user
Quote this message in a reply
01-16-2010, 03:24 PM
Post: #5
Layout and tutorials
I'll dive into this later on in the week prob next friday. Thanks so much for the help! God Bless

all help, suggestions, and code to improve our site is appreciated. altizerbaptist.org
Visit this user's website Find all posts by this user
Quote this message in a reply
01-18-2010, 01:18 AM
Post: #6
Layout and tutorials
If you're not wanting to learn HTML/CSS, but are just wanting a website for your church, I'd suggest looking into Wordpress.

It is included as a 1-click install in your Dreamhost account.

This way, you could focus your time on the content, photos, upcoming events, etc., instead of trying to learn how to code a website.

God bless!
Find all posts by this user
Quote this message in a reply
01-25-2010, 04:37 PM
Post: #7
Layout and tutorials
Thanks for the tips guys. Honestly. I have done HTML, but the code was actually created by someone else. I purchased a layout but when i edited the material the css style sheet got deleted and i just started using Web Expression 2 to edit what i was use to seeing. I am now going back through the links provided to see whats best. Id prefer to learn most of it so that i can do it again in the future and continue to grow with this project. Like i said im just trying to figure out a way to make this site compatible with all browsers and resolutions with the minimal amount of work. I also would like to create frames and make the top and left side solid but that is taking time to resize all of the images i have and alignment as well. Thanks again for time.

Ill post more after tonight.

all help, suggestions, and code to improve our site is appreciated. altizerbaptist.org
Visit this user's website Find all posts by this user
Quote this message in a reply
03-09-2010, 12:32 PM
Post: #8
Layout and tutorials
Hey Shawn,
I have only basic html and css as well, so I'm no help on the tech questions, but I took a look at your website and just wanted to give you a quick pat on the back. I think it's a pretty cool site for a church site. Normally I don't like music starting up automatically on a website, but I think it's fine for yours. And I saw the nice video integration on one of your pages. Overall...thumbs up.

John

Cheers,
John Stephens
Tax-Deduction-Tips.com

<a href="http://www.tax-deduction-tips.com">Tax-Deduction-Tips.com</a>
Visit this user's website Find all posts by this user
Quote this message in a reply
03-09-2010, 02:10 PM
Post: #9
Layout and tutorials
thanks, i found the code and help online for the video. all of the css that is in the code i have was from a template that i ended up not even using, i just deleted teh css style sheet and started using expression web 2 to build. I have been working my job alot and havent had time to devote to it, but next monday i begin a new schedule with more days off. I hope to get many issues fixed and be fully involved in getting a finished product. Thanks again for checking it out.

all help, suggestions, and code to improve our site is appreciated. altizerbaptist.org
Visit this user's website Find all posts by this user
Quote this message in a reply
03-16-2010, 06:17 AM
Post: #10
Layout and tutorials
I hope some of you are still visiting this. Here is the updates I would like to share. My mission was to get all images and text to not repeat and be autoresized and rearrange depending on screen resolution. After sifting through code from all webpages i visit i found this primary information a bit helpful. First thing is a website has a base resolution which means your background and everything else is aligned to look full screen at that resolution. Most websites i have found puts everything at an 800x600 resolution then when the resolution is changed on the pc it zooms out considering you have a larger screen this makes it equally viewable. So i am building one page that has 800 x 600 primary page centered on a bg that will repeat out horizontally beyond any conceivable resolution.

SO what i am looking for at this point is how do i get it done? How is it that a website has a very small sliver that is an image used for the bg and have it continuously repeat (see http://christtemplechurch.net/) Also i wonder if its easier to set the entire 800x600 page in its own inline frame to keep it centered?

I will continue to research this next code step. I plan on simply using html as its easiest for me. Next step for us is to set frames on the page so our top and left links can be easily updated.

AGAIN, THANK YOU for everything. Hopefully we can move forward soon.

Shawn
altizerbaptist.org

all help, suggestions, and code to improve our site is appreciated. altizerbaptist.org
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump: