Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

Browser Specific Problems: Transperant PNG images as buttons

Bottom of Page

1 to 2 of 2

  1.  
    • CommentAuthormodermo
    • CommentTimeJul 16th 2007
     permalink
    Hi

    I am new to CSS beauty. Really nice site.

    I have a slight problem, and hope that anyone out there has the solution.

    I have designed a button in Photoshop and saved it as a PNG image. I figure there is only one way to code a button, that being:

    <a href="xxx?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" target"_blank>The button</a>

    Now, I have placed the transperent image in using CSS, using the a:link, a:visited a:hover a:focus, a :active elements.

    When I view this in a browser, the transperent image comes up fine, with the hover, visited, active etc functions working fine. What I cant seem to get rid of though are the words "the button" that I typed in HTML (see above).

    I have tried various things to get rid of the word, but keep the images. Getting rid of "the button" in HTML gets rid of the link altogether. I have tried the FARC method, and various others.

    Therefore, my question is this.

    How do you incorporate Transperent PNG's as buttons into your design, without the HTML wording showing?

    This is a real annoyance, as I am only new to web design.

    Any answer would be great.

    P.S. Can anyone recommend any books, video tutorials, websites, that outlines the whole process a freelance web designer goes through when designing a website. This being, the brief, design, development, and most importantly uploading to a server. (The last being the one I need the most information on).

    Thanks guys, much appreciated.
    •  
      CommentAuthoradjustafresh
    • CommentTimeJul 16th 2007 edited
     permalink
    Hi Modermo,

    First off, there are several ways to make a button, including the HTML button element. What you are making is a hyperlink styled to look like a button.

    There is an easy solution to your problem, but it may cause some other errors in your layout. You need to change your link from an inline element to a block element. Then all you need to do is use negative text indent to hide the HTML text. It looks something like this:

    a {
    display: block;
    text-indent: -5000em;
    }

    Keep a few things in mind: use these styles specific to the button that you are styling by specifying an ID or a class on the anchor tag (a#button) - in other words, don't make ALL anchor elements display block and hide the text. Also, display block makes your link/button into a block level element, and it will interact differently with the other elements on the page; you may have to make some accommodations for that.

    You can find tons of great information about web design & development online. Start with A List Apart, hang out on this forum and always "view source".

    Good Luck.

1 to 2 of 2

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page