Popup box position issue with CSSPopup box position issue with CSS

Anonymous
timer Asked: Jun 14th, 2013
account_balance_wallet $5

Question Description

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>

Tutor Answer

Veedeoo
School: New York University

Hi,

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

flag Report DMCA
Review

Anonymous
awesome work thanks

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