Jun 19 2012, 03:46 PM
Hi, I am a noob who is trying to create a website for our church, currently the index page is complete and validates with no errors.
Site url: www.stewiackeholytrinitychurch.ca
I have several issues with this page as follows:
1) Background image does not fill entire screen (white space on right margin)
2) I want to move the words "All Welcome for Worship And Fellowship" up directly underneath the words "Holy Trinity Anglican Church" which I am trying to use as a heading and I want the other words underneath it like a tag line
3) I want to bring the paragraphs below the word "Welcome" up closer to this word
my problem is I have no idea how to accomplish these tasks
Jun 19 2012, 08:07 PM
Well, for one thing, you don't have a background image. You have a regular inline image that is stretched with CSS. Apparently, it isn't being stretched far enough, and your background color clashes with the edges of the background image.
As a practical matter, your background color should provide similar contrast to your text and link colors as your background image. This allows visitors to read your content when your image isn't used for any reason.
If your background color is compatible with your background image, then the edges where the background image doesn't reach won't be as jarring.
The space between "Holy Trinity Anglican Church" and "All Welcome for Worship And Fellowship" appears to be the default margin/padding browsers use for the h1 element. If you want to reduce the space, then you need to specify a smaller bottom margin/padding for the h1 element.
Finally, the space between "Welcome" and the paragraph below it comes from two places. Some of it comes from the default margin before the paragraph (the p element). Most of it comes from the space created by the cellspacing and td height that you've specified for the table surrounding the word "Welcome".