Church Website

Richard Slater · 22 Apr 2006 at 17:11

I am working on a website for my chuch, have come up with a design that they like. The only thing that will deffinatly change is the background to the banner at the top, which will be a photograph of the beach in Brighton (will actually be a couple of different images).

If anyone has any thoughts I would appreacite your input, this is my first reall foray into propper XHTML and CSS, have always used tables for layout before and I am just about getting my head round it.

Link

Richard Slater · 22 Apr 2006 at 21:15

blade007 said:
why are there pebbles at the top?

...

Richard Slater said:
The only thing that will deffinatly change is the background to the banner at the top, which will be a photograph of the beach in Brighton

As I said the pebbles are going to change once I can get some good photographs of Brighton beach. Why would you suggest something else?

Richard Slater · 22 Apr 2006 at 22:00

Well its a Brighton church... perhaps I should have mentioned that.

Agreed if the Church was based in London, it would be a little off the wall... if you have any other suggestions as to what would be more fitting my ears are open.

Richard Slater · 6 May 2006 at 11:32

Updated Website

I have made some changes to the website, I would appreciate it if someone could cast their eyes over it again and let me know what you think.

http://ifc.richard-slater.co.uk/ifctest.html

I have at least one problem that I can't solve:

In firefox there is a white gap round the content div, however in IE this gap is missing at the bottom edge. Can't for the life of me find out why or how?

Valid XHTML 1.0 Strict
Valid CSS
Section 508 Compliant

Richard Slater · 6 May 2006 at 15:17

Thats the thing, on the #contentText DIV I have tried varying methods of declaring both the margin and padding.

f.ex
margin: 0.5em;
- or -
padding: 0.5em
- or -
margin: 0.5em 0.5em 0.5em 0.5em;
- or -
padding: 0.5em 0.5em 0.5em 0.5em
- or -
margin-top: 0.5em;
margin-right: 0.5em;
margin-bottom: 0.5em;
margin-left: 0.5em;
- or -
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 0.5em;

Including combinations of both to get a 0.5em border round the content, the only thing that gets me half way there is having:

padding: 0.25em;
margin: 0.25em;

which gives me a 0.5em border on the Top, Right and Left borders and a 0.25em border on the the bottom border.

Any other ideas, I appreciate that declaring everything is good practice however it seems regardless of what I do IE renders it inconsistently. (I can't even spot the logic behind it)

Richard Slater · 6 May 2006 at 16:54

Al Vallario said:
It will probably require a lot of cocking about to implement at such a late stage, but the "Global White Space Reset" can come in handy in situations like this. It gets rid of browser-individual defaults right from of the off, leaving you to set values yourself

Nice technique

Fortunatly because I have already declared most of my margins and padding already implementing the "Global White Space Reset" only managed to remove the top 0.5em whitespace. However my problem with the bottom of the content going missing is still there.

Could this be something to do with IEs dodgy implementation of colapsing margins?

Richard Slater · 7 May 2006 at 07:45

addy_010 said:
there should be more pictures of the church, the ones provied i dont really enjoy to be honest with you

Its just a design, there is no content at all yet, the section titles are only provisional. The news-submenu is the first 15 odd books of the Old Testement and the text is a passage from 1 John.

Richard Slater · 20 May 2006 at 21:59

Teknodeamon said:
wheres that church picture from? Doesnt look like roman western architecture to me ;P Is it a picture of converted cathedrals from spain?

Its not a church, its The Royal Pavilion in Brighton - http://www.royalpavilion.org.uk/

Richard Slater · 21 May 2006 at 08:56

Gman said:
I would change the justification on the text mate. It works fine in printed text but on the websites it just don't work and with the font at a large size it makes things difficult to follow.

Think its something do do with some dictionary thing that does not exist on the web but does in word and similar applications.

run that one past me again... it would look better left justified rather than evenly justified? and what do you mean by "some dictionary" -- do you mean something to do with the way word pads and wraps?