[CSS] Make An Image Link To A Website - How To Do It?

Discussion in 'CSS' started by JMN, Jul 19, 2008.

0
  1. #1
    Hey guys, I'm finishing my new site, but I've got a problem.

    One of the images on the site is inserted in the style sheet, and not in the HTML/PHP.

    And, I want that particular image to link somewhere (actually, I want it to link to
    my website).

    Here's a bit of the CSS:

    
#container{
margin:0 auto 15px auto;
width:700px;
padding:10px;
background:#ffffff url(images/front.png) bottom left no-repeat;
color:#303030;
border:20px solid #505050 url(border.png);
}
    Code (markup):
    I want "front.png" to link to a website. How can I do that?

    Thanks!
     
    JMN, Jul 19, 2008 IP
  2. xxll_martin_llxx

    xxll_martin_llxx Well-Known Member

    Messages:
    128
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    155
    #2
    http://codingforums.com/archive/index.php?t-65811.html

    There's a simple CSS solution. Insert a link into the parent container, taking note of it's dimensions, and insert a link with '&nbsp' as the anchor text. Give the link CSS attributes to change it to a block level element with the same dimensions as the parent conainer.

    EG:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #bgImg01 {
    background: #999999;
    height: 50px;
    width: 150px;
    border: 1px solid #333333;
    }
    #bgImg01 a {
    text-decoration: none;
    display: block;
    height: 50px;
    width: 150px;
    }
    -->
    </style>
    </head>

    <body>
    <div id="bgImg01"><a href="someLink.htm">&nbsp;</a></div>
    </body>
    </html>
     
    xxll_martin_llxx, Jul 19, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    If you cannot change the HTML, you cannot make it a link. Just to be clear.

    Also, I usually advise people not to use character entities if they are writing XHTML. Not that it's ever "real" XHTML but we like to try as if it is, and since XML doesn't allow most HTML character entities, we try to stay strict by using hex-version ASCII (and in this case, an actual space will work). If the browser loses your whitespace, no problem-- the link, if turned into a block, will retain it's height and width so you'll still have your clickable area (I know cause I have it on my company's site... clickable background images).
     
    Stomme poes, Jul 19, 2008 IP
  4. yankzilla

    yankzilla Peon

    Messages:
    159
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    What you could do is just make it the background of a h1 and link the h1, but position the text like -2000 left or something. I use that all the time for my websites.
     
    yankzilla, Jul 19, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yeah but then all them there dial-uppers with images off but CSS on see no text.
     
    Stomme poes, Jul 21, 2008 IP
  6. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #6
    There's no way to do it with CSS at this time, not with proper browser support anyway. You'll have to edit the HTML. If you want to link the background image, you'll have to introduce an anchor over the image and style that anchor's size to covert the width and height of the image. It's a bit tricky at first, but it works.
     
    steelfrog, Jul 21, 2008 IP