SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast Kanustep's Avatar
    Join Date
    Jul 2005
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    SitePoint Addict
    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

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    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).

  4. #4
    SitePoint Enthusiast Kanustep's Avatar
    Join Date
    Jul 2005
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the example in Veerle site: http://veerle.duoh.com/

    It seems to be valid.

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    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;
    }
    Obviously you'll probably need to target the individual <a> so put an ID on the container of the <div> or <ul> and use that so that display: block; isn't applied to the entire page/site.

  6. #6
    SitePoint Enthusiast Kanustep's Avatar
    Join Date
    Jul 2005
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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&eacute;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&ccedil;&otilde;es de Servi&ccedil;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.

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dave already gave you the answer.

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    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&eacute;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&ccedil;&otilde;es de Servi&ccedil;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>
    I can't see the background image so not sure if it's exactly how you want it but it should work.

  9. #9
    SitePoint Enthusiast Kanustep's Avatar
    Join Date
    Jul 2005
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

Posting Permissions

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