SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
Thread: DIV has a full link
-
Oct 14, 2007, 14:36 #1
DIV has a full link
Hello,
I have a list like this one:
I want to make this div working like a full link, so people will click inside the blue square will follow the link. How do I do that in CSS?
Thank you in advance.
-
Oct 14, 2007, 15:20 #2
- Join Date
- Aug 2007
- Posts
- 365
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What happens if you put the <div> tag inside the <a> tag
-
Oct 14, 2007, 17:33 #3
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The HTML no longer becomes valid since you cannot have a block level element (like a DIV) inside an inline one (like an anchor).
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Oct 14, 2007, 17:48 #4
I found the example in Veerle site: http://veerle.duoh.com/
It seems to be valid.
-
Oct 15, 2007, 01:26 #5
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm not sure without seeing the fullcode but you can usually achieve this by changing the <a> to a block level element
Code:a { display: block; }
-
Oct 16, 2007, 04:21 #6
Yes you are right, sorry here is the code:
Code CSS:.list { margin:-12px 0px 0px 0px; padding:0px; list-style:none; } .list a { text-decoration:none; font-size:1.25em; font-family:Verdana, Arial, Helvetica, sans-serif; color:#64680f !important; } .list a:hover { text-decoration:underline; } .list li { background:url(../images/border.gif) bottom repeat-x; padding:8px 0px; } .list .last { background:none; }
And the HTML is:
Code HTML4Strict:<ul class="list"> <li><a href="#" accesskey="e" title="#">Métodos de <span class="uline">E</span>nvio e Pagamento</a></li> <li><a href="#" accesskey="d" title="#">Con<span class="uline">d</span>ições de Serviço</a></li> <li><a href="#" accesskey="p" title="#"><span class="uline">P</span>olitica de Privacidade</a></li> <li><a href="#" accesskey="a" title="#"><span class="uline">A</span>juda</a></li> <li class="last"><a href="#" accesskey="t" title="#">Con<span class="uline">t</span>acto</a></li> </ul>
I have put a bg like Veerle's example but not able to put li has a entire link.
-
Oct 16, 2007, 04:29 #7
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Dave already gave you the answer.
-
Oct 16, 2007, 04:31 #8
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This should work. Just apply display: block; to the <a> and apply the background and padding to this instead of the <li>
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Demo</title> <style type="text/css"> * { padding: 0; margin: 0; } .list { list-style:none; padding-left: 25px; } .list a, .list a:link { text-decoration: none; font-size:1.25em; font-family: verdana, arial, helvetica, sans-serif; color:#64680f; display: block; background:url(../images/border.gif) bottom repeat-x; padding:8px 0px; } .list a:hover { text-decoration:underline; } .list .last a, .list .last a:hover { background:none; } </style> </head> <body> <ul class="list"> <li><a href="#" accesskey="e" title="#">Métodos de <span class="uline">E</span>nvio e Pagamento</a></li> <li><a href="#" accesskey="d" title="#">Con<span class="uline">d</span>ições de Serviço</a></li> <li><a href="#" accesskey="p" title="#"><span class="uline">P</span>olitica de Privacidade</a></li> <li><a href="#" accesskey="a" title="#"><span class="uline">A</span>juda</a></li> <li class="last"><a href="#" accesskey="t" title="#">Con<span class="uline">t</span>acto</a></li> </ul> </body> </html>
-
Oct 18, 2007, 21:04 #9
Sorry csswiz only notice now your answer on the topic.
Thank you for your helping. I will try your solution.
Again, thank you all for the help.
Bookmarks