Programming
Popup box position issue with CSSPopup box position issue with CSS

Question Description

I’m studying for my Programming class and need an explanation.

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>

Student has agreed that all tutoring, explanations, and answers provided by the tutor will be used to help in the learning process and in accordance with Studypool's honor code & terms of service.

Final Answer

Hi,

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

Veedeoo (123)
New York University

Anonymous
The tutor was pretty knowledgeable, efficient and polite. Great service!

Anonymous
Heard about Studypool for a while and finally tried it. Glad I did caus this was really helpful.

Anonymous
Just what I needed… fantastic!

Studypool
4.7
Trustpilot
4.5
Sitejabber
4.4

Brown University





1271 Tutors

California Institute of Technology




2131 Tutors

Carnegie Mellon University




982 Tutors

Columbia University





1256 Tutors

Dartmouth University





2113 Tutors

Emory University





2279 Tutors

Harvard University





599 Tutors

Massachusetts Institute of Technology



2319 Tutors

New York University





1645 Tutors

Notre Dam University





1911 Tutors

Oklahoma University





2122 Tutors

Pennsylvania State University





932 Tutors

Princeton University





1211 Tutors

Stanford University





983 Tutors

University of California





1282 Tutors

Oxford University





123 Tutors

Yale University





2325 Tutors