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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2011
    Posts
    134
    Thanks
    20
    Thanked 0 Times in 0 Posts

    add text to my image

    I have two images below. One image is already created with the text 'home' inside it and the other one nothing in it. I want to add text manually to the the empty one that looks like the home.jpg..
    for example i want to add the text 'About' that has the same font as 'home'.
    Can someone help me with the css?
    Attached Thumbnails Attached Thumbnails add text to my image-home.jpg   add text to my image-board-nav..jpg  

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there coding_begins,

    try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    ul {
        padding:0;
        margin:0;
        list-style-type:none;
     }
    ul a {
        display:block;
        width:125px;
        line-height:22px;
        font-family:arial,sans-serif;
        font-size:14px;
        font-weight:bold;
        color:#fff;
        text-decoration:none;
        text-align:center;
        background-image:url(http://www.codingforums.com/attachment.php?attachmentid=10695&d=1326090443);
     }
    </style>
    
    </head>
    <body>
    
    <ul>
     <li><a href="#">HOME</a></li>
     <li><a href="#">AWAY</a></li>
     <li><a href="#">HERE</a></li>
     <li><a href="#">THERE</a></li>
     <li><a href="#">ABOUT</a></li>
    </ul>
    
    </body>
    </html>
    
    coothead

  • Users who have thanked coothead for this post:

    coding_begins (01-09-2012)

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Posts
    134
    Thanks
    20
    Thanked 0 Times in 0 Posts
    thank u so much..is it possible to find out the exact font size,type of the image that has home printed in it? I do not have photoshop to determine it

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there coding_begins,

    to my old eyes the font looks like...
    Code:
    
        font-family:'franklin gothic medium',sans-serif;
        font-size:12px;
        font-weight:bold;
        color:#fff;
    
    coothead


  •  

    Posting Permissions

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