DonationCoder.com Forum

Other Software => Announce Your Software/Service/Product => Topic started by: Carol Haynes on June 19, 2008, 08:03 AM

Title: First website for a client
Post by: Carol Haynes on June 19, 2008, 08:03 AM
I have just set up my first website for a client (albeit on a voluntary basis).

It is a UK charity that supports the only school for the blind in The Gambia.

I figured it is an opportunity to develop a website for someone else and that involves working with others and to a deadline (not something I am good at). It has taken about two and half days in total to get it to this point - but half a day was spent on editing the links page - which needs some serious organising to make it useful!

A lot of the contact basis for the website is local friends who are involved and do things like deliver minibuses to the school (yes they drove from the UK to The Gambia across Europe and half of Africa - including the Sahara)!

Note the actual content is as supplied by the client but the site design and page graphics are mine. I know some pages need some extra 'interest' in the form of graphics. The news page is a work in progress - I will add a breadcrumb trail to archive stuff so that the page becomes a manageable length.

For now here is is - warts and all www.friendsofgovi.org.uk

What do people think? Constructive criticism is welcome.
Title: Re: First website for a client
Post by: Veign on June 19, 2008, 09:17 AM
Some very quick points:
- Remove all the META tags except for Title, Description, Robots, Content-Type and maybe Language.  All others serve no purpose anymore.
- Move the Styles (CSS) into an external stylesheet and call it from your pages.  This way its cached on the users system and reduces the 'weight' of a page
- To align the text in a container, like a DIV use a Style and not the align property which has been deprecated.  To do so create a CSS rule like:
    .text-center {text-align:center}
and then call it from the container where the text should be centered like:
    <div class="text-center" ...

If you want an img centered, without being contained within a container you can use a rule like:
   .img-center {display: block; text-align: center;margin:0 auto;}

These are some of my base rules:
.clear         { clear:both; }
 
.float-left    { float:left; }
.float-right   { float:right; }
 
.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }

.img-middle {vertical-align:middle}
.img-center    { display: block; text-align: center;margin:0 auto;}
.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }

- Don't use Caps (or spaces) in any file name (including images names / folder names) or URL.  It only leads to issues down the road and will lead to problems on a Linux server.  Users are used to lowercase and type them by default.
- Validate the page through the W3C (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.friendsofgovi.org.uk%2F).  Validation doesn't mean it will work in every browser or look the same but it helps.  It also helps get rid of the tricky little displays bugs that may pop up.
- Close all you tags (i.e. <META NAME="Title" CONTENT="Friends of GOVI"> should be <META NAME="Title" CONTENT="Friends of GOVI" />)
- The sidebar would do better as an unordered list styled into a menu then a bunch of P tags.  Its semantically more correct.

Thats it for now as I was just looking at the code.
Title: Re: First website for a client
Post by: mouser on June 19, 2008, 04:51 PM
I like the overall look, just have 2 small visual quibbles:

1) the left hand sidebar touches the line, which gives me a bad feeling
2) the top text needs some antialiasing to reduce the jaggies, which make it look less professional.

[ You are not allowed to view attachments ]
Title: Re: First website for a client
Post by: Carol Haynes on June 19, 2008, 05:54 PM
Thanks for the comments guys -I'll have another look tomorrow.
Title: Re: First website for a client
Post by: Perry Mowbray on June 19, 2008, 10:06 PM
You must have fixed mouser's #1 as it's fine on my machine, but the width is causing an issue (my resolution [at work] is 1280x1024):

[ You are not allowed to view attachments ]
Title: Re: First website for a client
Post by: Carol Haynes on June 20, 2008, 03:38 AM
That's odd - which browser are you using. Here is what it looks like in two browsers on my system with the windows dragged really narrow:

Firefox:  [ You are not allowed to view attachments ]   Internet Explorer:   [ You are not allowed to view attachments ]


Unfortunately I can't access from the domain at the moment as the server seems to be down (I can't access any of my domains)
Title: Re: First website for a client
Post by: Carol Haynes on June 20, 2008, 04:16 AM
OK I have done a bit of cleaning up (not everything) and http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.friendsofgovi.org.uk%2F now says the site is valid.

I found a few errors (and HTML version differences) and corrected those.

Dreameaver checking says it doesn't have any obvious browser compatibility issues.

I also found that the meta tags were in the wrong place - and the style sheet import in the template was in the wrong place (Dreamweaver's fault - strange 'cos I used apply style sheet and that is where it put it - maybe it looks with ref. to meta tags rather than the head tag as it should ... odd though).

I have fiddled with the banner image - unfortunately I was REALLY REALLY stupid as I rasterised and flattened the text in PhotoShop so I can't go back and edit the antialiasing settings. I have done the best I can manually - what do you think Mouser?

Server seems to be up again now.

Is the width fixed now Perry? I increased the margin for the content div and reduced its size by a couple of pixels. As I can't see it on my system I don't know if I have done enough!
Title: Re: First website for a client
Post by: Perry Mowbray on June 20, 2008, 05:49 AM
That's odd - which browser are you using. Here is what it looks like in two browsers on my system with the windows dragged really narrow:

Firefox:   (see attachment in previous post (https://www.donationcoder.com/forum/index.php?topic=13752.msg117751#msg117751))   Internet Explorer:    (see attachment in previous post (https://www.donationcoder.com/forum/index.php?topic=13752.msg117751#msg117751))

Unfortunately I can't access from the domain at the moment as the server seems to be down (I can't access any of my domains)
-Carol Haynes (June 20, 2008, 03:38 AM)

I agree it aint width: IE6 was the only browser they give us at work  >:(
Title: Re: First website for a client
Post by: Perry Mowbray on June 20, 2008, 05:59 AM
Is the width fixed now Perry? I increased the margin for the content div and reduced its size by a couple of pixels. As I can't see it on my system I don't know if I have done enough!
-Carol Haynes (June 20, 2008, 04:16 AM)

 :-[ Not at work any more Carol, so I can't reproduce it: it's fine in FF and IEtab here  :Thmbsup:

Would you like my opinion on your banner text? I'd go back and redo it if it was me: it'd be the first thing I saw on the site each time I visited  :(
Title: Re: First website for a client
Post by: nudone on June 20, 2008, 06:22 AM
looks to me like you've got the old internet explorer column drop problem.

make the image 'kidsatschool.jpg' a bit smaller and it won't push out the column and make it drop.

probably stick a bit of space between the top banner and the link above it also (the registered charity bit).

redo the text on the top banner when you can.

(maybe consider resizing the heads so that they are in proportion to each other - i'm not too sure if that is necessary. if resizing obviously looks better after you've done it then use it.)

and, don't trust dreamweaver to get it right for you. you'll soon find that when you are trying to accommodate all of the browser problems that dreamweaver is very ignorant.
Title: Re: First website for a client
Post by: Carol Haynes on June 20, 2008, 06:56 AM
OK I have placed 'kidsatschool.jpg' in its own div, reduced it a bit and centred it.

I have a VMWare IE 6 running and it seems to work OK now. It was just the index page that seemed to cause an issue.

I have now removed the top banner (didn't like it - and it got blocked by AdMuncher because of its size - so probably other ad blockers wouldn't like it either) and added a bit of padding at the top of the page. Strangely the padding available seems to vary from browser to browser so the 'gap' in Firefox is more pronounced. I have placed the ad in much smaller form in the menu and it takes you to the original ad on "You Can Help" page using an anchor link.

I'll redo the banner (and this time I'll keep the PhotoShop source - not the first time I have done that - you think I'd learn!). I agree it looks fuzzy.

Thanks guys for all the suggestions and help. Keep 'em coming.
Title: Re: First website for a client
Post by: Perry Mowbray on June 20, 2008, 07:57 AM
Rats, second attempt...

Looking good Carol!!  :Thmbsup:

Had the time to leisurely wander through your site, and here's a few thoughts...

Sorry if it's too pernickety (it's a fault of mine  :-[): I think it's looking really good.

Also, Nudone's comment about re-doing the banner when you can is perfect!
Title: Re: First website for a client
Post by: Carol Haynes on June 20, 2008, 08:10 AM
Yes I am aware of the news and links page problems.

I can't figure out how to get the menu and main body aligned correctly - there doesn't seem to be an border or padding on either so I can't see why they don't align.

I agree about the PDF version of the newsletter - unfortunately I am not editing or supplying the content. Hopefully it will get sorted.

The email form has validation - not sure what you mean. It only accepts an email address in valid format, and insists compulsory fields are filled.

I agree about the menu - maybe I will change that altogether. It was done for speed and it needs to be better.
Title: Re: First website for a client
Post by: Perry Mowbray on June 20, 2008, 08:34 AM
Yes I am aware of the news and links page problems.
-Carol Haynes (June 20, 2008, 08:10 AM)

Sorry: just thinking out loud...

I agree about the PDF version of the newsletter - unfortunately I am not editing or supplying the content. Hopefully it will get sorted.
-Carol Haynes (June 20, 2008, 08:10 AM)

Always a problem: do you need to invest in a PDF converter? There is a deal about to happen with Software995 (https://www.donationcoder.com/forum/index.php?topic=12041.msg117677#msg117677)??

The email form has validation - not sure what you mean. It only accepts an email address in valid format, and insists compulsory fields are filled.
-Carol Haynes (June 20, 2008, 08:10 AM)

My mistake then, sorry. I didn't go all the way through it, just typed and exited the field. You have validation on Submit.

I agree about the menu - maybe I will change that altogether. It was done for speed and it needs to be better.
-Carol Haynes (June 20, 2008, 08:10 AM)

What you've done is great. It's generally the case, especially with time limits (as you mentioned in your original post), that you need to get the project over the line. Fine tuning can come later...
Title: Re: First website for a client
Post by: Carol Haynes on June 20, 2008, 10:43 AM
Menu is now an unordered list - took me a while to work out how to sort out the correct CSS tags though!

Pictures in main body text are all now frames

The top of the menu and text are better aligned (though still not perfect).

Re. PDF stuff that is a problem that will be passing soon. Ideally the only PDFs on the site should be sponsorship forms and membership forms that need decent print quality. The content editor for the site is getting to grips with cutting down the rather verbose style of previous articles. Hopefully the whole thing will become a bit more 'multi media' orientated. Personally I'd rather look at pictures, find out about the kids and tecahers and their fmilies, hear them singing etc. than read long reports.

I have an idea for an article to follow the journey of some friends who delivered minibuses to the school from the UK by driving across Spain, North Africa and the Sahara - it would give a sense of place and I think could be interesting.

I am thinking about how to indicate the current page on the menu - not sure what would be the easiest way. One thought was to put each menu entry into a separate div on the template page and then on each page override the background colour of the div in the stlyesheet by a local page CSS tag. I'll have a play. Anyone got a better solution?
Title: Re: First website for a client
Post by: Perry Mowbray on June 20, 2008, 10:58 AM
Menu is now an unordered list - took me a while to work out how to sort out the correct CSS tags though!
-Carol Haynes (June 20, 2008, 10:43 AM)

Does the trick though: much easier to select.

Pictures in main body text are all now frames
-Carol Haynes (June 20, 2008, 10:43 AM)

Do you think they present better with a frame? I do  ;)

The top of the menu and text are better aligned (though still not perfect).
-Carol Haynes (June 20, 2008, 10:43 AM)

The pages with a heading look perfect to me!

Personally I'd rather look at pictures, find out about the kids and tecahers and their fmilies, hear them singing etc. than read long reports.
-Carol Haynes (June 20, 2008, 10:43 AM)

I'd be putting the long reports on a different page, so that people can still read them if they want to.

I have an idea for an article to follow the journey of some friends who delivered minibuses to the school from the UK by driving across Spain, North Africa and the Sahara - it would give a sense of place and I think could be interesting.
-Carol Haynes (June 20, 2008, 10:43 AM)

Sounds wonderful! Where can we join up??

I am thinking about how to indicate the current page on the menu - not sure what would be the easiest way. One thought was to put each menu entry into a separate div on the template page and then on each page override the background colour of the div in the stlyesheet by a local page CSS tag. I'll have a play. Anyone got a better solution?
-Carol Haynes (June 20, 2008, 10:43 AM)

Thats generally what I do, all depends on the style of page that you're following.

Following on from what you've done so far, I'd make the background something like a darkish grey: so highlight is black and current is a "lighter black".
Title: Re: First website for a client
Post by: Carol Haynes on June 20, 2008, 11:39 AM
OK - I have removed the roll over on the menu but it now indicates which page you are on.

Getting things to line up is enough to drive you to drink!

Look at these two:

IE: [ You are not allowed to view attachments ]  FF: [ You are not allowed to view attachments ]

They are both to the same scale and same bit of page:

Title: Re: First website for a client
Post by: cranioscopical on June 20, 2008, 12:03 PM

Haven't commented before as I don't know this stuff at all, but here's a non-expert (you can say that again!!) pov.

I like the site.  I think the principal images are well chosen and engage attention.


Have you considered a colour difference between the "body" of the page and the border (that you don't use)?
-Perry Mowbray (June 20, 2008, 07:57 AM)

FWIW,
I second that.  Something about the page was disturbing me and that's it.

Also agree about redoing the banner, I don't think your improvement to the text is enough, Carol.  (Personally, I quite like the different head sizes, though.)

I wholly understand your dismay about having to recreate the file (pity about the flattening, you need something to back up every iteration of that stuff  automatically, eh?) but consider the fact that you'll be using this as a 'reference' for future clients. Every improvement you make both upgrades this site and enhances your sales tools. It has to be worth it in the long run.

(Am I the only one who doesn't like that image of the wall?  It's hard work to make out what it says.)



Title: Re: First website for a client
Post by: Carol Haynes on June 20, 2008, 12:51 PM
Pink excess space now (matches current page marker in the menu - taken from one of the kids clothes).

I agree the wall isn't ideal but it is a real symbol of the school and what it stands for.

Try viewing the page with page reader software and it will read the wall to you ;)
Title: Re: First website for a client
Post by: Carol Haynes on June 20, 2008, 07:41 PM
Here's a poser - can anyone help ...

If I open a website in IE 7 and tap CTRL + repeatedly the page scales up brilliantly.

If I do the same in FireFox 2 the text scales up but other page elements are unaffected.

How do you code so that a whole page will scale properly in both IE and FF (and Opera, Safari etc. if it comes to that)?
Title: Re: First website for a client
Post by: jgpaiva on June 20, 2008, 07:48 PM
Carol: that's just ff2's default behaviour, it's supposed to work like that.
On ff3, that isn't the default anymore, but it's still available as an option.
Title: Re: First website for a client
Post by: Carol Haynes on June 20, 2008, 09:08 PM
Thanks.
Title: Re: First website for a client
Post by: Curt on June 21, 2008, 05:45 AM
I think it is a fine job you are doing, Carol, and the page is really getting better and better. However, a minor detail: Do you have the original wall.jpg image? The displayed copy was compressed wrongly or too hard; the text is a little too hard / difficult to read.
Title: Re: First website for a client
Post by: Carol Haynes on June 21, 2008, 06:43 AM
Thanks - I'll see if I can find the original
Title: Re: First website for a client
Post by: Perry Mowbray on June 21, 2008, 09:26 AM
The displayed copy was compressed wrongly or too hard; the text is a little too hard / difficult to read.
-Curt (June 21, 2008, 05:45 AM)

I thought it was too sharpened? Though I didn't look closely.

I agree: it's getting better and better!!
Title: Re: First website for a client
Post by: Curt on June 22, 2008, 09:10 AM
... too sharpened?

I agree: it's getting better and better!!
-Perry Mowbray (June 21, 2008, 09:26 AM)

- you may have been right, Perry Mowbray, but now there is a new picture, and it is just fine. Though they didn't take the time and effort to first cleanse the wall it is easy to read, and the colours blend fine with the page itself, which is still getting even better.
Title: Re: First website for a client
Post by: Carol Haynes on June 22, 2008, 10:38 AM
Just done a load of new updates.

The news section has changed completely.

The new wall photo is better but unfortunately the wall had got dirty. We are still trying to track down the original wall photo so that I can produce a decent version but at least it is readable now.

I have also tidied up all the picture positioning and it now either uses straight text formatting if it is in a clear space within text or a float style to embed it cleanly with some padding around.

I have also added a PHP script to force the PFD membership application form (the menu 'Become a friend of GOVI') to download rather than open in a browser window. I think I may actually point this to the 'You can help page' and provide the option to download or open the PDF form. Maybe I should make it a fillable form on a webpage which can then be printed and posted. Since it involves bank details I don't want to have to get involved in secure web transfer.

Next things to do -


Not sure I want to get into the last of those as it is pretty easy to add articles now 'cos they are just dropped into a simple template. The person who is editing articles isn't really keen to make it a site where lots of people can contribute directly - and I suppose realistically at this point the contributions are from a fairly limited pool of contributors that have direct knowledge.
Title: Re: First website for a client
Post by: Perry Mowbray on June 22, 2008, 09:40 PM
Just done a load of new updates.
-Carol Haynes (June 22, 2008, 10:38 AM)

I reckon!!

The news section has changed completely.
-Carol Haynes (June 22, 2008, 10:38 AM)

 :Thmbsup: Much easier for finding the actual bit you want to read...

The new wall photo is better but unfortunately the wall had got dirty. We are still trying to track down the original wall photo so that I can produce a decent version but at least it is readable now.
-Carol Haynes (June 22, 2008, 10:38 AM)

You can't "clean" it?  :D

I have also added a PHP script to force the PFD membership application form (the menu 'Become a friend of GOVI') to download rather than open in a browser window. I think I may actually point this to the 'You can help page' and provide the option to download or open the PDF form. Maybe I should make it a fillable form on a webpage which can then be printed and posted. Since it involves bank details I don't want to have to get involved in secure web transfer.
-Carol Haynes (June 22, 2008, 10:38 AM)

Ummm... I just tried it now and it loads the help.html page. Which is also a little confusing because the menu, although correct, was not what I clicked on.  :huh: Maybe you removed the script?

Next things to do -

  • add RSS news feed.
  • sort out banner image.
  • sort out the links page and make it useful.
  • consider using dynamic news page generation so that others can add and comment on articles.

Not sure I want to get into the last of those as it is pretty easy to add articles now 'cos they are just dropped into a simple template. The person who is editing articles isn't really keen to make it a site where lots of people can contribute directly - and I suppose realistically at this point the contributions are from a fairly limited pool of contributors that have direct knowledge.
-Carol Haynes (June 22, 2008, 10:38 AM)

Would be nice if the links are searchable, eh? Well, I know they are now (within the browser), but if you categorised them and/or tagged them (especially if they could grow in number), returning a search result would be interesting.

As for news, you couldn't just point to a blog? A real blog would have its own RSS feed as well.

Great work Carol!!
Title: Re: First website for a client
Post by: Carol Haynes on June 23, 2008, 05:26 AM
Does anyone know of a PHP/MySQL blog that can be embedded in a DIV so that you can just see the content (not all the other stuff you usually get in something like WordPress)?

I know you can probably do this in WordPress by using a customised theme but I didn't want to go down the road of trying to figure out how to create a suitable theme - looks time consuming and not totally straight forward.

Ideally I would like something that you can just take the content section (and possibly a search module) and embed it into the news window and then access the admin side through a separate URL so that articles can be added, edited etc.
Title: Re: First website for a client
Post by: Perry Mowbray on June 23, 2008, 07:35 AM
What about doing the integration through an RSS Feed?

Google have some neat javascript code that imbeds RSS feeds into DIV objects.
Title: Re: First website for a client
Post by: Carol Haynes on June 23, 2008, 08:28 AM
I think I have figured a way to do it with WordPress
Title: Re: First website for a client
Post by: Carol Haynes on June 23, 2008, 04:01 PM
RSS feed added.
Title: Re: First website for a client
Post by: Carol Haynes on June 24, 2008, 02:03 PM
Could some kind soul check out the latest incarnation of www.friendsofgovi.org.uk in Internet Explorer 6. I don't have it on my system except in a VMWare installation of Windows 98 and I am getting bad whole page flickering from the menu.

I had to change the CSS tags on div:hover in the menu as it didn't seem to work in IE6 at all. I have instead used a:hover in the menu which works but every time I move the mouse down the menu the whole page flickers and I can't seem to work out why. Is it an ancient hangover of Windows 98 version of IE6 or have I got real problems?

Cheers
Title: Re: First website for a client
Post by: Perry Mowbray on June 24, 2008, 10:28 PM
Could some kind soul check out the latest incarnation of www.friendsofgovi.org.uk in Internet Explorer 6. I don't have it on my system except in a VMWare installation of Windows 98 and I am getting bad whole page flickering from the menu.

I had to change the CSS tags on div:hover in the menu as it didn't seem to work in IE6 at all. I have instead used a:hover in the menu which works but every time I move the mouse down the menu the whole page flickers and I can't seem to work out why. Is it an ancient hangover of Windows 98 version of IE6 or have I got real problems?
-Carol Haynes (June 24, 2008, 02:03 PM)

Looks OK here Carol.

The hover over the Creadit Card doesn't highlight as the others do, and the text dims: ie the link hovers OK. Correction: Just on the News and Help pages.

Your RSS logo is antialiased for the cream background, you should probably swap the image that is antialiased to the Indian Red (???) background.

Help, Become_A_Friend & Links pages have centred titles where all the others are left aligned.

News and Help do not have the RSS logo/link.

Have you thought about adjusting the colours of your links to match the colours of the site?

What about using an image to mark the TANGO links? In fact it's not a bad idea to indicate links that access external sites.
Title: Re: First website for a client
Post by: Carol Haynes on June 25, 2008, 05:57 AM
The hover over the Creadit Card doesn't highlight as the others do, and the text dims: ie the link hovers OK. Correction: Just on the News and Help pages.

Help, Become_A_Friend & Links pages have centred titles where all the others are left aligned.

News and Help do not have the RSS logo/link.

All the pages should have identical menus because they all come from a template and all the icons should turn red when hovered over. Try emptying the browser cache or refreshing individual pages.

Your RSS logo is antialiased for the cream background

Thanks - didn't notice that. (Can't see the wood for the trees any more which is why it is great to get fresh eyes to have a look).

Changed it for a different logo (and removed text - anyone who wants RSS is likely to know what it is and if they don't they can click and find out ;))

Help, Become_A_Friend & Links pages have centred titles where all the others are left aligned.

Fixed.

Have you thought about adjusting the colours of your links to match the colours of the site?

Changed to use picture frame colour for menu text and hover colours. What do you think?

Have you thought about adjusting the colours of your links to match the colours of the site?

I was thinking of that - I'll sort it out when I sort out the links page.

Thanks Perry - appreciated.
Title: Re: First website for a client
Post by: Perry Mowbray on June 25, 2008, 06:18 AM
Picture frames: if it was me I'd be keeping them simple. Though I don't mind what you've done.

Odd concerning the cache...

The new RSS logo is probably better. I think one of the struggles with all these graphics is to get them to fit within your site's style. Too many different types of icons and I think it makes the site look "disjointed" type thing.

Have you tried making the outside border a slightly lighter/darker shade? I wonder if it may help define the content of your page more strongly??
Title: Re: First website for a client
Post by: Veign on June 25, 2008, 07:09 AM
Not sure if this was mentioned but your Design By link at the bottom of the main page doesn't work.
Title: Re: First website for a client
Post by: Carol Haynes on June 25, 2008, 07:21 AM
Picture frames: if it was me I'd be keeping them simple. Though I don't mind what you've done.

Odd concerning the cache...

The new RSS logo is probably better. I think one of the struggles with all these graphics is to get them to fit within your site's style. Too many different types of icons and I think it makes the site look "disjointed" type thing.

Have you tried making the outside border a slightly lighter/darker shade? I wonder if it may help define the content of your page more strongly??
-Perry Mowbray (June 25, 2008, 06:18 AM)

Colours changed - I think it looks better

Not sure if this was mentioned but your Design By link at the bottom of the main page doesn't work.
-Veign (June 25, 2008, 07:09 AM)

Thanks - really don't know how that happened!!! It was set correctly - I must have twiddled the mouse wheel at the wrong moment!!
Title: Re: First website for a client
Post by: jgpaiva on June 25, 2008, 07:43 AM
Just giving some feedback on the navigation panel: I like the new colors (the darker red) way better than the previous ones.

Also, I think you should move "A UK Charity supporting "The Gambian Organisation for the Visually Impaired"
(Registered Charity 1070173)" somewhere else and move the top banner up. I say this because it's stealing too much screen real-estate. One of the rules with web pages is to not make them long, but if the top banner and text are taking 1/3rd of the screen, this task becomes more complicated.
Title: Re: First website for a client
Post by: Perry Mowbray on June 25, 2008, 08:00 AM
Also, I think you should move "A UK Charity supporting "The Gambian Organisation for the Visually Impaired"
(Registered Charity 1070173)" somewhere else and move the top banner up. I say this because it's stealing too much screen real-estate. One of the rules with web pages is to not make them long, but if the top banner and text are taking 1/3rd of the screen, this task becomes more complicated.
-jgpaiva (June 25, 2008, 07:43 AM)

I'd have to agree. Can it go at the bottom of the navigation panel? Maybe behind a graphic? Or maybe a small one liner under the banner?

I really like the darker border  :Thmbsup: Really defines the content, eh?
Title: Re: First website for a client
Post by: Carol Haynes on June 25, 2008, 08:04 AM
OK I have moved it to the bottom - better? The message is equally clear at the top of the home page in the main text anyway.

I have to agree - changing the colour makes it pop a bit more - I have changed the picture frames to match the background to.

Incidentally all of these colours came from the banner photos.
Title: Re: First website for a client
Post by: Perry Mowbray on June 25, 2008, 08:44 AM
Carol: I've just been playing with your code locally and I think that the Paragraph tags in the body is what is mucking up the vertical alignment. Try changing them to a Span maybe?

Not sure about the other pages, I was just playing with the main page.
Title: Re: First website for a client
Post by: Carol Haynes on June 25, 2008, 09:12 AM
Sorry not sure what you mean - can you give me an example? (use the BBL code, #, tag to enclose the example)
Title: Re: First website for a client
Post by: Perry Mowbray on June 25, 2008, 09:27 AM
You had:
Code: HTML [Select]
  1. <p align="left">Friends of GOVI has been a <a href="http://www.charity-commission.gov.uk/registeredcharities/showcharity.asp?regno=1070173" target="_top">registered UK charity</a> since 1998. We support the only School for the Blind in the Gambia working with and alongside GOVI, The Gambian Organisation for the Visually Impaired.
  2. Many of the children come from very poor families and depend upon having two meals a day at the school so this year our main priority will be to fund those meals.</p>

I changed it to:
Code: HTML [Select]
  1. <span align="left">Friends of GOVI has been a <a href="http://www.charity-commission.gov.uk/registeredcharities/showcharity.asp?regno=1070173" target="_top">registered UK charity</a> since 1998. We support the only School for the Blind in the Gambia working with and alongside GOVI, The Gambian Organisation for the Visually Impaired.
  2. Many of the children come from very poor families and depend upon having two meals a day at the school so this year our main priority will be to fund those meals.</span>

That aligned the two columns locally for me...
Title: Re: First website for a client
Post by: jgpaiva on June 25, 2008, 09:47 AM
OK I have moved it to the bottom - better?
-Carol Haynes (June 25, 2008, 08:04 AM)
Yep, I think you're doing well, the site is looking good :)
Title: Re: First website for a client
Post by: Perry Mowbray on June 25, 2008, 10:07 AM
Yep, I think you're doing well, the site is looking good :)
-jgpaiva (June 25, 2008, 09:47 AM)

I second that!!  :Thmbsup:
Title: Re: First website for a client
Post by: Carol Haynes on June 25, 2008, 10:31 AM
OK I have moved it to the bottom - better?
-Carol Haynes (June 25, 2008, 08:04 AM)
Yep, I think you're doing well, the site is looking good :)
-jgpaiva (June 25, 2008, 09:47 AM)

Thanks

You had:
Code: HTML [Select]
  1. <p align="left">Friends of GOVI has been a <a href="http://www.charity-commission.gov.uk/registeredcharities/showcharity.asp?regno=1070173" target="_top">registered UK charity</a> since 1998. We support the only School for the Blind in the Gambia working with and alongside GOVI, The Gambian Organisation for the Visually Impaired.
  2. Many of the children come from very poor families and depend upon having two meals a day at the school so this year our main priority will be to fund those meals.</p>

I changed it to:
Code: HTML [Select]
  1. <span align="left">Friends of GOVI has been a <a href="http://www.charity-commission.gov.uk/registeredcharities/showcharity.asp?regno=1070173" target="_top">registered UK charity</a> since 1998. We support the only School for the Blind in the Gambia working with and alongside GOVI, The Gambian Organisation for the Visually Impaired.
  2. Many of the children come from very poor families and depend upon having two meals a day at the school so this year our main priority will be to fund those meals.</span>

That aligned the two columns locally for me...
-Perry Mowbray (June 25, 2008, 09:27 AM)

Interesting - is this in IE 6? I can't see any difference (except that it screws up the spacing with the image below) in IE 7. In FF2 it does change the alignment to line up with the sidebar but it also screws up the image spacing.

I have a standard single style for images in the main part of the page which doesn't add margin at the top - this is because pictures are always put at the top of paragraphs or the top of the div so I don't want it shifting down.

The other disadvantage of using span like this is that I lose control over the p style changing font face site wide. I suppose I could add a global body text style but then I would have to edit the whole site to apply it to all the text!

Given that it doesn't fix the problem in both of the two common browsers I think I will not change to <span. - at least not at the moment.

I have however added a global style change for p and h3 which seems to align the columns better in FF2 (doesn't seem to do much in IE7 though - what about IE6?).

Safari, FF3 and Opera seem OK now.

Anyone using any other browser got any comments?
Title: Re: First website for a client
Post by: Perry Mowbray on June 25, 2008, 10:53 PM
No, I was using FF3! Sorry it wasn't a compete answer  :-[ I guess that I hoped that finding the culprit was halfway to finding the problem  :huh:

Interesting - is this in IE 6? I can't see any difference (except that it screws up the spacing with the image below) in IE 7. In FF2 it does change the alignment to line up with the sidebar but it also screws up the image spacing.
-Carol Haynes (June 25, 2008, 10:31 AM)

No, it was in FF3  :-\

I have a standard single style for images in the main part of the page which doesn't add margin at the top - this is because pictures are always put at the top of paragraphs or the top of the div so I don't want it shifting down.

The other disadvantage of using span like this is that I lose control over the p style changing font face site wide. I suppose I could add a global body text style but then I would have to edit the whole site to apply it to all the text!
-Carol Haynes (June 25, 2008, 10:31 AM)

Sure: its never easy. CSS is great, but if you have lots of little breaks in the rules you get lots of styles.

I have however added a global style change for p and h3 which seems to align the columns better in FF2 (doesn't seem to do much in IE7 though - what about IE6?).
-Carol Haynes (June 25, 2008, 10:31 AM)

Here it is in IE6:
[ You are not allowed to view attachments ]
Title: Re: First website for a client
Post by: Carol Haynes on June 26, 2008, 03:42 AM
That's what I am getting too and similar in IE7.

Currently alignment seems to be working fine in FF2, F3, Opera and Safari. It is only IE 6  and 7 that seems to refuse to do what it is told! I haven't tried any of the other browsers.

I think I am just going to have to live with the IE variation - I am not sufficiently up on how to force different behaviours in different browsers and at this rate I think I could spend my life getting nowhere with this!!!  :wallbash:

Can anyone offer a simple solution?
Title: Re: First website for a client
Post by: Carol Haynes on June 26, 2008, 12:42 PM
Don't you just love it when software is 'helpful' !!!

I found this in the template auto generated by Dreamweaver:

[Select]
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColLiqHdr #sidebar2, .thrColLiqHdr #sidebar1 { padding-top: 30px; }
.thrColLiqHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

I removed it and guess what .... fixed in IE 6 and 7 .... WTF!

ARGHHHHHHH !
Title: Re: First website for a client
Post by: cranioscopical on June 26, 2008, 03:47 PM
I found this in the template auto generated by Dreamweaver:
-Carol Haynes (June 26, 2008, 12:42 PM)

At least you found it and it's fixed!  Good for you!

Pity the background's changed to lime green with puce and orange text though... ;)
Title: Re: First website for a client
Post by: Carol Haynes on June 26, 2008, 04:06 PM
Ha ha - had me for a moment (NOT!)
Title: Re: First website for a client
Post by: Perry Mowbray on June 26, 2008, 08:29 PM
I removed it and guess what .... fixed in IE 6 and 7 .... WTF!
-Carol Haynes (June 26, 2008, 12:42 PM)

I agree: WayTooFantastic!!  :)

Problem solved, not only this time but in the future too  :Thmbsup:
Title: Re: First website for a client
Post by: Carol Haynes on June 27, 2008, 06:24 AM
I must admit it beggars belief that Adobe would insert that comment into their templates - and it isn't helped by the fact that DreamWeaver colour coding makes comments drop into the background to such an extent that you have to actively choose to look for them to read them!

I can understand that they want to make users aware of the issue but surely the best approach would be to have a standard IE hacks CSS file that templates link to - at least you would then see it in the CSS styles list and be able to edit it as required.

Madness - how many people have spent hours like me trying to work out why IE refused to move items no matter what you did?
Title: Re: First website for a client
Post by: Perry Mowbray on June 27, 2008, 07:46 AM
Makes sense when you realize: obvious really  :-[

Is there a reason to put some IE hacks in the page? I know that I have one on mine that's put there definitely in preference to the external CSS file. Now you've made me wonder why...
Title: Re: First website for a client
Post by: Carol Haynes on June 27, 2008, 08:16 AM
Maybe I am naive - but if there is an external IE hacks CSS file it is at least obvious that it is there. If you put the hack in your HTML you know about it - having to read someone else's HTML in a design package like Dreamweaver in search of annoying and pointless CSS styles hidden in comments ....
Title: Re: First website for a client
Post by: Carol Haynes on July 07, 2008, 08:01 PM
If anyone would like to see a video of the children singing checkout the home page (http://www.friendsofgovi.org.uk) (if you don't see instructions above the main image refresh your browser window).

I am going to add a number of videos over the coming weeks.
Title: Re: First website for a client
Post by: cranioscopical on July 07, 2008, 10:55 PM
Straight in at #1  :)

I like the little girl in the front who keeps her back to the camera.
Many pop idols should emulate that approach.

Title: Re: First website for a client
Post by: Carol Haynes on July 08, 2008, 04:50 AM
Yes I must admit she is my favourite - she is rather smily in the photo that you click though ;)