SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,209
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    make a tag link clickable

    make a(anchor) tag link clickable

    Code:
    <!doctype html> 
    <html> 
      <head> 
        <meta charset="UTF-8"> 
        <title>3cols8</title> 
      </head> 
    <style type="text/css">
    .wrapper {
     margin:0px auto;
     text-align:left;
     border:0px; 
     overflow:hidden;
    clear:left;
    }
    .center {
     float:left;
     width:100%;
     margin:0 -250px 0 -250px;
    
    }
    .content {
     margin:0 250px 0 250px;
     border:2px solid green;
    padding:5px;
    border-collapse:collapse;
    word-wrap: break-word;
    z-index:1;}
    .left {
     width:250px;
     float:left;
     z-index:2
    }
    .right {
     width:250px;
     position:relative;
     float:right;
     z-index:2;
    }
    </style>
    <body> 
    <div class="wrapper">
      <div class="left">left column <a href="http://sitepoint.com" style="color:red">unclickable link</a></div> 
      <div class="center"> 
      <div class="content"> 
        <a href="http://sitepoint.com">clickable link</a><br>
         text<br>
         text<br>
         text<br>
      </div>
      </div>   
      <div class="right">right column  <a href="http://sitepoint.com">clickable link</a><br>
    </div>  
    </div>
     </body> 
    </html>
    [/code]I have the code above at http://dot.kr/x-test/3cols8.php .
    The link which is in red inside left area is not unclickable in chrome.
    How can I make it clickable?

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    As you may have already figured the stacking order means that your content ( or more specifcally, the MARGIN from your content is on top of your left column)...

    I think you tried to fix this by using, z-index. What you forgot was that you need to give something a positionsomething other than "static" which is default) before you can use z-index. in this case the best thing to use is position:relative;


    Code:
    .content {
     margin:0 250px 0 250px;
     border:2px solid green;
    padding:5px;
    border-collapse:collapse;
    word-wrap: break-word;
    position:relative;
    z-index:1;}
    .left {
     width:250px;
     float:left;
     position:relative;
     z-index:2
    }


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
  •