Add href to an id tag

Discussion in 'HTML & Website Design' started by kathym, Apr 23, 2008.

0
  1. #1
    Hello,

    I have just taken over someone else's css and am having an issue.

    Below is the id tag they have set up....

    #logo {

    background: url(../images/logo2.gif) no-repeat; padding-left:80px; padding-right:20px; }

    If this is possible, how do I add an href inside this tag?
    I need to make this image clickable.

    Any help would be appreciated.
     
    kathym, Apr 23, 2008 IP
  2. Providence

    Providence Peon

    Messages:
    568
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Not sure if I understand what you mean but here's something you can add to the element with the id, logo.

    onclick="location.href='whereyouregoing.html';" style="cursor: pointer;"
    Code (markup):
     
    Providence, Apr 23, 2008 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi Kathy,

    What does the HTML and CSS code for the entire page look like?
     
    Dan Schulz, Apr 23, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    hrefs belong in "a" or "area". It's not a css thing.
    If #logo needs to be clickable, then it needs an anchor wrapped around it (HTML). The anchor has the href.

    <a href="wherever"><img id="logo" src="blah.gif" alt="logo blah blah"></a>
    I'm assuming #logo is an image but whatever it is, doesn't matter... except that you will run into a validation problem if you try to wrap an anchor around a block. Images are inline, so no problem, but you can't do this:
    <a href="wherever"><div id="logo">blah</div></a> cause div is a block and inlines can't wrap around them (legally).
     
    Stomme poes, Apr 24, 2008 IP
  5. newgenservices

    newgenservices Well-Known Member

    Messages:
    862
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    105
    Digital Goods:
    1
    #5
    page.html
    
<body>
<div id="something">
<a href="wherever"><img src="url.here" alt="something" /></a>
<!--- This system is mostly used when you wish to have a image in background and then another image with link to it (like in logo over a headerbg) --->
</div>
    Code (markup):
    css.css

    
#something {
background-image:url(path_to_image_here) no-repeat;
}
    Code (markup):
     
    newgenservices, Apr 24, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    ^ that's a good one too. I will often just have the background div and then set the a with its own background... if the image is there ONLY in order to be a visual thing for people to click and isn't really content, you can just set the img in the a's background itself.

    
<div id="header"> header can hava that same background img...
<a id="something"  href="wherever"> </a> (I put a space between the tags)
other stuff...
</div>
    Code (markup):
    
#something {
 display: block;
  width: same as img in px;
  height: same as img in px;
  background: url(blah.gif) 0 0 no-repeat;
}
    Code (markup):
     
    Stomme poes, Apr 24, 2008 IP
  7. kangaroobin

    kangaroobin Peon

    Messages:
    170
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    WOWOWW you cannot link in css...just add a href link on the html for this image...

    very easy and no need for all this code people giving you, pm me if you need more explaination
     
    kangaroobin, Apr 24, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    ^ read further up:
    : )
     
    Stomme poes, Apr 25, 2008 IP