michaelsinterface.de

css.display

  • Im Zuge des Contests "CSS2k2-Challenge" (2002) habe ich dieses "Front-Panel" mit zwei Displays und diversen Controller-Buttons konstruiert.
Quellcode  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>::: css.display :::</title>

<style type="text/css">
<!--
#displayBox {
position:relative;
width:435px;
height:220px;
margin:50px auto;
}
#displayBox * {
position:absolute;
border:1px solid #cfcfcf;
font-size:0;
}
#topDisplayBox {
left:0px;
top:0px;
width:435px;
height:3px;
}
#leftDisplayBox {
left:0px;
top:8px;
width:95px;
height:143px;
background:#fafafa;
}
#leftDisplaybot1Box {
left:0px;
top:156px;
width:95px;
height:3px;
}
#leftDisplaybot2Box {
left:0px;
top:164px;
width:95px;
height:3px;
}
#leftDisplaybot3Box {
left:0px;
top:172px;
width:95px;
height:3px;
}
#leftDisplaybot4Box {
left:0px;
top:180px;
width:95px;
height:3px;
}
#smallButton1Box {
left:0px;
top:188px;
width:20px;
height:10px;
}
#smallButton2Box {
left:25px;
top:188px;
width:20px;
height:10px;
}
#smallButton3Box {
left:50px;
top:188px;
width:20px;
height:10px;
}
#smallButton4Box {
left:75px;
top:188px;
width:20px;
height:10px;
}
#rightDisplayBox {
left:100px;
top:8px;
width:335px;
height:175px;
background:#fcfcfc;
}
#bigButton1Box {
left:100px;
top:188px;
width:80px;
height:10px;
}
#bigButton2Box {
left:185px;
top:188px;
width:80px;
height:10px;
}
#bigButton3Box {
left:270px;
top:188px;
width:80px;
height:10px;
}
#bigButton4Box {
left:355px;
top:188px;
width:80px;
height:10px;
}
#bottomDisplayBox {
left:0px;
top:203px;
width:435px;
height:3px;
}
-->
</style>

</head>
<body>

<div id="displayBox">
     <div id="topDisplayBox"></div>
     <div id="leftDisplayBox"></div>
     <div id="leftDisplaybot1Box"></div>
     <div id="leftDisplaybot2Box"></div>
     <div id="leftDisplaybot3Box"></div>
     <div id="leftDisplaybot4Box"></div>
     <div id="smallButton1Box"></div>
     <div id="smallButton2Box"></div>
     <div id="smallButton3Box"></div>
     <div id="smallButton4Box"></div>
     <div id="rightDisplayBox"></div>
     <div id="bigButton1Box"></div>
     <div id="bigButton2Box"></div>
     <div id="bigButton3Box"></div>
     <div id="bigButton4Box"></div>
     <div id="bottomDisplayBox"></div>
</div>

</body>
</html>