1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: Dreamweaver CS5 help (basics I should think)

Discussion in 'Web Design & Development' started by Tanis, Jan 5, 2011.

Thread Status:
Not open for further replies.
Advertisement
  1. Tanis

    Tanis Thread Starter

    Joined:
    May 29, 2006
    Messages:
    3,969
    First Name:
    Shane
    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.
     
  2. DrP

    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.
     
  3. Tanis

    Tanis Thread Starter

    Joined:
    May 29, 2006
    Messages:
    3,969
    First Name:
    Shane
    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 :)
     
  4. Tanis

    Tanis Thread Starter

    Joined:
    May 29, 2006
    Messages:
    3,969
    First Name:
    Shane
    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 :).
     
  5. DrP

    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!
     
  6. Tanis

    Tanis Thread Starter

    Joined:
    May 29, 2006
    Messages:
    3,969
    First Name:
    Shane
    Thanks for the help and pointers DrP, much appreciated.
     
  7. Sponsor

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 733,556 other people just like you!

Loading...
Similar Threads - Solved Dreamweaver help
  1. Ricson
    Replies:
    1
    Views:
    71
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/972824

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice