1
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Reflecti on/Roundcorners Demo</title>
<script type="text/javascript" src="scripts/reflection.js"> </script>
<script type="text/javascript" src="scripts/rounded_corners _lite_inc.js"></script>
<style type="text/css">
[/HTML]
Expand|Select|Wrap|Line Numbers
- * {margin: 0; padding: 0;}
- body {
- font-family: Verdana, sans-serif;
- font-size: 0.84em;
- color: #fff;
- border-top: solid 3px #000;
- background: #3b3c3e;
- }
- * #bpHeader h1 a, a:link, a:visited, a:hover {text-decoration: none; font-weight: 500; color: #699;}
- a {text-decoration: none; font-weight: 600; color: #91d5d2;}
- a:link {text-decoration: none; font-weight: 600; color: #91d5d2;}
- a:visited {font-weight: 600; color: #09a;}
- a:hover {color: #fff;}
- /*__________________________________
- Page Topography
- __________________________________*/
- p {
- line-height: 1.6em;
- margin: 8px 6px 0.5em 6px;
- padding: 0.4em 0.3em 0.5em 0.3em;
- text-align: left;}
- p.small {
- font-size: 0.83em;
- color: #777;
- line-height: 1em;
- text-align: right;
- }
- p.medium {
- font-size: 0.84em;
- color: #899;
- margin: 6px 4px 0.5em 4px;
- padding: 0.3em 0.2em 0 0.2em;
- }
- #bpHeader h1, #bpHeader h3, .blockquote h6 {font-family: Georgia, serif;}
- #bpHeader h1, .blockquote h6 {
- font-style: italic;
- font-weight: 500;
- text-transform: lowercase;
- }
- .floatright {
- float: right;
- font-size: 0.81em;
- margin-bottom: 0.5em;
- padding: 0.5em 2em;
- border-left: 1px solid #444;
- }
- .floatleft {
- float: left;
- font-size: 0.81em;
- margin-bottom: 0.5em;
- padding: 0.5em 2em;
- border-right: 1px solid #444;
- }
- .validation {
- clear: both;
- font-size: 0.81em;
- margin: 0;
- padding: 0.5em 0;
- border-top: 1px solid #444;
- text-align: left;
- }
- /*__________________________________
- Header Styling
- __________________________________*/
- #bpHeader {
- position: relative;
- width: 100%;
- overflow: hidden;
- height: 125px;
- margin: 0;
- padding: 0;
- border-bottom: solid 1px #699;
- background: #000 url('images/tunnel.png') no-repeat scroll 100% -50px;
- }
- #bpHeader h1 {
- font-size: 2.5em;
- letter-spacing: -2px;
- margin: 50px 0 0 150px;
- padding: 0;
- }
- #bpHeader h3 {
- font-size: 1.5em;
- color: #fcfbf5;
- font-weight: 600;
- letter-spacing: -1px;
- margin: -8px 0 0 210px;
- padding: 0;
- }
- /*__________________________________
- Internal Navigation
- __________________________________*/
- #navMenu {
- min-width: 760px;
- height: 30px;
- margin: 0 0 1em 0;
- padding: 8px 0 0 50px;
- border-top: solid 3px #444;
- border-bottom: solid 1px #555;
- background: #1f1f1f;
- }
- #navMenu li {
- float: right;
- list-style: none;
- width: 110px;
- margin-right: 5px;
- padding: 0 23px 0 13px;
- font-family: "Eras Medium ITC", "Lucida Sans Unicode", sans-serif;
- font-size: 1.2em;
- font-weight: 600;
- text-transform: lowercase;
- }
- #navMenu li a {
- display: inline-block;
- text-decoration: none;
- color: #444;
- font-weight: 600;
- }
- #navMenu li a:hover, #navMenu li#active a, #navMenu li#active a:hover {
- text-decoration: none;
- color: #030303;
- padding-top: 4px;
- border-top: solid 4px #030303;
- }
- /*__________________________________
- Design Display Styling
- __________________________________*/
- #Wrapper {
- width: 780px;
- display: block;
- margin: 0 auto 3em auto;
- padding: 0;
- text-align: center;
- }
- fieldset {
- margin: 0 1.5em 2em 1.5em;
- padding: 0 0 0 3em;
- border-top: solid 1px #f4fdff;
- border-right: none;
- border-bottom: none;
- border-left: none;
- }
- legend {
- font-family: Georgia, serif;
- font-size: 1.3em;
- color: #f4fdff;
- font-weight: bold;
- font-style: italic;
- letter-spacing: -1px;
- text-transform: lowercase;
- margin: 0 0 0.3em 0;
- padding: 0.3em 0.4em 0.5em 0.3em;
- }
- .Display {
- margin: 0 auto;
- width: 100%;
- padding: 10px;
- text-align: left;
- border: 2px solid #3b3c3e;
- background: #2b2c2e;
- }
- .Display p {
- width: 90%;
- display: block;
- clear: both;
- font-size: 0.9em;
- margin: 1em auto 0 auto;
- padding: 30px 0;
- color: #fcfbf5;
- text-align: justify;
- }
- img {
- border: none;
- margin-bottom: 2px;
- }
- .view1 {
- width: 240px;
- float: left;
- margin: 0.5em auto 0 0.4em;
- padding: 0;
- text-align: left;
- }
- .view2 {
- width: 240px;
- float: left;
- margin: 0.5em auto 0 1em;
- padding: 0;
- text-align: left;
- }
- .view3 {
- width: 240px;
- float: left;
- margin: 0.5em auto 0 1em;
- padding: 0;
- text-align: left;
- }
- #footer {clear: both;
- width: 100%;
- overflow: hidden;
- height: 75px;
- border-top: solid 1px #699;
- border-bottom: solid 3px #0f0f0f;
- background-color: #000;
- }
- #footer #inner {
- width: 760px;
- margin-right: auto;
- margin-left: auto;
- text-align: center;
- padding-top: 10px;
- }
- #footer #inner p {
- font-size: 0.7em;
- color: #eee;
- text-align: center;
- }
<script type="text/JavaScript">
<!-- script 1
var previousOnload = window.onload;
window.onload = function () { if(previousOnlo ad) previousOnload( ); addReflections( ); }
end script1 -->
<!-- script 2
window.onload = function() {
settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: true
}
/*
Usage:
newCornersObj = new curvyCorners(se ttingsObj, classNameStr);
newCornersObj = new curvyCorners(se ttingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
*/
var DisplayObject = new curvyCorners(se ttings, "Display");
DisplayObject.a pplyCornersToAl l();
}
end script 2 -->
</script>
</head>
<body>
<div id="bpHeader">
<h1 style="directio n: ltr;"><a href="blueplato .com/">blueplato </a></h1>
<h3>designStudi o</h3>
</div>
<ul id="navMenu">
<li><a href="welcome.p hp" title="Welcome" >HOME</a></li>
<li><a href="about.php " title="Focus">A bout</a></li>
<li><a href="bp_form.p hp" title="Form">Co ntact</a></li>
<li><a href="forums/bbpress" title="Discussi on">Forums</a></li>
<li id="active"><a href="#" id="current" name="current"> Designs</a></li>
</ul>
<div id="Wrapper">
<fieldset>
<legend>latestD esigns</legend>
</fieldset>
<div class="Display" >
<div class="view1">
<img class="reflect rheight20 ropacity60" src="images/wrap.png" alt="imagerefle ction.js" />
</div>
<div class="view2">
<img src="images/first.png" class="reflect rheight20 ropacity60" alt="imagerefle ction.js" />
</div>
<div class="view3">
<img src="images/black.png" class="reflect rheight20 ropacity60" alt="imagerefle ction.js" />
</div>
<p>CSS styling allows for extroadinary freedom and flexibility in web page design and layout. No longer restricted with 'Table Structure', CSS makes it possible to combine both flex(%) and fixed(px) measurements, while utilizing the maximum page space, giving new appearance and functionality to your design.
The future of web design presents many exciting advances and endless possibilities. Such freedom fuels the imagination and encourages a desire to extend the limits and go beyond!</p>
</div>
</div>
<div class="validati on"><span class="floatrig ht"><a
href="http://www.bluehost.co m/">bluehost</a></span><span
class="floatlef t"><a
href="http://validator.w3.or g/check?uri=refer er">W3C-valid
XHTML</a></span><span class="floatlef t"><a
href="http://jigsaw.w3.org/css-validator/">W3C-valid
CSS2</a></span></div>
<div id="footer">
<div id="inner">
<p><span>Copyri ght © 2006-07 blueplato.com
® All Rights
Reserved. A Division of blueplato Inc.</span></p>
</div>
</div>
</body>
</html>[/HTML]
I know there is a way to solve the problem of two scripts using handler 'window.onload' ,
but I am not well versed in javascript to know how this is done.
<body onload="fn1Name (args);fn2Name( )">
This is not accepted in XHTML Strict....
window.onload = function() {
if (condition) statement to execute;
fn1Name(args);
fn2Name();
}
This I don't know how to actually name the functions or the condition...
