#1
  1. No Profile Picture
    Contributing User
    ASP Good Citizen (1000 - 1499 posts)

    Join Date
    Feb 2005
    Posts
    1,278
    Rep Power
    36

    link with image and text


    looking to create a link in my web page
    I want a small image of some sort and then some text to the right of then image but centered vertically to the image
    I use the below BUT it puts the text AFTER the image and does not aligh vertical center.

    <a href="http://www.yahoo.com"> something <img src="button.gif" />

    Can I better control this will CSS?

    Any thoughts or help would apprecited.
  2. #2
  3. No Profile Picture
    Contributing User
    ASP Good Citizen (1000 - 1499 posts)

    Join Date
    Feb 2005
    Posts
    1,278
    Rep Power
    36
    Was able to do it with this, but the image is now on all three href's....
    I am looking for an indivudual image per each "li"
    Do I use an ID on each "li"

    Last question.....the Home, Test and SOmething are all centered horizontally in the aside window...how do I make them left justtified?

    aside id="asidenewsleft">
    <p>Left ASIDE...</p>
    <ul>
    <li>Home</li>
    <li>Test</li>
    <li>Something</li>
    </ul>
    </aside>


    #asidenewsleft li{
    list-style:none;
    padding:3px;
    font:Bold 12px tahoma;
    color:#666699;
    background-image: url(button.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px;
    padding-left: 2px;
    }
  4. #3
  5. No Profile Picture
    Contributing User
    ASP Good Citizen (1000 - 1499 posts)

    Join Date
    Feb 2005
    Posts
    1,278
    Rep Power
    36
    alright did this....
    and the text is now aligned left.....but now its over the image that I am using....

    So now 2 issues:
    1. How do I get the image first and then the text after it on same line
    2. How do I modify this to allow me to use a specific image for each link


    #asidenewsleft{
    /* border:1px solid red; */
    width:150px;
    margin:15px 0;
    padding:10px;
    text-align:left;
    }

    #asidenewsleft li{
    list-style:none;
    padding:3px;
    font:Bold 12px tahoma;
    color:#666699;
    background-image: url(button.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px;
    padding-left: 2px;
    }
  6. #4
  7. No Profile Picture
    Contributing User
    ASP Good Citizen (1000 - 1499 posts)

    Join Date
    Feb 2005
    Posts
    1,278
    Rep Power
    36
    Should I not be using the below for a list and links?

    should I be using <a href"somelink"><a/>

    If so how do I get images into the "a href"

    aside id="asidenewsleft">
    <p>Left ASIDE...</p>
    <ul>
    <li>Home</li>
    <li>Test</li>
    <li>Something</li>
    </ul>
    </aside>
  8. #5
  9. No Profile Picture
    Contributing User
    ASP Good Citizen (1000 - 1499 posts)

    Join Date
    Feb 2005
    Posts
    1,278
    Rep Power
    36
    Finaly one....

    Did this: <li><a href="http://www.yahoo.com"><img src="button.gif">Yahoo</a></li>

    The image comes on the left of the text....BUT the text is aligned bottom in reference to the image.

    1. How do I align the text vertically center to the image???
    2. The text is right up against the image...how do I pad this distance so the text is away from the image?

    Thanks
    Last edited by Jaykappy; February 15th, 2013 at 12:05 PM.
  10. #6
  11. No Profile Picture
    Contributing User
    ASP Good Citizen (1000 - 1499 posts)

    Join Date
    Feb 2005
    Posts
    1,278
    Rep Power
    36
    want them to look similar to this page....where you login ....buttons images are aligned vertically with the text

    Cant find out how to make the text vertically align with the image

    <li><a href="http://www.nhl.com" style="font-size:11pt;font-weight:normal;color:#666699;font-family:'tahoma';font-style:normal;"><img src="button.gif" border="0"> NHL</a></li>

Similar Threads

  1. Image with Link
    By Vincentas in forum ASP Development
    Replies: 1
    Last Post: January 3rd, 2013, 08:21 AM
  2. having image as link to different page
    By tatsat in forum HTML, JavaScript And CSS Help
    Replies: 2
    Last Post: June 13th, 2007, 05:20 PM
  3. Image link help
    By paulcm in forum ASP Development
    Replies: 4
    Last Post: October 19th, 2005, 10:45 AM
  4. image link using FSO
    By trixxarn in forum ASP Development
    Replies: 1
    Last Post: October 15th, 2005, 11:53 AM
  5. Image link
    By mayab in forum ASP Development
    Replies: 14
    Last Post: September 1st, 2004, 03:53 PM

IMN logo majestic logo threadwatch logo seochat tools logo