Solved: Dreamweaver CS5 help (basics I should think)

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Tanis

Shane
Thread Starter
Joined
May 29, 2006
Messages
3,969
Hi all,

I have recently started using Dreamweaver CS5 at work. I produce training material for our companies proprietory software and we are moving over to html based manuals, I have recently started working on my first one which is actually a conversion of an existing set of documents.

So, onto my problem ..

I am using an external style sheet for the full site and I want to use a small .gif image (which will be located in the container part of the page) as a hyperlink to another page of the document. Thats easy enough, I can put the image in fine, create the hyperlink and it all works fine and dandy. What I can't seem to be able to do correctly is adding hyperlink effects to the image.

What I want to do is make the image look like a button using basic bordering techniques .. i.e. a light border top and left with a dark border bottom and right. Then, when the image is clicked I want the borders to switch to give the appearance of a button being pushed.

I have done this without a problem as part of an unordered list on the sidebar which is the main content headings for the document, but I just can't seem to get it to work on an image in the container. I can setup the initial borders on the 'a img' tag of the style sheet but can't seem to find out to use the a:active / a:focus / a:hover aspects to produce the desired effect.

Hopefully this will make sense to someone reading and they will be able to help me out :D

Thanks in advance.
 

DrP

Joined
Jul 23, 2005
Messages
739
Could do with a link, but from what you've said...

If you've given the img a border, then the a:focus is applying the focus to the wrong tag. Remove the border from the img and give it to the link instead. Something like:

Code:
img {border: none;}
a {border: 1px solid #ff00ff; }
a:hover, a:focus, a:active {border: 1px solid #0000ff;}
But obviously use an id or class attribute to prevent all links doing this.
 

Tanis

Shane
Thread Starter
Joined
May 29, 2006
Messages
3,969
Thanks for the reply, unfortunately I can not link it as it won't actually be going online due to the nature of my work. It will be delivered on CD to the customer for them to put on their closed, work, network. Ill have a look at it again today based on your comments and see if I can get it done :)
 

Tanis

Shane
Thread Starter
Joined
May 29, 2006
Messages
3,969
Well your info obviously did the trick as I have managed to sort it out now.

I created a new ID for the specific images (all three are operating the same was so now using the same ID) in the CSS. Then created another CSS entry for the a:active component which worked fine when I put the a:active tag before the image ID in the CSS rule entry i.e. entry name is - a:active, #img_link

Previously I had been trying to put the a:active after the name (#img_link, a:active) which just didn't work, when put this way the border settings for the for a:active entry overrode the settings for the base #img_link entry, no idea why, but it is working now :).
 

DrP

Joined
Jul 23, 2005
Messages
739
What you need is a#nameofID:hover etc. The comma is for separating multiple tags to apply the style for, so a:active, #nameofID {} will apply the style to active links AND to anything with an ID of nameofID.

Also, you should only have one element with any particular ID. If you want three tags to have the same ID you should use a class instead.

Hope that helps!
 

Tanis

Shane
Thread Starter
Joined
May 29, 2006
Messages
3,969
Thanks for the help and pointers DrP, much appreciated.
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Members online

Top