ÿþ<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>greyscale</title> <style type="text/css"> BODY { margin:4px; padding: 0px; font-family:georgia, times new roman, times; font-size:12px; border-left:solid white; border-bottom:solid #333333; border-top:solid white; border-right:solid #333333; background:#DFDFDF; border-width:"0px"; } #content { width:800; height:600; border-left:1px solid white; border-bottom:1px solid #333333; border-top:1px solid white; border-right:1px solid #333333; background: buttonface; } .header H1 { position: absolute; top: 8px; left: 160px; width: 640px; font-family: georgia, times new roman, times; font-size: 60px; color: #909090; text-align: right; border-left: 1px solid white; border-bottom: 1px solid #333333; border-top: 1px solid white; border-right: 1px solid #333333; padding:14px; } .sidebar { position:absolute; top:108px; left: 8px; width: 152px; height: 492px; font-family: georgia, times new roman, times; font-size:10px; font-weight: bold; color: #808080; padding:12px; border-left:1px solid white; border-bottom:1px solid #333333; border-top:1px solid white; border-right:1px solid #333333; } .button1 { position:absolute; top: 108px; left: 160px; color: #4682B4; text-decoration: none; text-align:center; padding-top:4px; width:128px; height:25px; font-family:georgia, times new roman, times; border-left: 1px solid white; border-bottom: 1px solid #333333; border-top: 1px solid white; border-right: 1px solid #333333; } .button2 { position:absolute; top: 108px; left: 288px; color: #4682B4; text-decoration: none; text-align:center; padding-top:4px; width:128px; height:25px; font-family:georgia, times new roman, times; border-left: 1px solid white; border-bottom: 1px solid #333333; border-top: 1px solid white; border-right: 1px solid #333333; } .button3 { position:absolute; top: 108px; left: 416px; color: #4682B4; text-decoration: none; text-align:center; padding-top:4px; width:128px; height:25px; font-family:georgia, times new roman, times; border-left: 1px solid white; border-bottom: 1px solid #333333; border-top: 1px solid white; border-right: 1px solid #333333; } .button4 { position:absolute; top: 108px; left: 544px; color: #4682B4; text-decoration: none; text-align:center; padding-top:4px; width:128px; height:25px; font-family:georgia, times new roman, times; border-left: 1px solid white; border-bottom: 1px solid #333333; border-top: 1px solid white; border-right: 1px solid #333333; } .button5 { position:absolute; top: 108px; left: 672px; color: #4682B4; text-decoration: none; text-align:center; padding-top:4px; width:128px; height:25px; font-family:georgia, times new roman, times; border-left: 1px solid white; border-bottom: 1px solid #333333; border-top: 1px solid white; border-right: 1px solid #333333; } .search { color: #4682B4; font-size:11px; background: buttonface; text-decoration: none; text-align:center; padding-top:4px; width:60px; height:22px; font-family:georgia, times new roman, times; border-left: 1px solid white; border-bottom: 1px solid #333333; border-top: 1px solid white; border-right: 1px solid #333333; } .main { position: absolute; top: 133px; left: 160px; width: 640px; height: 446px; background: #EEEEEE; padding: 12px; border-left: 1px solid white; border-bottom: 1px solid #333333; border-top: 1px solid white; border-right: 1px solid #333333; } a:link, a:visited { font-family:georgia, times new roman, times; color:#4682B4; font-weight:bold; text-decoration: none; } a:hover { font-family:georgia, times new roman, times; color:#0000AA; font-weight:bold; text-decoration: underline overline; } .footer { width: 640px; height: 20px; position:absolute; top: 580px; left: 160px; border-left: 1px solid white; border-bottom: 1px solid #333333; border-top: 1px solid white; border-right: 1px solid #333333; font-size: 11px; padding-right:4px; text-align:right; } .input { font-family:georgia, times new roman, times; font-size:11px; border:1px solid #808080; vertical-align:middle; } </style> </head> <body> <!-- MAIN CONTENT BEGIN --> <DIV id="content"><img src="photo.jpg" align="middle" alt="photo.jpg"></DIV> <DIV class="header"><H1><u>Raised&nbsp;&nbsp;Greyscale&nbsp;</u></H1></DIV> <DIV class="sidebar"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lacus pede, bibendum ut, mollis ut, fermentum et, turpis. Ut semper, enim eget ullam corper scelerisque, metus velit gravida dui, non malesuada leo urna sed wisi. <a href="#">Vivamus urna mauris</a>, vulputate ut, molestie eget, scelerisque sed, mauris. Praesent molestie porta sapien.</p> <p>Integer scelerisque volutpat libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam et eros et enim molestie placerat. <a href="#">Vestibulum</a> ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed in dui.</p></DIV> <DIV class="button1"><a href="index.html">Home</a></DIV> <DIV class="button2"><a href="#">Services</a></DIV> <DIV class="button3"><a href="#">Products</a></DIV> <DIV class="button4"><a href="#">About Us</a></DIV> <DIV class="button5"><a href="#">Contact Us</a></DIV> <DIV class="nav">&nbsp;</DIV> <DIV class="main"> <h4>Heading</h4> <p>This design is my first submission to OSWD. Feel free to use and modify it as you please. Please send me an email to let me know you are using it. I hope you like it.</p> <p>I didn't want to get too complex on the first try but I had to tweak the CSS Code quite a bit. The navigation buttons across the top look like "real" buttons and can be set to launch pages. This makes navigation a cinch. However, If you resize them in any way, you'll have to change their positions on the page in the &lt;STYLE&gt; tag. Had to throw in some Steel Blue for the links to give it some color. It's not an overbearing color so it keeps the page looking soft.</p> <p align="right"><input type="text" size="30" class="input"> &nbsp;&nbsp;<a href="#" class="search">Search</a></p> </DIV> <DIV class="footer">&copy; Copyright 2005. Your information. Design by <a href="mailto:jim_bristol@excite.com?SUBJECT=OSWD greyscale design">Barnaby_Wild</a>.</DIV> <!-- MAIN CONTENT END --> </body> </html>