Here is the code. It worked on my macbook pro, but isnt working when I bring it up on my iMac. Again, the issue is that the #photoshop-link, #illustrator-link, and #indesign-link are not visible in google chrome on (some) computers, until I “inspect element” and then they instantly appear.
<!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>Kyle's Gallery</title>
The javascript:
function closeWindow() {
$("#intro").fadeOut(500);
$("#screen").fadeOut(500);
}
</script>
The css:
<style type="text/css">
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
}
body {
color: white;
}
#container {
height: 650px;
width: 900px;
background-image: url(images/IrisMask.png);
background-size:cover;
padding: 50px;
}
#title {
font-size: 40pt;
margin-right: -400px;
text-align:center;
}
#logo {
float: left;
margin-left: 20px;
}
#content {
margin-top: 50px;
}
#center {
border-radius: 10px;
position: absolute;
width: 820px;
height: 355px;
background-color: black;
opacity: 0.7;
z-index: 5;
left: 500px;
margin-left: -400px;
}
#center-content {
border-radius: 10px;
border-color: white;
border-width: 2px;
border-style:solid;
position: absolute;
opacity: 1;
z-index: 10;
width: 800px;
height: 300px;
left: 500px;
margin-left: -400px;
padding: 25px;
text-align:center;
}
#screen {
position: absolute;
height: 750px;
width: 1000px;
z-index: 3;
background-color: black;
opacity: 0.7;
}
#screen:hover {
position: absolute;
height: 750px;
width: 1000px;
z-index: 3;
background-color: black;
opacity: 0.7;
cursor: pointer;
}
.preview:hover {
cursor: pointer;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
#headshot {
float: left;
border-radius: 14px;
border-color: white;
border-width: 2px;
border-style:solid;
margin-top: -10px;
margin-left: 15px;
}
#intro-text {
float: left;
width: 540px;
font-size: 12pt;
}
#links {
position: absolute;
bottom: 80px;
left:70px;
z-index: 3;
}
#photoshop-link {
}
#illustrator-link {
margin-left: 75px;
}
#indesign-link {
margin-left: 150px;
}
.link {
width:200px;
border-radius: 10px;
border-color: white;
border-width: 2px;
border-style:solid;
font-size: 14pt;
font-weight: bold;
padding: 10px;
margin: 10px;
text-align:center;
}
.link:hover {
width:200px;
border-radius: 10px;
border-color: white;
border-width: 2px;
border-style:solid;
font-size: 14pt;
font-weight: bold;
padding: 10px;
margin: 10px;
text-align:center;
cursor: pointer;
}
</style>
The HTML:
</head>
<body>
<div id="screen" onclick="javascript:closeWindow()">
</div>
<div id="container">
<div id="logo">
<img src="images/logo.png" >
</div>
<div id="title">
Kyle Sundman
</div>
<div class="clearfix"></div>
<div id="content">
<div id="intro">
<div id="center">
</div>
<div id="center-content">
<div id="intro-text">
Greetings world.<br /><br />
I would like to thank you for taking the time to view my gallery.<br /><br />
All content on this site (and the site itself) has been created by me, personally, for the culmination of an intermediary design course at Pepperdine University.<br /><br />
Click the links to view information about the topic, and click the edge of the screen to close the displayed windows (like this one).<br /><br />
Enjoy!<br /><br />
~ Kyle Sundman
</div>
<div id="headshot">
<img src="images/headshot.png" >
</div>
</div>
</div>
<div id="links">
<div id="photoshop-link" class="link">
Photoshop
</div>
<div id="illustrator-link" class="link">
Illustrator
</div>
<div id="indesign-link" class="link">
InDesign
</div>
</div>
</div>
</div>
</body>
</html>
They are just floating off the bottom edge of the black box on larger windows.
Due to css “bottom” property.
I feel dumb.