Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    You know when you use CSS to give a div a background image, such as

    Code:
    #blah
       {
          background-image: url(../images/logo.gif);
          background-repeat: no-repeat;
       }
    And then
    HTML Code:
    <div id="blah"></div>
    What if I just want the whole div to be a link? As in no other content/text to be inside it?

    Do I just scrap the css ID and do <a><img></a> instead?

    I would prefer to try and keep images outside of my pages (hand coded into the page).

    Cheers

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,714
    Member #
    5580
    Liked
    717 times
    I don't know how acceptable this trick is, but it works for me.

    Create a .gif image that is 1 pixel by 1 pixel (a single white pixel).
    Save it with a transparent color of "white".
    Perhaps you will call the image "blank.gif".

    Now, wherever your <div> is, put that image there as the link.
    Define the image size. It won't appear because it's transparent ...
    you'll only see your background image.

    <div id="blah"><a href="www.google.com"><img src="blank.gif" width="100" height="100" alt="" /></a></div>


  4. #3
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Hm yeah I always remember reading about the invisible gif trick back in .NET magazine when I first started to get into webdesign.

    Again I am not sure how acceptable this is, but after I posted I though "A-ha!"

    Wrapped the div in <a> and gave it a wrapper.

    HTML Code:
    <div><a href="#"><div id="blah"></div></a></div>
    Job done.

  5. #4
    Senior Member Ferro's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    386
    Member #
    14204
    Liked
    5 times
    Out of interest - why did you have to wrap it in the second div?

  6. #5
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    That second div actually had some styles rules applied to it, so it would have a id/class.

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    The problem with the blank gif approach and the blank div approach is the same: you have no context for someone that can't see images. It's the same reason you drop alt text on imgs. The appropriate way to achieve what you're talking about would be, I dare say:

    HTML Code:
    <div><a id="magicLink"><span>Go see Magic</span></a></div>
    That carries the issue of the non-semantic span in there (which you would subsequently remove by giving it a large negative margin or making it visibility: hidden or display: none or whatever), but you would still have your a tag to style.

    In short, unless you have an extremely good reason for doing it, it's a bad idea to have an image somewhere with no actual text associated with it somehow -- be it through CSS or alt text. It's relatively rare that there be no text whatsoever that can at least give an idea of what your image does.

  8. #7
    Junior Member Spasm's Avatar
    Join Date
    Feb 2008
    Posts
    19
    Member #
    16437
    You could also use the onclick property and javascript to open up the new page. You should probably also use onmouseover and change the cursor to that finger, so the user knows that it will take them to a new page.

  9. #8
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Shadowfiend: I take on board what you are saying, and the overall design would not suffer too much or break if users cannot see images.

    The actual image itself consist of an icon and a company name.

    Thanks.

  10. #9
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I just feel dirty having empty elements in the page :-D You could always put the company name as the text in there

  11. #10
    Senior Member imagn's Avatar
    Join Date
    Jul 2007
    Location
    Los Angeles
    Posts
    156
    Member #
    15594
    Why don't you just add an "onclick" event to the div tag:

    <div onclick="window.location='somewhere.html'"></div>


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:13 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com