Programming Homework Help
Programming Homework Help. Popup box position issue with CSSPopup box position issue with CSS
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 > <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>