Popup box position issue with CSSPopup box position issue with CSS

Programming
Tutor: None Selected Time limit: 30 Days

Hey guys, i'm new in html/css coding and now i want to make a small "portfolio" website tryout. I only want a web with 3 squares on the middle of the website, a h1 header with "leo Design" and nice popups when clicking the boxes.

I copied the boxes scripts from http://css-tricks.com/fold-out-popups/

I want each box to have the popup on the bottom of the box 
So far i have this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Leo Design</title>

<style>

body {
	font-family:"Courier New", Courier, monospace;
	background-color:#333;
	color:white;

}
p{
	font-weight:300;
	font-weight: bolder;
	font-size:20px;
}

#tablaprincipal {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 100;
    
    margin-top: -200px;
    margin-left: -270px;
	
  }
  
<!-- Comienza el estilo PopUp -->
  label {
	      position: relative;
	  }

		.box {
			position:absolute;
			left: 0 ;
			top: 100%;
			z-index: 500;
			
			/* previene errores en safari 5.1 */
			-webkit-backface-visibility: hidden;
			
			background-color: #eeeeee;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999)); 
			background-image: -webkit-linear-gradient(top, #eeeeee, #999999); 
			background-image:    -moz-linear-gradient(top, #eeeeee, #999999); 
			background-image:     -ms-linear-gradient(top, #eeeeee, #999999); 
			background-image:      -o-linear-gradient(top, #eeeeee, #999999); 
							
			-moz-border-radius:    20px; 
			-webkit-border-radius: 20px; 
			border-radius:         20px; 
			  
			-moz-background-clip:    padding; 
			-webkit-background-clip: padding-box; 
			background-clip:         padding-box; 
			
			width: 260px; 
			padding: 20px;
			margin: 24px 0;
			opacity: 0;
					    
			-webkit-transform: scale(0) skew(50deg);
			-moz-transform:    scale(0) skew(50deg);
			-ms-transform:     scale(0) skew(50deg);
			-o-transform:      scale(0) skew(50deg);
			
			-webkit-transform-origin: 0px -30px;
			-moz-transform-origin:    0px -30px;
			-ms-transform-origin:     0px -30px;
			-o-transform-origin:      0px -30px;
			
			-webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
			-moz-transition:    -moz-transform    ease-out .35s, opacity ease-out .4s;
			-ms-transition:     -ms-transform     ease-out .35s, opacity ease-out .4s;
			-o-transition:      -o-transform      ease-out .35s, opacity ease-out .4s;
		}
		
		.box:after {
			content: "";
			position: absolute;
			bottom: 100%;
			left: 30px;
			border-bottom: 20px solid #eee;
			border-left:   14px solid transparent;
			border-right:  14px solid transparent;
			width:  0;
			height: 0;
		}
		
		.popUpControl:checked ~ label > .box {
			opacity: 1;
			-webkit-transform: scale(1) skew(0deg);
			-moz-transform:    scale(1) skew(0deg);
			-ms-transform:     scale(1) skew(0deg);
			-o-transform:      scale(1) skew(0deg);
		}
		.popUpControl { 
		  display: none; 
		}
		
		.button {
			/*--
			background: blue;
			color: white;
			padding: 5px;
			border-radius: 5px;
			--*/
		}
		
		/* For dog example */
		.box img {
	  		-moz-border-radius:    10px; 
        -webkit-border-radius: 10px; 
        border-radius:         10px; 
	  }
		#doggiezzz:checked ~ label > span:first-child {
			display: none;
		}
		#doggiezzz:checked ~ label:before {
			content: "Less Dog!";
		}
		
		
		/* For link example */
		.link { color: white;  }
		.title { display: block; font-weight: bold; margin: 0 0 10px 0; color: black; font: bold 16px Sans-Serif; text-decoration: none; }
    .copy { color: black; text-decoration: none;  }
    

<!-- termina el popup -->

</style>

</head>

<body>

<h1 align="center">
Leo Design
</h1>
<table   id="tablaprincipal"  align="center" border="0px" bordercolor="" height="150px" width="540" cellspacing="6px" cellpadding="6" >
	<tr>
	
   <td bgcolor="#FF6666" width="135">	
   <div id="page-wrap">
	
		<input type="checkbox" id="linkie" class="popUpControl">
			<label for="linkie" class="link">
			    <span class="box">
  			   <span class="title">About me</span>
  			   <span class="copy">bios</span>
  			</span>
		<p align="center">About</p></span>
        
        
        
        
        		<!--<input type="checkbox" id="doggiezzz" class="popUpControl">
		<label for="doggiezzz" class="button">
		   <span>
		   <span class="box">
			   <img src="http://placedog.com/260/260">
		
        
        
        	</span>
		</label> 
        -->
        
        
			</td>
		<td bgcolor="#33CC66" width="135"><p align="center">
        Portfolio</p>
			</td>
        
		<td bgcolor="#3366FF" width="135">
   
		<input type="checkbox" id="linkie" class="popUpControl">
			<label for="linkie" class="link">
			    <span class="box">
  			   <span class="title">About me</span>
  			   <span class="copy">bios</span>
  			</span>
		<p align="center">Contact</p></span>
        
        
   
   
   </td>
	</tr>
</table>
	<div id="page-wrap">
			<!--
		<input type="checkbox" id="doggiezzz" class="popUpControl">
		<label for="doggiezzz" class="button">
		   <span></span>
		   <span class="box">
			   <img src="http://placedog.com/260/260">
			</span>
		</label>  
        -->

		<p>
		  
		  <input type="checkbox" id="linkie" class="popUpControl">
			<label for="linkie" class="link">
			    <span class="box">
  			   <span class="title">About me</span>
  			   <span class="copy">bios</span>
  			</span>
		  </label> 
		 
		</p>
							
	</div>
</body>
</html>

Nov 30th, -0001
Hi,

I tested your codes, and it appears to be working on my side. Can it be your browser?
Jun 14th, 2013

Never mind, let me test it again. Do you want all of them to have the pop-up in the bottom? Hold on..

Jun 14th, 2013

Here is the screenshot of the page utilizing a jquery

image1.jpg

Jun 15th, 2013

Did you know? You can earn $20 for every friend you invite to Studypool!
Click here to
Refer a Friend
...
Nov 30th, -0001
...
Nov 30th, -0001
May 28th, 2017
check_circle
Mark as Final Answer
check_circle
Unmark as Final Answer
check_circle
Final Answer

Secure Information

Content will be erased after question is completed.

check_circle
Final Answer