SITE REVIEW: Stardrop - online holistic products and more

  • KeithB
  • Newbie
  • Newbie
  • KeithB
  • Posts: 6

Post 3+ Months Ago

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.
  • Ifrit
  • Graduate
  • Graduate
  • User avatar
  • Posts: 196
  • Loc: Portugal

Post 3+ Months Ago

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
  • KeithB
  • Posts: 6

Post 3+ Months Ago

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
  • Posts: 196
  • Loc: Portugal

Post 3+ Months Ago

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
  • KeithB
  • Posts: 6

Post 3+ Months Ago

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
  • Posts: 196
  • Loc: Portugal

Post 3+ Months Ago

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

Post Information

  • Total Posts in this topic: 6 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 2 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.