Seeking to recreate the familiar experience of using a laptop, specifically on Windows Vista, with constrained proportions. The goal is for the laptop image to scale based on screen size and for all elements inside #Screen to adjust accordingly in relation to the screen size.
Currently, the height of .MenuBar is set at 4% which seems appropriate, but I am facing difficulty in positioning the bar at the bottom of #Screen. I initially tried using margin-top:96%, but the current value of 56% is closer to placing the bar at the bottom.
The objective is to scale both the laptop image and its contents based on user's screen size using percentages while ensuring they are centered. Additionally, the screen should appear behind the laptop image as if it has been cut out, and everything within the screen should be relative to the screen itself.
If my explanation above seems confusing, I apologize and appreciate any clarification provided.
View website:
JSFiddle demo: http://jsfiddle.net/JAjMY/
Source Code:
<!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>Untitled Document</title>
<style>
html, body {
margin:0;
padding:0;
}
#Laptop {
margin:0 auto;
width:545px;
height:373px;
background:url(images/laptop.png) no-repeat;
z-index:1;
}
#Laptop .Screen {
position:absolute;
width:395px;
height:221px;
margin-top:26px;
margin-left:75px;
background:#03F;
z-index:2;
}
#Laptop .MenuBar {
position:relative;
width:100%;
height:4%;
margin-top:56%;
background:url(images/Microsoft/Vista/MenuBar.png) repeat-x;
background-size:100% 100%;
}
</style>
</head>
<div id="Laptop">
<div class="Screen">
<div class="MenuBar">
</div>
</div>
</div>
<body>
</body>
</html>
Warm regards, Tim