Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    4
    Rep Power
    0

    How to make a whole div a link?


    I have a div which is styled in css to be a box, how do i make this box a link? I have tried to look it up on google, but couldn't find anything useful, so i hope that you can help me

    Thank you!

    Emil
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Set the anchor link within the div to be 100% width and height, so something like
    Code:
    a.expand {
     width: 100%;
     height: 100%;
     }
    Then in your HTML
    Code:
    <div class="name of class">
    <a href="link"  class="expand">Link text or leave blank</a>
    </div>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    4
    Rep Power
    0
    Thanks for the advise, but sadly i can not get it to work out for me.

    This is what my code looks like:

    HTML
    Code:
    <div class="p1">
    <a href="www.google.dk" class="expand">blabla</a>
    </div>
    CSS
    Code:
    a.expand {
    	width: 100%;
    	height: 100%;
    }
    It seems that the div is not able to expand.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    294
    Rep Power
    8
    I had a go at it earlier but couldn't get the anchor to expand just the container.

    I tried this:

    Code:
    <style type="text/css">
    a
    {
       width: 30%;
    }
    #content 
    {
       width: 30%;
       border: 1px solid black;
       height: 500px;
    }
    
    
    
    </style>
    </head>
    
    <body>
    
    <a href="somepage.php" />
        <div id="content" href="somepage.php"></div>
    </a>
    But as you can see, the anchor tag doesn't 'wrap' round the div like it would an image.

    If you contrast that with this:

    Code:
    <style type="text/css">
    
    img 
    {
       width: 30%;
       height: 500px;
    }
    
    
    
    </style>
    </head>
    
    <body>
    
    <a href="somepage.php" />
        <img src="phpwp.jpg" />
    </a>
    you will see why I tried the approach of putting the anchor outside the div, but it seems to span the whole page even with a width declared. Hover your mouse over the right hand side of the div with the first example and you will see it spans the whole page.

    Not really sure how to fix this. Could be very simple but I can't seem to figure it out.....good question! I will like to see the answer to this!

    Regards,

    NM.
  8. #5
  9. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,066
    Rep Power
    1990
    Why not just do it the easy way:

    Code:
    <a href="http://example.com"><div class="class_name">Content in here<div></a>
    No mucking around with more CSS, no worries with trying to fill an area, and fully valid HTML code.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    The width and height properties don't apply to (non-replaced) inline elements, like <a>. You can give such elements "display:block" to make said properties work.

    Setting a percentage height doesn't work as one might expect it to. I recommend you read Height and Min-Height

    But as you can see, the anchor tag doesn't 'wrap' round the div like it would an image.
    That's because an <img> is a "replaced inline element", where as a <div> is a "block element".

    No mucking around with more CSS, no worries with trying to fill an area, and fully valid HTML code.
    If you changed the second <div> start tag to an end tag, it would be valid HTML5, but it's certainly not valid HTML4. And if you'd like to strengthen your CSS skills, ask me more questions.

    *** Thread moved to CSS forum ***
    Last edited by Kravvitz; December 2nd, 2012 at 06:01 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    294
    Rep Power
    8
    Ah I need to study more about which elements are inline and which are block. I have a vague idea of the more common elements but don't know much about why you can do certain things with 1 type and not another etc.

    Thanks for answering I had a feeling it would be you lol

    Regards,

    NM.
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Sorry, in my original post I was meant to change the height to a set amount, not leave at 100% (that should have just been for the width).

    So if the containing div has a height of 20px, then set your class for the anchor tag to have the same height so it fills the containing div.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    4
    Rep Power
    0
    Thanks very much for all the suggestions!

    @Kravvitz

    That really helped me out :-)
  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    You're welcome.

    Originally Posted by Nanomech
    Ah I need to study more about which elements are inline and which are block. I have a vague idea of the more common elements but don't know much about why you can do certain things with 1 type and not another etc.
    It tends to come down to the purpose of the element. Some elements are used to mark up a few words or sentences (e.g. <em>, <acronym>) and they are inline elements, where as others are used to mark up blocks of content (e.g. <p>, <ul>) and those are blocks.

    Does that make it any clearer to you?
    Last edited by Kravvitz; December 5th, 2012 at 04:19 PM. Reason: typo correction
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  20. #11
  21. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    294
    Rep Power
    8
    It does actually yea.

    So for example, <span> is inline and let's say an <a>nchor is an inline because it's only defining a small part of your page.

    Block can be <div>, <img>, <p>, <h1-6>, <table> as they define (possible) large areas of content for the site?

    Kind regards,

    NM.
  22. #12
  23. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Originally Posted by Nanomech
    So for example, <span> is inline and let's say an <a>nchor is an inline because it's only defining a small part of your page.

    Block can be <div>, <img>, <p>, <h1-6>, <table> as they define (possible) large areas of content for the site?
    Close. An <img> is an inline element, but it's a replaced inline element, so it has some characteristics of both inline and block elements. And note that while a <table> is a block, it has "display:table" instead of "display:block" by default (except in IE7 and older).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  24. #13
  25. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    294
    Rep Power
    8
    Ah thanks for the info. I think I'm going to google it and look up in detail about each type of elements.

    Do you know of any good, reliable sources from which to learn from?

    Kind regards,

    NM.
  26. #14
  27. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Originally Posted by Nanomech
    Ah thanks for the info. I think I'm going to google it and look up in detail about each type of elements.

    Do you know of any good, reliable sources from which to learn from?
    Stay away from w3schools.com (which has nothing to do with w3.org).

    I recommend that you read these:
    Block vs. Inline, Part 1
    Block vs. Inline, Part 2
    Block vs. Inline, Part 3
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  28. #15
  29. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    294
    Rep Power
    8
    I only really visit w3schools to reference HTML tags to check their possible attributes etc.

    I'll give those a read now.

    Kind regards,

    NM.
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo