SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    I'm in your computer! Halo-13's Avatar
    Join Date
    Jun 2004
    Location
    Minneapolis, MN
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hyperlink in a DIV?

    Code:
     #home-banner {
     background-image:url(images/home-banner.jpg);
     width:600;
     height:100;
     }
    Code:
     <div id="home-banner">
     </div>
    Is there a way to make that banner a hyperlink? Just a thought. Thanks!

  2. #2
    SitePoint Zealot pionar's Avatar
    Join Date
    Nov 2003
    Location
    Indianapolis
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm, maybe (just off the top of my head) putting a transparent gif the same size as the div in there?

    Like:

    HTML Code:
    <div id="home-banner">
    <a href="foo"><img src="transparent.gif" width="600" height="100" alt="transparent" /></a>
    </div>
    Would that work? I don't know, never tried it, though I don't see why it wouldn't.

  3. #3
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't test it, but I think this should work:
    Code:
    #home-banner {
    background-image:url(images/home-banner.jpg);
    width:600;
    height:100;
    display: block;
    }
    #home-banner span {
    display: none;
    }
    
    <a id="home-banner" href="blah"><span>Blah</span></a>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,364
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    All you need do is set the anchor to display:block and it will expand to fill its parent. You may need to add height:100% and width:100% for iE but try it without first.No content is needed.
    Code:
    a {display:block;width:100%;height:100%}
    Code:
    <div id="home-banner"><a href="#"></a></div>
    BTW don't miss the units from your domensions otherwise good browsers will treat it as zero.
    Code:
    #home-banner {
     background-image:url(images/home-banner.jpg);
     width:600px;
     height:100px;
     }
    Paul

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If your image is going to be linked to, then use the <img /> element.
    HTML Code:
    <div id="home-banner">
    <a href="/"><img src="images/home-banner.jpg" width="600" height="100" alt="Return home" /></a>
    </div>
    Code:
    #home-banner {
      width: 600px;
      height: 100px;
    }
    #home-banner a img {
      border: none;
    }
    This is the most accessible and downright easiest way to code this thing.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,364
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Vinnie
    This is the most accessible and downright easiest way to code this thing
    Spoilsport

  7. #7
    I'm in your computer! Halo-13's Avatar
    Join Date
    Jun 2004
    Location
    Minneapolis, MN
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    If your image is going to be linked to, then use the <img /> element.
    HTML Code:

    <div id="home-banner">
    <a href="/"><img src="images/home-banner.jpg" width="600" height="100" alt="Return home" /></a>
    </div>



    Code:

    #home-banner {
    width: 600px;
    height: 100px;
    }
    #home-banner a img {
    border: none;
    }



    This is the most accessible and downright easiest way to code this thing.
    SEE I KNEW IT WOULD BE EASY! LOL! I was just thinking too hard about the whole thing and forgot about the most simplistic way to do it. Althought I don't quite understand why there is a
    HTML Code:
    />
    at the end of the <img> tag?

  8. #8
    I'm in your computer! Halo-13's Avatar
    Join Date
    Jun 2004
    Location
    Minneapolis, MN
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh BTW Thanks so much for the help!

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Halo-13
    Althought I don't quite understand why there is a
    HTML Code:
    />
    at the end of the <img> tag?
    If you're coding in XHTML, all tags must be self-closing. If you're just coding in HTML 4.0 or earlier, then feel free to omit the trailing slash .

  10. #10
    I'm in your computer! Halo-13's Avatar
    Join Date
    Jun 2004
    Location
    Minneapolis, MN
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh I see, so in other words a DIV tag would be <div/> insted of <div></div>?

  11. #11
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Halo-13
    Ahh I see, so in other words a DIV tag would be <div/> insted of <div></div>?
    No. A div requires a closing tag (</div>). Tags where closers weren't ever used (i.e. img, br, hr) now have to self-close, like <br /> or <img />.

  12. #12
    I'm in your computer! Halo-13's Avatar
    Join Date
    Jun 2004
    Location
    Minneapolis, MN
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    got it. Thanks for the tip!


Bookmarks

Posting Permissions

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