Layout and tutorials

design

#1

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


#2

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. :slight_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.


#3

website is altizerbaptist.org

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

.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; }

Home

News About Media Contacts

Welcome to Altizer Baptist Church

AltizerBaptistChurch

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...

Read full article

Copyright (c) 2007 Altizer Baptist Church. All Rights Reserved.

Privacy Policy | Terms of Use

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


#4

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;
}

You can do this:

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

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:

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:

before the 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).


#5

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


#6

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!


#7

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


#8

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

Tax-Deduction-Tips.com


#9

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


#10

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


#11

For the image repeating only downward, use this code within the div in the css style sheet:

.class-name{
background-image: url(‘image-location.png’);
background-repeat: repeat-y;
}

For the centering of your content, just place a div around everything in your body tags and call it something like outer (make sure it is the only one labeled such):

all content between div tag like this, including other div/tables etc.

and for the css place this, your width and any other extra code you need in it:

#outer {
margin: 0 auto;
}

If you haven’t noticed, I also recommend a div over tables ^_~


#12

thanks will give it a try.

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


#13

thanks again, for anyone who is just starting css or just needs help as i do. I have found that to support the code that has been given here a great resource is thesitewizard.com

It definitely helps with relative page widths and gives examples of their code. Hopefully i get time to get some work done on our site.

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