The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
How to make a whole div a link?
Discuss How to make a whole div a link? in the CSS Help forum on Dev Shed.
How to make a whole div a link? Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|
|
Dev Shed Forums Sponsor:
|
|
|
December 2nd, 2012, 12:59 PM
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 4
Time spent in forums: 57 m 34 sec
Reputation 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
|
December 2nd, 2012, 01:11 PM
|
|
|
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>
|
December 2nd, 2012, 03:45 PM
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 4
Time spent in forums: 57 m 34 sec
Reputation 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.
|
December 2nd, 2012, 04:31 PM
|
 |
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
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.
|
December 2nd, 2012, 05:29 PM
|
 |
Code Monkey V. 0.9
|
|
Join Date: Mar 2005
Location: A Land Down Under
|
|
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.
|
December 2nd, 2012, 05:58 PM
|
 |
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
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
Quote: | 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".
Quote: | 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.
|
December 2nd, 2012, 07:19 PM
|
|
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
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.
|
December 3rd, 2012, 01:49 AM
|
|
|
|
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.
|
December 5th, 2012, 02:31 PM
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 4
Time spent in forums: 57 m 34 sec
Reputation Power: 0
|
|
|
Thanks very much for all the suggestions!
@Kravvitz
That really helped me out :-)
|
December 5th, 2012, 03:36 PM
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
You're welcome.
Quote: | 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
|
December 5th, 2012, 04:08 PM
|
|
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
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.
|
December 5th, 2012, 04:22 PM
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
Quote: | 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).
|
December 5th, 2012, 04:43 PM
|
|
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
|
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.
|
December 5th, 2012, 04:59 PM
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
Quote: | 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
|
December 5th, 2012, 06:52 PM
|
|
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
|
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.
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
 Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
