My new lay out so far..

Oak · February 26th, 2008, 09:36 AM

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

welshstew · February 26th, 2008, 10:11 AM

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

Oak · February 26th, 2008, 10:34 AM

Quote:

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.

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

Yes, I will change them over to jpg!

Quote:

I personally prefer version 5, it looks neater, but this will also beed some work.

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.

Quote:

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 color 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.

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

I will be playing round with the colors.

Quote:

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>)

Good point I will look into it!

That's all a great help!

welshstew · February 26th, 2008, 10:55 AM

something like this:

Code:

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

Oak · February 26th, 2008, 04:46 PM

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?

welshstew · February 27th, 2008, 03:25 AM

Quote:

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

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.

Quote:

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

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>)

Oak · February 27th, 2008, 05:39 AM

Quote:

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.

oh.. that's cleaver!

Quote:

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.

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?

welshstew · February 27th, 2008, 05:53 AM

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

Oak · February 27th, 2008, 06:03 AM

Quote:

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

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 ?

welshstew · February 27th, 2008, 06:31 AM

what font is it?

MikeHopley · February 27th, 2008, 06:51 AM

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.

Oak · February 27th, 2008, 06:53 AM

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!

MikeHopley · February 27th, 2008, 02:11 PM

Quote:

Originally Posted by Oak

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.

Oak · February 27th, 2008, 04:40 PM

Quote:

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?

Quote:

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

How can I find out how to do this?

Oak · February 27th, 2008, 05:14 PM

Quote:

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.

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.

MikeHopley · February 28th, 2008, 05:17 AM

Quote:

Originally Posted by Oak

How can I find out how to do this?

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).

Quote:

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.

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.

Oak · February 28th, 2008, 08:19 AM

Quote:

what font is it?

Lithos.

Quote:

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).

Cheers

Quote:

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.

Oh.. I like the changing colors.. boo hoo.. The gradients for V5 were changed yesterday? However I am sure the point still stands and will follow your suggestion.

MikeHopley · February 28th, 2008, 08:54 AM

You might also want to see what happens to your hover menu when a user resizes the font.

Oak · February 28th, 2008, 09:33 AM

Quote:

You might also want to see what happens to your hover menu when a user resizes the font.

How do I do this?
Tools,Options,Font size?

Oak · February 28th, 2008, 10:13 AM

Quote:

Ideally, you would find a cunning way to separate the background image from the grey line

I cant work out how to call it.

I tried this but what should go here * ?

HTML Code:

#hoverpage ul#outer li div * {background-image: url(img/grayline.jpg); background-position: 21px 0;}

I am thinking I should just recreate this bellow, then make it unique to the grayline.jpg? but don't see how

HTML Code:

#hoverpage ul#outer li div img {border:1px solid #888; float:right; margin:0 5px 5px 5px;}