I am using dreamweaver at the moment and I have come to the point where I want to draw hotspots around certain areas of the image and use it as navigation. For example on the image below I want to be able to draw a hotspot around the "Home, Coaching, Prices, Testimonials" areas, but there seems to be a bug for drawing hotspots on items that are within divs.

How else could I do this in CSS, could it be done with a list?

Here is the image I am referring to:

Thanks in advance

edit: put the right image in

Stevie_D
—
2013-11-25T20:32:20Z —
#2

ontargett said:

I am using dreamweaver at the moment and I have come to the point where I want to draw hotspots around certain areas of the image and use it as navigation. For example on the image below I want to be able to draw a hotspot around the "Home, Coaching, Prices, Testimonials" areas, but there seems to be a bug for drawing hotspots on items that are within divs.

How else could I do this in CSS, could it be done with a list?

Here is the image I am referring to:

Thanks in advance

You've just got text with separators ... why on earth would you ever even consider creating an image for that, and not using a list with text?

will do the trick. Obviously you'll need to play around with the padding and margins to get it exactly as you want it.

ontargett
—
2013-11-25T21:31:17Z —
#3

I did think of this but just wanted to make sure it was the right way to go about it, thanks for your input will get on this now. There is also a logo to the left of it as show in the image below, would i put this in a separate div on the left?

There is also a logo to the left of it as show in the image below, would i put this in a separate div on the left?

Thanks in advance

Yes just float the logo image container to the left but make sure you use alt attributes in the image or instead use the Gilder/levin image replacement method I mentioned in your other thread

ontargett
—
2013-11-26T21:39:28Z —
#6

Awesome thanks for the reply guys!

ontargett
—
2013-11-28T13:08:45Z —
#7

I have developed the menu using a ul and these are the results: www.neverup-neverin.com (ignore the logo, it is just a mock up for this purpose)

I would paste the code in here but don't want to clog up the page, can anyone tell me how to embed the code, where scroll bars appear? I have seen this done on some other posts.

If anyone could have a look at the code of this webpage and suggest any corrections I could make with the ul at the top right I'd be really grateful!

Thanks in advance

ralphm
—
2013-11-28T13:20:54Z —
#8

ontargett said:

can anyone tell me how to embed the code, where scroll bars appear?

There are various ways, but the easiest is to highlight your code and click the # in the editor tools above the post. Or you can just type [noparse]

[/noparse] tags around your content. If you click the Go Advanced button, there are more options, where you can highlight code as PHP, JS etc.

Francky
—
2013-11-28T14:30:24Z —
#9

The menu is fine already. The only thing: the items have a fixed width in px. If a visitor is scaling the font-size, the hovers don't work anymore. You can avoid this by removing the width, and adding a padding L/R to the items, then it's flexible:

#headnav li a {
...
/* width: 96px; */
padding: 0 5px;
}

=====You can add a link to the logo with:

<div class="logo">
<a href="#"></a>
</div>

And the style:

.logo a {
height: 90px;
display: block;
}

The height is the same as the height of the logo-image, the display:block; is for "filling" the whole logo area with the link.