Popup box position issue with CSSPopup box position issue with CSS

User Generated

yrbznpunqb666

Programming

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>

User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

Explanation & Answer

Hi,

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


Anonymous
Excellent resource! Really helped me get the gist of things.

Studypool
4.7
Trustpilot
4.5
Sitejabber
4.4

Related Tags