Church Website

Richard Slater

Richard Slater

Richard Slater

Associate
Joined
18 Oct 2002
Posts
2,055
Location
Brighton, UK
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
 
blade007 said:
why are there pebbles at the top?
Click to expand...

...

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
Click to expand...

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 said:
...
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?
Click to expand...

kinda an odd theme to have for a church, pebbles or Brighton Beach.

Take it or leave it bruss, it's only an opinion.

if a website for Ron's Wholesale Oranges had a banner picture of a Jack Russell I would find that odd too.

like I said, it's only an opinion.
 
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.
 
From a graphical stand point might be worth using a different background for the body and central "page", to give clear visual borders between content and padding. Also I wouldn't have an image behind the church logo, as it makes it harder for the user to read.

Looking at the html theres a lot of div tags you don't actually need in there, consider applying corners/edges to nested elements like the unordered list your using for a menu.

Other than that it seems a good start.

akakjs
 
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?

ieffdiff.png


Valid XHTML 1.0 Strict
Valid CSS
Section 508 Compliant
 
this is most likely caused by ...

the difference in IE and firefox default renderings

so when you don't specify a padding and margin, for images, body, html, divs etc .. it defaults. And the defaults are are not the same for the two browsers.

it's better to declare it all.
 
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)
 
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 :)
Click to expand...

this trick could have saved me a lot fo time. Wish I knew about that.

the difference between IE and FF is sometimes very annoying and I refuse to use IE hacks and such forth.
 
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 :)
Click to expand...

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?
 
addy_010 said:
there should be more pictures of the church, the ones provied i dont really enjoy to be honest with you
Click to expand...

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.
 
You must log in or register to reply here.
Back
Top Bottom