Back To Website Reviews

SITE REVIEW: Stardrop - online holistic products and more

  • KeithB
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Nov 07, 2006
  • Posts: 6
  • Status: Offline

Post November 7th, 2006, 1:17 am

Dear all,

http://www.stardrop.co.uk

I'd be very grateful for your views on my new site. It's a webstore for the online sale of essential oils, incense, soaps and other aromatherapy products.

It also includes self awareness and motivational products.

Do please be as honest as you feel able - I have broad shoulders!

Many thanks,
Keith.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 7th, 2006, 1:17 am

  • Ifrit
  • Graduate
  • Graduate
  • User avatar
  • Joined: Jun 07, 2004
  • Posts: 196
  • Loc: Portugal
  • Status: Offline

Post November 7th, 2006, 4:59 am

Well ok then.

1st - Try to avoid using Bold fonts when your mouse hovers the link, what this makes is stretch the fonts, and its a layout breaker, not so much in some cases, but in your top and bottom menus, this happens, and its just horrible, the links move around when you over above one of them and its just not very user friendly.

2nd - I'm having seizures because your text is blinking :P honestly, take that out.

3rd - Aestehtically, there are many things i dont like, but its personal opinion - use CSS borders on your tables (or dont use tables!), try making your tables border="1", then style it with style="border:1px solid white;" just to see how it looks, im sure itl be much better, the cells are pretty nasty, to be honest.

Other than that, good job, just one last thing, my screen is quite wide, theres alot of white space between your elemtents, this is due to having a stretched layout, have you tried to give your website a static width?
  • KeithB
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Nov 07, 2006
  • Posts: 6
  • Status: Offline

Post November 7th, 2006, 5:36 am

Thanks for that Ifrit - really very helpful.

I've used Front Page for the design - please could you tell me how to do the static width?

As for the blinking, yes I agree its annoying. I did it to stop the underlining being shown but if there was another way then I would use that.

Perhaps I can aslo do something about the bold on hover.
  • Ifrit
  • Graduate
  • Graduate
  • User avatar
  • Joined: Jun 07, 2004
  • Posts: 196
  • Loc: Portugal
  • Status: Offline

Post November 7th, 2006, 8:12 am

Alrighty, im glad to lend a hand :D

There are many ways to create CSS styles, you can define the styles in your layout file, you can also make a external file containing these styles, or you can do it directly on the code tags, whichever suits your needs and preference.

I will explain how to achieve all those things by defining the styles on your layout directly, i recommend external files, but for a CSS "newbie" i think its better if we start out like this.

Firstly, remove those elements we spoke about, the blinking, and the bold on-hover effect.

Now go to the code pane on frontpage, the HTML editor, i dont use frontpage so i dont know where it is... i hope you can figure it out?

Find the following tag: </head>

Exactly Before it, type this:

Code: [ Select ]
<style type="text/css">
a:link { text-decoration: none; font-weight:normal; }
a:visited { text-decoration: none; font-weight:normal; }
a:hover { text-decoration: none; font-weight:normal; }
a:active { text-decoration: none; font-weight:normal; }
a { font-family: Arial, Helvetica, sans-serif; }
</style>
  1. <style type="text/css">
  2. a:link { text-decoration: none; font-weight:normal; }
  3. a:visited { text-decoration: none; font-weight:normal; }
  4. a:hover { text-decoration: none; font-weight:normal; }
  5. a:active { text-decoration: none; font-weight:normal; }
  6. a { font-family: Arial, Helvetica, sans-serif; }
  7. </style>


save your file, and there you go, you no longer have underlines on your links, ever.

we also defined a font type for your whole site.

at the same time, we also removed the bold on-hover "effect".

Now, to give your table a fixed width (If you want to, it was just a suggestion) find the following piece of code on your HTML pane (we will also center the whole thing in the middle of the screen):

right after the <body> tag, enter a new table:

<table width="760" align="center">

then, right after the </body> tag, enter:

</table>

many people will say you should drop tables and move to pure CSS, but i believe that that is something you should learn by yourself whenever you want
  • KeithB
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Nov 07, 2006
  • Posts: 6
  • Status: Offline

Post November 8th, 2006, 3:37 am

That is so neat!

I've placed the css code on the home page and viewed in IE and the blinking and bold has disappeared completely.

It still blinks etc in Firefox and I was wondering if you might know why?

Keith
  • Ifrit
  • Graduate
  • Graduate
  • User avatar
  • Joined: Jun 07, 2004
  • Posts: 196
  • Loc: Portugal
  • Status: Offline

Post November 10th, 2006, 5:58 am

You still have "text-decoration: blink;" styling, find all instances of this little snippet in your code and remove them :-)

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 38 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.