Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    vid
    vid is offline
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding text to button image

    Am wondering how to add text to a background button image that I have set on my webpage. When I try to add the text thru DW the button background moves off the page. It is actually a set of 6 subheading buttons.jpg in various sizes. Thanks for your help

    PHP Code:
     <div class="button" style="background:url(images/b3.jpg); width:203px;"><img src="b3.jpg" />
    </
    div>

     
                <
    div class="button" style="background:url(images/b2.jpg); width:221px;"> <img src="b2.jpg" alt="text" width="221" height="40" />
               
                </
    div>

                <
    div class="button" style="background:url(images/b1.jpg); width:135px;"><span class="button2"><img src="b1.jpg" name="Home" id="Home" /></span></div>
                <
    div class="clean"></div>
            </
    div>
            
            <
    div id="left"
    here is the code



    how would I make one of the buttons really background buttons not the little gray boxes that you see sometimes. say Home.....and when someone clicks they are taken there
    2 about us
    3 why choose us



    for example.......................
    Last edited by vid; 05-23-2009 at 08:38 PM.

  • #2
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    Im sure other people with have other ideas but I personally would use photoshop to open each button. add the text and save the jpeg.

    This way IE cant balls up the positioning of the text as its attached to the image.

    If they are links however, you will have to link the buttons themselves and not the text

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    You don't really want to have the text on the background image as then screen readers etc, not to say search engines, won't be able to read it.

    A good approach is to create the link, and then use styling to set the background image to your photoshopped or whatever image.

    So your html would look something like this, nice and clean:
    Code:
     <a href="whatever.htm" class="button">Text for this link</a>
    with css like this (explanations in red):

    Code:
    a.button
    {display:block;/* make the link a box, effectively */
    width:203px;
    height:30px;/* set the width and height as required - to match your background image*/
    text-align:center;/* centre the text horizontally in the box */
    line-height:30px;/* centre the text vertically in the box by making line-height = height*/
    background: #000000 url(images/b3.jpg) no-repeat;/* black background if no image, image doesn't repeat*/
    color:black;
    text-decoration:none;/* remove the underlining on the link*/
    }
    Then you can define a similar class for each size button, changing the width, height and background image as required, and add the class to your html.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •