layers3.html


<html>

<head>

    <title>CSS Layers Tutorial 1</title>

    <style type="text/css">

    body {

        font-family: Arial;

        font-size: x-small;

    }



    div.box {

        width: 300px;

        height: 30px;

        background: lightblue;

        border: 1px outset darkblue;

        text-align: center;

        padding-top: 6px;

        position: absolute;

        top: 19px;

        left: 260px;

    }



    a:hover {

        background-color: white;

    }



    </style>

    <script language="JavaScript">

        function doNothing() {

            alert("Sorry - this link doesn't do anything");

        }

    </script>

</head>

<body>

    <h1>Layers Tutorial</h1>

    <div class="box">

    <a href="javascript: doNothing();">Home</a> | <a href="javascript: doNothing();">Products</a> | <a href="javascript: doNothing();">Links</a> | <a href="javascript: doNothing();">Contact</a> | <a href="javascript: doNothing();">About</a>

    </div>

    <p>

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In gravida ante in enim. Nulla elementum sagittis ipsum. In blandit, mi nec dignissim egestas, arcu velit iaculis pede, quis cursus enim dui ornare lacus. Curabitur nec arcu. Aliquam congue, velit in mattis consectetuer, libero nisi pulvinar velit, at ullamcorper massa quam sed purus. In pharetra orci non urna. Sed sapien justo, scelerisque at, vehicula vel, bibendum quis, justo. Pellentesque aliquam tellus tristique leo. Aliquam consectetuer lectus eu libero. Donec mollis fermentum dolor. Curabitur vitae purus.

    <br /><br />

    Suspendisse odio. Fusce volutpat sapien a ligula fringilla mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac mauris ut justo congue pharetra. Phasellus ante mi, euismod id, auctor nec, sagittis sit amet, justo. Praesent nec orci. Curabitur et ante. Fusce in pede et mi posuere tempor. Praesent varius nulla eu metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque ornare tortor sed magna. Sed mollis leo id magna.

    </p>

</body>

</html>