SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Correct Way To Place a Link Around DIV?

    Hi,

    I am trying to put a link around a set of DIVS so that a block of the page has a link to it and just a single set of words. However with the code below it creates an HTML error.

    Does anyone know how to place a link around a DIV?


    Code:
    <a href="/users/register.php" rel="nofollow"   >
    <div class="maincellleft">
    <div class="cellreason">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </div>
    <div class="cellreasoncontent">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </div>
    </div>
    </a>

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,345
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Unless you are using HTML5, it is invalid to nest a block element inside an inline element. Although HTML5 allows you to do this, I understand it may cause problems in various browsers and is best avoided.

    I don't really understand why you would want to do this anyway. Can you explain a bit more about what you're doing here?
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Im a trying to create an area of the page which has a link instead of just a word.

    Similiar to the navigation menu on this site http://www.play.com/ in which the whole block can be clicked on and not just the word.

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,345
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    That's because in those cases, the block is an image. As images are in-line elements, it's perfectly valid to wrap <a> tags around them. However, if you include text as part of the image, you need to ensure the information will be available even if images are not.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  5. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Is it possible to add a link to a div without an image?

    I have a mouseover affect on a large square but I am struggling to add a link to it. Can I add a link without having an image as the background?

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,345
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    As I said in my first post, unless you are using HTML5, it is invalid to wrap a block element - e.g. <div> in an in-lie element - e.g. <a>. Even in HTML5, it can cause browser rendering problems and is best avoided.

    I'm still no clear what you want to do here. What is the effect that you're trying to achieve, and why does it require the use of an <a> tag?
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  7. #7
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    http://www.guru.com/emp/takeTour.aspx

    Hi,

    This is another example, the menu on the left hand side has large areas with a link covering it. Is this acheived using only images?

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,345
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    If you mean that the background to the list item changes from grey to white on hover, then that's done by using display: block on the <li> and setting padding, etc. to give the required size of block.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  9. #9
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    How do I add a link to it without creating an html error?

  10. #10
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    You can fake the link on a <div> with this code:
    HTML Code:
    <div onClick="window.open( 'whatever/page/you-want.htm','_top' ); return false;">
    There's no extra closing tag, because it closes with the </div>.

    Notes:

    1. Because this relies on Javascript, it is inaccessible to anyone who doesn't have Javascript available. You should therefore include a regular <a href="..."> link around the first block of text in the <div> (or the block that looks most likely to be a link, if it isn't the first one).

    2. All this does is to make the entire <div> into a clickable link, it doesn't do anything for the styling, so you will get no :hover effect unless you put a class on the <div> and include a relevant CSS line, eg
    Code CSS:
    div.whateverclass:hover {background:#ccc; color:red;}

  11. #11
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Can't believe all those answers and not one mentions the <span>, and inline element that can be used inside links.

    Just change your divs to spans
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  12. #12
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Markdidj View Post
    Can't believe all those answers and not one mentions the <span>, and inline element that can be used inside links.

    Just change your divs to spans
    Yes, in this instance I suppose you could do that and put a span {display:block;}, but that only works if you've got <div>s and nothing else, whereas the Javascript solution works whatever content you've got, including headings, lists, the lot.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    the menu on the left hand side has large areas with a link covering it.
    This is very easy to do just with CSS. For example, the best way to do a menu like that is to have an <a> element inside the <li> and simply set it to display: block. Setting the <a> to display: block makes it fill the container.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    As Ralph said display:block will make the anchor stretch horizontally to fill the container and create the block hover effect.

    If you want text inside the anchor you will have to use inline elements.

    Here's an example that is about 10 years old but shows how to do it (view source).

    Or you could absolutely position an anchor over existing content but gets a little complicated (that's another old demo with hacks for IE6 that could be removed these days).

  15. #15
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I tried the following Javascript but it creates an error that the onClick is no recognised.

    Code:
    <div onClick="window.open( '/users/register.php','_top' ); rel="nofollow"; return false;">
    Does anyone use a method to put a link around a DIV?

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You've been given lots of examples above to accomplish this so I'm a bit confused.

    Just put the anchor inside the div and set it to display:block and the whole are becomes active.

    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=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .test {
    	width:300px;
    	height:300px;
    	border:1px solid #000;
    }
    .test a {
    	width:300px;
    	height:300px;
    	display:block;
    	background:red;
    }
    .test a:hover { background:green }
    </style>
    </head>
    
    <body>
    <div class="test"><a href="#">test</a></div>
    </body>
    </html>
    If you are getting en error with onClick then it probably means you are using an xhtml doctype and the attribute should be onclick instead (lowercase as with all xhtml attributes). However having a link activated by JS is a bad idea at the best of times.

    See the links I posted in post#14 form more methods.

  17. #17
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Many thanks, I thought Javascript would be the best option. I tried the CSS example and it worked perfectly. However when I tried it with the same format it does have the same affect.

    This format doesn't change the layout but link only works on the text "REQUEST A QUOTE" and not the DIV it is in.

    Am I doing something wrong?

    Code:
    .topheaderlinkcells {
       float:left;
    padding-top: 5px;
    padding-bottom: 4px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
    margin-right: 5%; 
     font-size:0.8em;
       font-family:Verdana, Geneva, sans-serif;
    }
    
    .topheaderlinkcells a {
    display:block;
    color: #6696F5;
    }
    
    .topheaderlinkcells:hover {
    color: #6696F5;
    border-bottom:3px solid #6696F5;
    }
    
    
    
    
    
    
    
    <div class="topheaderlinkcells">
    <a href="/quoterequests/quoterequest.php"   rel="nofollow" >
    REQUEST A QUOTE
    </a>
    </div>

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Put the padding on the anchor and not the div.

    e,g,
    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=utf-8">
    <title>Untitled Document</title>
    <style>
    .topheaderlinkcells {
    	float:left;
    	margin:10px 5% 5px 5px;
    	font-size:0.8em;
    	font-family:Verdana, Geneva, sans-serif;
    }
    .topheaderlinkcells a {
    	display:block;
    	color: #6696F5;
    	padding:5px 5px 7px;
    	background:#f9f9f9;
    	text-decoration:none;
    }
    .topheaderlinkcells a:hover {
    	border-bottom:3px solid #6696F5;
    	padding:5px 5px 4px;
    }
    </style>
    </head>
    
    <body>
    <div class="topheaderlinkcells"> <a href="/quoterequests/quoterequest.php"   rel="nofollow" > REQUEST A QUOTE </a> </div>
    </body>
    </html>

  19. #19
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Brilliant thanks, that worked straight away.

    I am trying to do another link however this has blue text on white background. Then on mouseover it has white text on blue background. However what ever I try I cant get the right combination to work. I have tried a class just on the text but on the works when you mouseover the actually text and not the DIV.


    Code:
    .topheaderlinkcells {
    	float:left;
    	font-size:0.8em;
    	font-family:Verdana, Geneva, sans-serif;
    margin-right: 5%;
    margin-top: 10px;
    	color: #6696F5;
    }
    
    .topheaderlinkcells a {
    	display:block;
    	text-decoration:none;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    }
    
    .topheaderlinkcells:hover {
    color: #fff;
    background: #6696F5;
    }

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    As mentioned above you style the anchor and not the div. Leave the div alone apart from its size and position.

    e.g.
    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=utf-8">
    <title>Untitled Document</title>
    <style>
    .topheaderlinkcells {
    	float:left;
    	margin:10px 5% 5px 5px;
    	font-size:0.8em;
    	font-family:Verdana, Geneva, sans-serif;
    }
    .topheaderlinkcells a {
    	display:block;
    	color: #6696F5;
    	padding:5px 5px 7px;
    	text-decoration:none;
    	color: #6696F5;
    }
    .topheaderlinkcells a:hover {
    	color: #fff;
    	background: #6696F5;
    }
    </style>
    </head>
    
    <body>
    <div class="topheaderlinkcells"> <a href="/quoterequests/quoterequest.php"   rel="nofollow" > REQUEST A QUOTE </a> </div>
    </body>
    </html>


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
  •