Lchad

Ok here goes my first of what I know will be many questions. I've officially embarking on my first complete css design (taking a bow).
My question is
In the old days (yesterday) you had an image in a table. You could link to a certain area using a hotspot. For instance if you have an email address on a graphic, you could link the email address with the hotspot. Nice since sometimes I want to use a fancy font in my design.
Is this possible in CSS?

Here's my code;
#topheader {
background: url(images/final_design_1.jpg) no-repeat scroll left top;
width: 775px;
height: 199px;
position: left;
margin: 0;

If it's not possible, is there another way around this?
Thanks in advance,
Linda

ukgeoff

Strange, I have replied to this once but it seems to have gone missing.

By hotspot, I assume you are talking about using image maps?

Whether you still choose to use them or not is nothing to do with css.

What you could do with css instead of having the link as part of your graphic is to have you graphic image, say as the background of a div, and within that div have a normal text link but position it where ever you like above that graphic.

It would also be a more accessibility friendly solution.

Lchad

Yes I meant image maps. Sure I understand that which is probably what I'd do in most cases. However for this particular project we are using a script font that the browsers can't read.

What i ended up doing is putting in a transparent spacer gif. I've moved it over the email address and linked the spacer gif.

I'm struggling with moving it over to the far right of the background... but that's just the learning curve of css. Like I said, I'm at kindergarten level!
I think it took me 8 hours yesterday to do something that would have taken less than 20 minutes in tables. Not too profitable however, I did like the looks of the code! Three div's for the entire page.

Thanks for responding!
Linda

ukgeoff

Can you put the page somewhere I can see it and look at the code then I will be able to guide you better?

moojoo

You can do it with positioned divs displayed as a block etc etc...

__________________

Lchad

Ok.. I guess I'm ready for you to see my "first" css creation. http://www.apride.us/final.html

I took out the spacer image because it was really messing up things.

Moojoo..thanks but since I'm in css kindergarden, that was way over my head!

So now the object here is to somehow make the email address in the topheader background image, a usable link!

Accurax

Just use text

Use <p> tags for the phone numbers etc and just style:

#divheader p

untill you get the text to display wherever you want it.

Lchad

Thanks but I'm not going to use just "text". I want to use a fancy script font which will not work unless it is a graphic.

ukgeoff

Ok. Had a look at the site.

Which is the fancy font you want to be a link?

Lchad

The email address in the header!

moojoo

CSS would be better than image maps and slicing imo. Think of it like this:

#topheader {
background: url(images/final_design_1.jpg) no-repeat scroll left top;
width: 775px;
height: 199px;
position: left;
margin: 0;

So you have a box 775px wide by 199px tall. Say for example the e-mail was in the top left and was 200px by 25px. This is just quick and dirty but should work.

#topheader a {
width:200px;
height:25px;
display:block;
text-decoration:none;
}

then in your html you would do something like:

<div id="topheader">
<div id="emaillink">
<a href="">&nbsp;</a>
</div>
<!-- end email link -->
</div>
<!-- end top header -->

Hope that at least clears up what I was suggesting. Attached is a functional example.

Attached Files

slice_example.zip (467 Bytes, 35 views)

__________________

Lchad

Thank you for your time and effort moojoo. It's very much appreciated.
However I will not be changing the design since this is client approved. So putting the email address in the upper left corner isn't an option at this time.
Thanks again! However, I will look at your suggestion and see if I can't put the display block over my email address.

moojoo

That was just an example damnit.. use it to work it the way you need silly.

__________________

Lchad

derrrrrrrrrrr...ok... I'm slow!

ukgeoff

Why don't you seperate the email address out into its own image.

You could then place that image inside a link element and use css to position them where the current image address is?

moojoo

that works too. the example I gave him could be used for either. Just add a background: property to it.

__________________

Lchad

That's an excellent idea Geoff! I think that would be easier for me...
Thanks so much guys!

fairydreamz23

I know what you're trying to do, and while I'm new at this, I have the solution. I've been using this method to create custom myspaces for people. I did my own lusing this method, you can view here . With those, I basically make the entire layout as a graphic, then make "invisible links" inside the main div. This is how it works.

.email { width: ?px; height: ?px; z-index: 1; left: ?px; top: ?px }
.name {
position: relative;
width: ?px;
height: ?px;
}
.name a {
text-decoration: none;
border: none;
display: block;
position: absolute;
text-indent: -5000px;
}

Then you would put this inside your main div and specify the location of the link
like this

<div class="main">
<div class="name">
<a href="URL" class="email" />email</a>
</div>

I use Photoshop to find the top and left values with the info tab and a basic size i want the link to be.

I hope that helps. It took me forever to figure out.