Hotspot and CSS problems.

So, today I’ve been working on the food sustainability page of my website (the page that you reach when you click the conical flask with the burger floating in it).

I’ve finished the main image in Illustrator – including some red circles that will eventually direct you to some information.

All was going well – until I decided to link the page that I’d created with my CSS style sheet. Nothing happened. The background remained white (it should have been a dark grey colour and thus link in with my homepage). I decided to carry on putting some free draw div tags on the page and adding text and deal with it later.

However, it was really annoying me that it wasn’t working. I tried changing the background colour etc. Then I noticed the lack of semicolon at the end of the background colour coding line.

My code went like this;

body {
font-size: 100.01%;
font-family:”Letter Gothic Std Bold”;
color: #333;

It needed to read;

body {
font-size: 100.01%;
font-family:”Letter Gothic Std Bold”;
color: #333;

So simple, yet so frustrating. I now have a page that looks like this…

Screen Shot 2013-06-22 at 22.47.53

The font still needs sorting out. For some reason the font is different to this in Dreamweaver, but when opened in a web browser it changes.

I’ve also added some hotspots. So, each of the red dots on the map links to the correct box of text on the right-hand side. This was pretty easy to do, I just had to create a named anchor at the start of each section of text. The anchor was named after the country that the text referred to e.g. the text referring to borneo had the imaginative anchor name of ‘borneo’. In my hotspots I then just had to type #borneo. I’ll show you below.

Screen Shot 2013-06-22 at 22.55.34

There’s a small problem here too. Whilst the hotspots work marginally in Dreamweaver, they do precisely nothing in a web browser. Basically then, I’ve sorted out my CSS style sheet, but I still need to work on my text and hotspots. A job for tomorrow.

I also need to move the entirety of the image and div tags down so that I can add a banner and give the page a title. Which I can already foresee is not going to be simple!

A quick update –

I’ve managed to use the Behaviours toolbar (see my previous post) to make the div tag with text in it grow once clicked. When the mouse leaves the tag the text shrinks again. I think this should hep users to engage with the text on my page. It even works in a browser! Well, it does sometimes…

Screen Shot 2013-06-22 at 23.35.22


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s