My new lay out so far..

Hi Please can you check out a new home page layout for my site.

Which of the 3, works better? please note they are still in a bit of a rough state..

http://www.capoeiracanal.co.uk/indexdrop-box2-V4.php
http://www.capoeiracanal.co.uk/indexdrop-box2-V3.php
http://www.capoeiracanal.co.uk/indexdrop-box2-V5.php

Cheers

Jacob

Jacob, this site is coming along in leaps and bounds. I like the faded background idea, but it seems to have become pixelated when you've exported it. try exporting it into a jpg format and see if that helps.

I personally prefer version 5, it looks neater, but this will also beed some work. for the content background image i would recommend making this a 1px high image and then repeating it along the horizontal axis. this will cut down on the download times for the image. finally the colour of the background image in the content area doesn't go with th erest of the site. try some different combinations and see how they look.

for your logo, have you thought of changing this to text? take a look at this css drop shadow technique. you can then place your keyword rich site name within this and it will help with your SEO (make sure you place the text as <h1>)

hope this helps

Stew

__________________
WelshStew Site Admin
If you think I've helped, click the "Thanks"
tierney rides tboard - uk site | xtreme wales - extreme clothing
WebForumz - facebook | LinkedIn

Well thank you.. that is what I like to hear!

Yes, I will change them over to jpg!

Yes it is cleaner. I will need to do some work to get the dropdown menu to view, for the two divs to sit in position and adjust the spacing, as you may have seen there is a gap at the bottom of the page which I haven't been able to deal with yet. I will email the creator of the Nav bar for help with this.

I am not sure about 1px high image.. tutorial?

I will be playing round with the colors.

Good point I will look into it!

That's all a great help!

something like this:

Code: Select all

divname
{ 
background-image: 
url('bgimage.jpg');
background-repeat: repeat-y
}

__________________
WelshStew Site Admin
If you think I've helped, click the "Thanks"
tierney rides tboard - uk site | xtreme wales - extreme clothing
WebForumz - facebook | LinkedIn

to make it a gradient do I have to make a 3 px img or somthing?y

The logo is an important feature though isn't it? I suppose the is no way to recreate it using css?

yes, you make your image as you want it for testing purposes. then reduce the height to 1px / 2px or whatever works, and then repeat this along the y axis to make it appear like a larger image.
sorry, i didn't make myself clear. the logo image would stay, but for the text next to it you could do this with css.

As search engines are unable to read images at present, the more relevant text you have on your site the better.

I just thought it would work well, enhance your understanding of the power of css, and help with your SEO (if done correctly i.e. semantically - using <h1>)

__________________
WelshStew Site Admin
If you think I've helped, click the "Thanks"
tierney rides tboard - uk site | xtreme wales - extreme clothing
WebForumz - facebook | LinkedIn

oh.. that's cleaver!

Well the text is part of the logo?

also.. I understand that you should apply the tags <h1>, <h2> and so on to key words, but can you repeat the amount of times you use the same tag on a page?

yes, so keep the logo image, but change the logo text to real text so that the search engines can read it.

__________________
WelshStew Site Admin
If you think I've helped, click the "Thanks"
tierney rides tboard - uk site | xtreme wales - extreme clothing
WebForumz - facebook | LinkedIn

but that would mean changing the design of the logo ? I cant re-produce that font and graphics using css can I ? what about having it as a separate link image using href & alt ?

what font is it?

__________________
WelshStew Site Admin
If you think I've helped, click the "Thanks"
tierney rides tboard - uk site | xtreme wales - extreme clothing
WebForumz - facebook | LinkedIn

You can use an image replacement technique to keep your logo and have accessible text.

Alternatively, you can just add alt text to your image. This may not work so well for SEO, however, because alt text is open to keyword stuffing.

Actually I have no idea, I think it may be made up? I can find out.

...Oh I am sorry, I am not with it. I can see that the text is fairly straight forward and if I find out what font it is I will be able to produce that exact effect or there abouts using CSS!

Er...

Only if your visitors have the same font installed on their computer, which is most unlikely.

So if I am going to replace the logo with text the is no way of making it look the same then?

How can I find out how to do this?

I don't think reducing the image is going to work. the is a gray line within the image that needs to be in place for the hover effect to work.

Attached Images

page4c_back.jpg (17.7 KB, 5 views)

http://www.mezzoblue.com/tests/revis...e-replacement/

I recommend the Gilder-Levin method, because it offers almost perfect accessibility (the only failure is that the underlying text cannot be resized to beyond the boundaries of your image).

Ideally, you would find a cunning way to separate the background image from the grey line, and consolidate all your different gradient backgrounds into one background (don't change colours). At the moment it's costing you 92 kb, and that's while you still have crappy dithered backgrounds. It will cost you more when you replace them with smooth gradients.