<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | CSS frame emulation | the holy grill </title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS Frames, CSS menu, CSS menus" />
<meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS" />
<style type="text/css">
/* commented backslash hack v2 \*/
* html {overflow:hidden;}
/* end of hack */
body {background:url(menu_body.gif); background-repeat:repeat-y; background-color:#f8f8f8; background-attachment:fixed; margin:0; padding:0 10px 0 10px; border:0; height:100%;}
* html body {overflow-y:scroll;}
#menu {position:fixed; display:block; top:160px; left:20px; width:130px; height:400px; background-color:transparent; z-index:20;}
* html #menu {position:absolute;}
#hand {position:fixed; display:block; top:185px; left:6px; width:207px; height:250px; background-color:transparent; z-index:20;}
* html #hand {position:absolute;}
#face {position:fixed; display:block; top:0; left:0; width:590px; height:210px; background-color:transparent; z-index:20;}
* html #face {position:absolute;}
#shadow {position:fixed; display:block; top:156px; left:98px; width:490px; height:248px; background-color:transparent; z-index:1;}
* html #shadow {position:absolute; z-index:-1;}


body {font-family:arial, sans-serif; font-size:12px; letter-spacing:1px;}

#menu a, #menu a:link {display:block; width:120px; height:25px; color:rgb(250,111,0); text-decoration:none; line-height:25px; margin-top:5px; border:5px solid #000; background:#fff; font-size:18px; text-align:center;}
#menu a:visited {display:block; width:120px; height:25px; color:rgb(250,111,0);}
#menu a:hover {font-weight:bold; color:#000;}
#menu a:active {font-weight:bold;}


#content {position:relative; display:block; margin:0 0 0 131px; background:transparent; overflow:hidden; letter-spacing:.08em; z-index:10;}
.text {display:block; padding:10px 10px 10px 10px; width:41%; margin-left:5px; text-align:justify; float:left; color:#000;}
.text {width/* */:/**/44%; 
	width: /**/44%;}
.text img {float:right;}

#topper {position:fixed; display:block; top:0; right:0; width:100%; height:156px; background:url(menu_top.gif); background-repeat:repeat-x; font-size:40px; font-style:italic; line-height:80px; font-family:times new roman, serif; overflow:hidden; color:#000; z-index:12;}
* html #topper {position:absolute; right:0;
	right/* */:/**/17px; 
	right: /**/17px;}
#topper img {float:right;}
.clear {clear:both; height:1px;}


#foot {display:block; padding:10px 10px 0 100px; text-align:justify; background:transparent; font-size:10px; color:#000; text-align:center;}
.h4 {font-size:40px; color:rgb(250,111,0); margin-bottom:5px; border-bottom:1px solid #000; letter-spacing:1px; font-weight:bold;}
#rl {position:fixed; display:block; top:-10px; left:10px; width:600px; height:130px; font-size:60px; line-height:90px; font-family:arial, verdana, sans-serif; overflow:hidden; color:rgb(250,111,0); z-index:25; font-weight:bold;}
* html #rl {position:absolute;}
#rl div {color:#000; font-size:30px; margin-top:-40px;}

.bold {font-size:14px; font-weight:bold;}
#pad {display:block; height:200px;}

#adsie {clear:both; text-align:center;}
</style>


</head>

<body><div onClick="this.style.display='none';"><div style="display:block; clear:both; height:1.5em; padding:0.5em;">&nbsp;</div><div style="position:absolute; top:0px; left:0px; display:block; position:fixed; width:100%; padding:0.5em; line-height:1.5em; background-color:#BE0000; color:#FFF; font-family:Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace; font-size:13px; z-index:2147483640; cursor:pointer; " title="click to hide message">Please note, this is a STATIC archive of website www.cssplay.co.uk from 19 Oct 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.</div></div>
<div>
<div id="topper"><img src="tuck1.gif" alt="Friar Tuck" title="Friar Tuck" /></div>
<div id="shadow"><img src="menu_shadow.gif" alt="" title="" /></div>
<div id="face"><img src="menu_face.gif" alt="" title="" /></div>
<div id="hand"><img src="menu_hand.gif" alt="" title="" /></div>

<div id="rl">Friar Tuck-Inn.....&#8224;<br/><div>The Holy Grill</div></div>

<div id="menu">
<a href="frame.html#">Sausage</a>
<a href="frame.html#">Eggs</a>
<a href="frame.html#">Bacon</a>
<br /><br />
<a href="../comments/comments.php@comment_id=Holy&#32;Grill" title="Your comments">Comments</a>

</div>

<div id="content">
<div id="pad"></div>
<div class="text">
<div class="h4">Stu's caf&#233;</div><img src="tuck2.gif" alt="Friar Tuck" title="Friar Tuck" />
<p>Just for a laugh ;)</p>
<p>A layout based on the 'old fashioned HTML Frames' where the header and left column stay fixed, along with the background, and the content scrolls.</p>
<p>This allows the navigation to stay on screen at all times.</p>
<p>This works in IE6 (surprise!), NN7, Mozilla, Firefox and Opera.</p>
<p>Fails to work in IE5.x where the whole page scrolls.</p>
<p>
A bit of jiggery-pokery with the images and z-index allow the content to scroll over the shadows but under the main image.<br />
Scrolls smoothly in IE6 and Opera, but is a bit jerky in Mozilla, NN7 and Firefox.<br />
IE5.x scrolls the whole page.
</p>
<p>The only link that works is the <span class="bold">'Comments'</span> one. Please feel free to leave any <span class="bold">comments</span> here, ta.</p>
<p><img src="tuck4.gif" alt="Friar Tuck" title="Friar Tuck" />
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
  eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
  qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
  facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
  in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
  luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
  eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
  qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
  facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div><!-- end of col1 -->

<div class="text">
<div class="h4">On the Menu</div>
<p><img src="tuck3.gif" alt="Friar Tuck" title="Friar Tuck" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
  in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
  luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
  eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
  qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
  facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
  in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
  luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
  eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
  qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
  facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

<img src="tuck5.gif" alt="Friar Tuck" title="Friar Tuck" />
<div class="clear"></div>
<div class="h4">I'll be back!!</div>
</div><!-- end of col2 -->





</div> <!--content-->



<div id="foot"><p>&copy;2004/2005 Stuart A Nicholls ~ all rights reserved.</p>
<a href="../comments/comments.php@comment_id=Holy&#32;Grill" title="Your comments">Comments</a> | <a href="../index.html" title="Home Page">Home Page</a>
<p>This web site uses the very latest techniques in XHTML and CSS and should be available to all the latest browsers.</p>

</div>

<br /><br />
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>
</body>
</html>
