Look and feel of my site

Apologies if this is not allowed, however I struggle artistically with websites and have been playing around with the following page and it doesnt feel right.

I require some artistic input and wondered if someone could cast their eye.
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Hi Nick,
I do have some comments and will try to summarize them, of course they're my personal opinion and others might see it differently

  • There seems to be lots of issues with the CSS/HTML, it doesn't show correctly on other browsers than IE, for example in FireFox the layout is left aligned not centered, and the footer area is shifted behind the content and almost not visible, also the footer links are all over the place.
  • Slightly stretch the background image width, I can see a big black area on both sides, although I have a widescreen resolution, but that would be the case with so many visitors
  • Also some weird behaviour in IE, open the site in a high resolution where you can see the footer while top links are accessible, now hover over the top menu home link "icon" the footer jumps up and takes out a portion of the black area
  • A hover effect on the top menu items like "About us, etc..." might be good, like the one you already have for the homepage icon
  • Give some padding/margin to the title in yellow (Swing Setter Pro) to make space between it and the below text, also try using a different color and see if you would get a better result for the eye
  • the text needs some more line spacing and formatting, also its container needs some padding as it's almost touching the black edges
  • The footer might look better with a slightly darker colour, something more elegant than this gray
  • Also try removing the extra space below the footer so that there would be no background image under the footer, eliminating the extra page scroll and also might go better with the fact that the top part doesn't have any spacing from the top
  • Finally if possible, try setting some semitransparency on the area of the layout on the background, you can do this with the background itself, but then careful with the centering of the layout that it falls on the darkened area of the background this can much enhance the visibility of the site
This is all I can think about for now, but mostly important, before trying to work on the looks of the page, it has to be fixed to work on other browsers.

For your information the old site http://www.golflab.tv/ works perfectly in all browsers with very slight inconsistency which would barely be noticed by normal users

Nick_SDAuthor Commented:
Hi , thanks very much for your notes , I think ive solved some issues, I honestly dont undersand CSS and why i have to make changes for CSS to work with all browsers and even versions of browsers., so complicated its weird.

Could you explain to me your last point, im not sure what you are getting at

Finally if possible, try setting some semitransparency on the area of the layout on the background, you can do this with the background itself, but then careful with the centering of the layout that it falls on the darkened area of the background this can much enhance the visibility of the site

Tom BeckCommented:
I totally get what Remorina is saying with regards to the background. It is generally distracting to the other content. It's like content overlapping content. If it were dulled down (semi-transparent) it would look more like a backdrop for the content on top. In an image editing program, cut the color saturation and intensity down until it has an overall grayish cast. Also, it's going to look different on different screens and at different resolutions because it does not repeat and/or is not large enough to fill any screen. Some folks are going to see the black background behind it.
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Nick_SDAuthor Commented:

Would you say all the background or just where the content is?
also how do i solve the "not large enough" problem

Tom BeckCommented:
The whole background should be uniform so as not to distract from the content.
One way to solve the background size problem widthwise is to join a mirror copy of the original image to the right edge of the original. You might have to fuss with the seam to get it to look natural. With it dulled down, it will be less noticable anyway.
A trick to handle the height would be to start with a picture in which the bottom edge is all green lawn. Then, create a background for the page that repeats the green lawn instead of a black background. Then put your golf course picture on top of that.
Hi Nick,
I can understand how frustrating it could be getting a website to work flawlessly on all browsers, it doesn't necessarily have to be 100% perfect on all browsers and versions, but at least functional.
And I see you've done a great job, now it looks a lot better on FireFox.

In order to better explain my last point, as I see you've created some kind of a fade, which works on the whole background image and in IE only.
It just needs slight darkening and getting your contents infocus.

I've attached some images to show what I mean with this point, I've also attached the background alone with the effects applied, you can try replacing your background image with it and take a look, also it might still require some adjustments in terms of positioning so that the darkened area would be in correct place.
hope it helps


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.